API tools faq
paste
Advertisement
cooprocks123e

Snake v0.1

cooprocks123e
Mar 15th, 2015
256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>stairfax temperatures</title>
  5.         <style type="text/css">
  6.             #drawCanvas{
  7.                 width: 600px;
  8.                 height: 600px;
  9.                 /* border: 2px solid; */
  10.                 border-radius: 30px;
  11.                 padding: 15px;
  12.                 background-color: white;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body style="background-color: rgb(200,200,200);">
  17.         <div style="width: 100%;">
  18.             <div style="display: table; margin: 15px auto;">
  19.                 <canvas id="drawCanvas"/>
  20.                 <script>
  21.                     var canvas = document.getElementById("drawCanvas");
  22.                     canvas.width=600;
  23.                     canvas.height=600;
  24.                     var ctx = canvas.getContext("2d");
  25.                     var snake = {};
  26.                     var dot = {};
  27.                     var then;
  28.                     var gameMode;
  29.                    
  30.                     addEventListener("keydown", function (e) {
  31.                         if((e.keyCode>=37) && (e.keyCode<=40)){
  32.                             if(gameMode!=1) { if(snake.pieces.length>1) { reset(); } gameMode=1; }
  33.                             if(snake.direction.length==1)
  34.                                 snake.direction.pop();
  35.                             snake.direction.unshift(e.keyCode-37); // 0-left, 1-up, 2-right, 3-down
  36.                         }  
  37.                     }, false);
  38.                     addEventListener("keyup", function (e) {
  39.                         if((e.keyCode>=37) && (e.keyCode<=40)){
  40.                             var tmp = snake.direction.indexOf(e.keyCode-37);
  41.                             if(tmp>-1&&snake.direction.length>1)
  42.                                 snake.direction.splice(tmp,1); // 0-left, 1-up, 2-right, 3-down
  43.                         }  
  44.                     }, false);
  45.                    
  46.                     var reset = function () {
  47.                         run=true;
  48.                         then=Date.now();
  49.                         snake.length=5;
  50.                         snake.direction=[0];
  51.                         snake.pieces = [[Math.floor(Math.random()*10),Math.floor(Math.random()*10)]];
  52.                         do
  53.                             dot.location = [Math.floor(Math.random()*10),Math.floor(Math.random()*10)];
  54.                         while((dot.location[0] == snake.pieces[0][0]) && (dot.location[1] == snake.pieces[0][1]));
  55.                     };
  56.                     var update = function () {
  57.                         var oldPiece = snake.pieces[0];
  58.                         switch(snake.direction[0]){
  59.                         case 0: // left
  60.                             snake.pieces.unshift([oldPiece[0]-1,oldPiece[1]]);
  61.                             break;
  62.                         case 1: // up
  63.                             snake.pieces.unshift([oldPiece[0],oldPiece[1]-1]);
  64.                             break;
  65.                         case 2: // right
  66.                             snake.pieces.unshift([oldPiece[0]+1,oldPiece[1]]);
  67.                             break;
  68.                         case 3: // down
  69.                             snake.pieces.unshift([oldPiece[0],oldPiece[1]+1]);
  70.                             break;
  71.                         }
  72.                        
  73.                         var p = snake.pieces[0];
  74.                         if(p[0]<0||p[0]>9||p[1]<0||p[1]>9)
  75.                             gameMode=0;                    
  76.                         if((dot.location[0] == p[0]) && (dot.location[1] == p[1])){
  77.                             snake.length++;
  78.                             do
  79.                                 dot.location = [Math.floor(Math.random()*10),Math.floor(Math.random()*10)];
  80.                             while((dot.location[0] == snake.pieces[0][0]) && (dot.location[1] == snake.pieces[0][1]));
  81.                         }
  82.                        
  83.                         while(snake.pieces.length>snake.length)
  84.                             snake.pieces.pop();
  85.                     };
  86.                     var render = function () {
  87.                         switch(gameMode){
  88.                             case 1:
  89.                                 ctx.fillStyle="rgb(200,200,200)";
  90.                                 break;
  91.                             default:
  92.                                 ctx.fillStyle="rgb(220,220,220)";
  93.                                 break;
  94.                         }
  95.                         for(var y=0;y<10;y++){
  96.                             for(var x=0;x<10;x++){
  97.                                 ctx.fillRect(10+x*60,10+y*60,40,40);
  98.                             }
  99.                         }
  100.                         if(gameMode==1){
  101.                             ctx.fillStyle="rgb(10,20,255)";
  102.                             ctx.fillRect(10+dot.location[0]*60,10+dot.location[1]*60,40,40);
  103.                         }
  104.                        
  105.                         switch(gameMode){
  106.                             case 1:
  107.                                 ctx.fillStyle="rgb(255,20,10)";
  108.                                 break;
  109.                             default:
  110.                                 ctx.fillStyle="rgb(255,110,100)";
  111.                                 break;
  112.                         }
  113.                         for (var i=0;i<snake.pieces.length;i++)
  114.                             ctx.fillRect(10+snake.pieces[i][0]*60,10+snake.pieces[i][1]*60,40,40);
  115.                     };
  116.                     var main = function(){
  117.                         if(gameMode==1){
  118.                             var now = Date.now();
  119.                             if(run&&(now-then)>100){
  120.                                 then=now;
  121.                                 update();
  122.                             }
  123.                         }
  124.                         render();
  125.                         window.requestAnimationFrame(main);
  126.                     };
  127.                     gameMode=0;
  128.                     reset();
  129.                     main();
  130.                 </script>
  131.             </div>
  132.         </div>
  133.     </body>
  134. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!