API tools faq
paste
beannshie

HTML Snake Game

beannshie
Sep 8th, 2018
452
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.19 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.         <title>Snake Game</title>
  7.         <meta name="description" content="">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <style>
  10.             * {
  11.                 font-family: sans-serif;
  12.                 font-size: 16px;
  13.                 width: 100%;
  14.                 height: 100%;
  15.                 padding: 0;
  16.                 margin: 0;
  17.             }
  18.             canvas {
  19.                 width: 100%;
  20.                 height: 99.6%;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <canvas id="canvas"></canvas>
  26.         <script>
  27.             var canvas = document.getElementById("canvas");
  28.             var canvasContext = canvas.getContext('2d');
  29.            
  30.             var winW = window.innerWidth;
  31.             var winH = window.innerHeight;
  32.             canvas.width  = window.innerWidth;
  33.             canvas.height = window.innerHeight;
  34.            
  35.             document.onkeydown = checkKey;
  36.            
  37.             var x,y,fruitX,fruitY,nTail,score;
  38.             var tailX = [];
  39.             var tailY = [];
  40.             const COLUMNS = 15;
  41.             const ROWS = COLUMNS;
  42.            
  43.             var gameSpeed = 120;
  44.            
  45.             const directions = {
  46.                 UP: 'up',
  47.                 DOWN: 'down',
  48.                 LEFT: 'left',
  49.                 RIGHT: 'right'
  50.             };
  51.            
  52.             let direciton;
  53.            
  54.             setup();
  55.            
  56.             function timeout() {
  57.                 setTimeout(function () {
  58.                     main();
  59.                     timeout();
  60.                 }, gameSpeed);
  61.             };
  62.             timeout();
  63.  
  64.             function main()
  65.             {
  66.                 draw();
  67.                 move();
  68.                 logic();
  69.             }
  70.            
  71.             function setup()
  72.             {
  73.                 x = 7;
  74.                 y = 7;
  75.                 score = 0;
  76.                 nTail = 0;
  77.                 tailX = [];
  78.                 tailY = [];
  79.                 direction = null;
  80.                 fruitX = Math.floor(Math.random() * ROWS);
  81.                 fruitY = Math.floor(Math.random() * COLUMNS);
  82.             }
  83.            
  84.             function draw()
  85.             {
  86.                 const GAME_HEIGHT = winH - (winH/50);
  87.                 const GAME_WIDTH = GAME_HEIGHT;
  88.                 const GAME_X = (winW/2)-(GAME_WIDTH/2);
  89.                 const GAME_Y = winH/100;
  90.                 const TILE_WIDTH = GAME_WIDTH / ROWS;
  91.                 const TILE_HEIGHT = GAME_HEIGHT / COLUMNS;
  92.                 const HEAD_RADIUS = (TILE_WIDTH - (TILE_WIDTH / 3)) / 2;
  93.                 const TAIL_RADIUS = TILE_WIDTH / 4;
  94.                
  95.                 rect(0,0, winW,winH, 'black'); // canvas
  96.                 rect(GAME_X,GAME_Y, GAME_WIDTH,GAME_HEIGHT, 'white');
  97.                
  98.                 for(var i = 0; i < COLUMNS; i++)
  99.                 {
  100.                     for(var j = 0; j < ROWS; j++)
  101.                     {
  102.                         rect(GAME_X+(i*TILE_WIDTH),GAME_Y+(j*TILE_HEIGHT), TILE_WIDTH,TILE_HEIGHT, 'red');
  103.                         if(x === i && y === j)
  104.                         {
  105.                             var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  106.                             var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  107.                             circle(circleX,circleY, HEAD_RADIUS, '#555555');
  108.                         }
  109.                         if(fruitX === i && fruitY === j)
  110.                         {
  111.                             var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  112.                             var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  113.                             circle(circleX,circleY, TAIL_RADIUS, '#00AA00');
  114.                         }
  115.                         for(var k = 0; k < nTail; k++)
  116.                         {
  117.                             if (tailX[k] === i && tailY[k] === j)
  118.                             {
  119.                                 var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  120.                                 var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  121.                                 circle(circleX,circleY, TAIL_RADIUS, '#555555');
  122.                             }
  123.                         }
  124.                     }
  125.                 }
  126.             }
  127.            
  128.             function move()
  129.             {
  130.                 switch(direction)
  131.                 {
  132.                     case directions.UP:
  133.                         y--;
  134.                         break;
  135.                     case directions.DOWN:
  136.                         y++;
  137.                         break;
  138.                     case directions.LEFT:
  139.                         x--;
  140.                         break;
  141.                     case directions.RIGHT:
  142.                         x++;
  143.                         break;
  144.                 }
  145.             }
  146.            
  147.             function logic()
  148.             {
  149.                 if(x < 0 || x >= ROWS || y < 0 || y >= COLUMNS)
  150.                 {
  151.                     alert("Game Over - you died with a score of " + score + ".");
  152.                     setup();
  153.                 }
  154.                 if(x === fruitX && y === fruitY)
  155.                 {
  156.                     fruitX = Math.floor(Math.random() * ROWS);
  157.                     fruitY = Math.floor(Math.random() * COLUMNS);
  158.                     score += 100;
  159.                     if(nTail === 0)
  160.                     {
  161.                         nTail += 2;
  162.                     }
  163.                     else
  164.                     {
  165.                         nTail++;
  166.                     }
  167.                 }
  168.                 for(var i = 0; i < nTail; i++)
  169.                 {
  170.                     if(tailX[i] === x && tailY[i] === y && i !== 1)
  171.                     {
  172.                         draw();
  173.                         alert("Game Over - you bit youself, you died with a score of " + score + ".");
  174.                         setup();
  175.                     }
  176.                     if(tailX[i] === x && tailY[i] === y && i === 1)
  177.                     {
  178.                         switch(direction)
  179.                         {
  180.                             case directions.UP:
  181.                                 y += 2;
  182.                                 direction = directions.DOWN;
  183.                                 break;
  184.                             case directions.DOWN:
  185.                                 y -= 2;
  186.                                 direction = directions.UP;
  187.                                 break;
  188.                             case directions.LEFT:
  189.                                 x += 2;
  190.                                 direction = directions.RIGHT;
  191.                                 break;
  192.                             case directions.RIGHT:
  193.                                 x -= 2;
  194.                                 direction = directions.LEFT;
  195.                                 break;
  196.                         }
  197.                     }
  198.                 }
  199.                
  200.                 var prevX = tailX[0];
  201.                 var prevY = tailY[0];
  202.                 var prevX2, prevY2;
  203.                 tailX[0] = x;
  204.                 tailY[0] = y;
  205.                 for (var i = 1; i < nTail; i++)
  206.                 {
  207.                     prevX2 = tailX[i];
  208.                     prevY2 = tailY[i];
  209.                     tailX[i] = prevX;
  210.                     tailY[i] = prevY;
  211.                     prevX = prevX2;
  212.                     prevY = prevY2;
  213.                 }
  214.             }
  215.            
  216.             function rect(x,y, width,height, color)
  217.             {
  218.                 canvasContext.fillStyle = color;
  219.                 canvasContext.fillRect(x,y, width,height);
  220.             }
  221.            
  222.             function circle(cX,cY, radius, color)
  223.             {
  224.                 canvasContext.fillStyle = color;
  225.                 canvasContext.beginPath();
  226.                 canvasContext.arc(cX,cY, radius,0,Math.PI*2,true);
  227.                 canvasContext.fill();
  228.             }
  229.            
  230.             function checkKey(e)
  231.             {
  232.                 var keynum;
  233.  
  234.                 if(window.event) { // IE                    
  235.                     keynum = e.keyCode;
  236.                 } else if(e.which){ // Netscape/Firefox/Opera                  
  237.                     keynum = e.which;
  238.                 }
  239.                
  240.                 switch(keynum)
  241.                 {
  242.                     case 87:    // w
  243.                         if(direction !== directions.DOWN)
  244.                         {
  245.                             direction = directions.UP;
  246.                         }
  247.                         else if(nTail === 0)
  248.                         {
  249.                             direction = directions.UP;
  250.                         }
  251.                         break;
  252.                     case 65:    // a
  253.                         if(direction !== directions.RIGHT)
  254.                         {
  255.                             direction = directions.LEFT;
  256.                         }
  257.                         else if(nTail === 0)
  258.                         {
  259.                             direction = directions.LEFT;
  260.                         }
  261.                         break;
  262.                     case 83:    // s
  263.                         if(direction !== directions.UP)
  264.                         {
  265.                             direction = directions.DOWN;
  266.                         }
  267.                         else if(nTail === 0)
  268.                         {
  269.                             direction = directions.DOWN;
  270.                         }
  271.                         break;
  272.                     case 68:    // d
  273.                         if(direction !== directions.LEFT)
  274.                         {
  275.                             direction = directions.RIGHT;
  276.                         }
  277.                         else if(nTail === 0)
  278.                         {
  279.                             direction = directions.RIGHT;
  280.                         }
  281.                         break;
  282.                 }
  283.             }
  284.         </script>
  285.     </body>
  286. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!