SHARE
TWEET

Untitled

a guest Oct 21st, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <title>Snake</title>
  4.     <!-- the follwing line of code optimizes for mobile screens -->
  5.     <meta name="viewport" content="width=device-width, user-scalable=no">
  6.  
  7.     <style>
  8.       button {
  9.         background-color: #4CAF50; /* Green */
  10.         border: none;
  11.         color: white;
  12.         padding: 15px 32px;
  13.         text-align: center;
  14.         text-decoration: none;
  15.         display: inline-block;
  16.         font-size: 16px;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.       <h1>Snake</h1>
  22.       <canvas id="gc" width="256" height="256"></canvas>
  23.       <div style="text-align: center; margin: 10px; width: 300px">
  24.           <button onclick="moveUp()">UP</button>
  25.           <br>
  26.           <button onclick="moveLeft()">LEFT</button>
  27.           <button onclick="moveRight()">RIGHT</button>
  28.           <br>
  29.           <button onclick="moveDown()">DOWN</button>
  30.       </div>
  31.   </body>
  32.   <script src="/script.js" defer></script>
  33. </html>
  34.  
  35.  
  36. <script>
  37.   window.onload=function() {
  38.       canvas=document.getElementById("gc");
  39.       context=canvas.getContext("2d");
  40.       document.addEventListener("keydown",keyPush);
  41.       frameRate = 1000/15; // 15 frames per second (in milliseconds)
  42.       setInterval(game, frameRate);
  43.   }
  44.  
  45.   const KEY_LEFT  = 37;
  46.   const KEY_UP    = 38;
  47.   const KEY_RIGHT = 39;
  48.   const KEY_DOWN  = 40;
  49.  
  50.   // var px,py,gs,tc,ax,ay,xv,yv,trail,tail;
  51.  
  52.   px=py=10; // player
  53.   gs=tc=16; // 16 by 16 // game size // tile count
  54.   ax=ay=15; // apple
  55.   xv=yv=0;
  56.   trail = [];
  57.   tail = 5;
  58.  
  59.   function game() {
  60.       px+=xv;
  61.       py+=yv;
  62.       // wrap
  63.       if (px<0) {
  64.           px=tc-1;
  65.       }
  66.       if (px>tc-1) {
  67.           px=0;
  68.       }
  69.       if (py<0) {
  70.           py=tc-1;
  71.       }
  72.       if (py>tc-1) {
  73.           py=0;
  74.       }
  75.       context.fillStyle="black";
  76.       context.fillRect(0,0,canvas.width,canvas.height);
  77.  
  78.       context.fillStyle="lime";
  79.       for(var i=0; i<trail.length; i++) {
  80.           x = trail[i].x;
  81.           y = trail[i].y;
  82.           context.fillRect(x*gs, y*gs, gs-2, gs-2);
  83.  
  84.           if (x == px && y == py) {
  85.               tail = 5;
  86.           }
  87.       }
  88.  
  89.       var new_trail_element = new Object();
  90.       new_trail_element.x = px;
  91.       new_trail_element.y = py;
  92.       trail.push(new_trail_element);
  93.  
  94.       while (trail.length > tail) {
  95.           trail.shift(); // ???
  96.       }
  97.  
  98.       if (px == ax && py == ay) {
  99.           tail++;
  100.           ax=Math.floor(Math.random()*tc);
  101.           ay=Math.floor(Math.random()*tc);
  102.       }
  103.  
  104.       context.fillStyle="red";
  105.       context.fillRect(ax*gs, ay*gs, gs-2, gs-2);
  106.   }
  107.  
  108.   function keyPush(event) {
  109.       if (event.keyCode == KEY_LEFT) {
  110.           moveLeft();
  111.       }
  112.       else if (event.keyCode == KEY_UP) {
  113.           moveUp();
  114.       }
  115.       else if (event.keyCode == KEY_RIGHT) {
  116.           moveRight();
  117.       }
  118.       else if (event.keyCode == KEY_DOWN) {
  119.           moveDown();
  120.       }
  121.       else {
  122.           // do nothing
  123.       }
  124.   }
  125.  
  126.   function moveUp() {
  127.       xv=0;yv=-1; // remember that 0,0 is top left
  128.   }
  129.  
  130.   function moveLeft() {
  131.       xv=-1;yv=0;
  132.   }
  133.  
  134.   function moveRight() {
  135.       xv=1;yv=0;
  136.   }
  137.  
  138.   function moveDown() {
  139.       xv=0;yv=1;
  140.   }
  141. </script>
RAW Paste Data
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!
 
Top