API tools faq
paste
Advertisement
Guest User

HTML5 Snake Game

a guest
Jul 8th, 2016
465
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.24 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Snake Game</title>
  4. <script language="javascript">
  5. var scoreElement, score;
  6. var ctx, canvasWidth, canvasHeight;
  7. var gameTimer;
  8. var fieldWidth, fieldHeight, objectRadius;
  9. var snakeDirection, snakeData, foodData;
  10.  
  11. var GAME_SPEED = 250;
  12.  
  13. var OBJECT_WIDTH  = 10;
  14. var OBJECT_HEIGHT = 10;
  15.  
  16. var DIRECTION_LEFT  = 1;
  17. var DIRECTION_RIGHT = 2;
  18. var DIRECTION_UP    = 3;
  19. var DIRECTION_DOWN  = 4;
  20.  
  21. var COLOR_FIELD = "DarkKhaki";
  22. var COLOR_SNAKE = "SteelBlue";
  23. var COLOR_FOOD = "Gold";
  24.  
  25. var VK_ESCAPE = 27;
  26. var VK_LEFT   = 37;
  27. var VK_UP     = 38;
  28. var VK_RIGHT  = 39;
  29. var VK_DOWN   = 40;
  30.  
  31. function drawField() {
  32.   ctx.fillStyle = COLOR_FIELD;
  33.   ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  34. }
  35.  
  36. function drawSnake() {
  37.   var centerX = snakeData[0].x * OBJECT_WIDTH + OBJECT_WIDTH / 2;
  38.   var centerY = snakeData[0].y * OBJECT_HEIGHT + OBJECT_HEIGHT / 2;
  39.   ctx.fillStyle = COLOR_SNAKE;
  40.   ctx.beginPath();
  41.   ctx.moveTo(centerX, centerY);
  42.   switch (snakeDirection) {
  43.     case DIRECTION_LEFT:
  44.       ctx.arc(centerX, centerY, objectRadius, -0.75 * Math.PI, 0.75 * Math.PI, false);
  45.       break;
  46.     case DIRECTION_RIGHT:
  47.       ctx.arc(centerX, centerY, objectRadius, 0.25 * Math.PI, -0.25 * Math.PI, false);
  48.       break;
  49.     case DIRECTION_UP:
  50.       ctx.arc(centerX, centerY, objectRadius, -0.25 * Math.PI, 1.25 * Math.PI, false);
  51.       break;
  52.     case DIRECTION_DOWN:
  53.       ctx.arc(centerX, centerY, objectRadius, 0.75 * Math.PI, 0.25 * Math.PI, false);
  54.       break;
  55.   }
  56.   ctx.lineTo(centerX, centerY);
  57.   ctx.fill();
  58.   for (i = 1; i < snakeData.length; i++) {
  59.    ctx.beginPath();
  60.    centerX = snakeData[i].x * OBJECT_WIDTH + OBJECT_WIDTH / 2;
  61.    centerY = snakeData[i].y * OBJECT_HEIGHT + OBJECT_HEIGHT / 2;  
  62.    ctx.arc(centerX, centerY, objectRadius, 0, 2 * Math.PI, false);
  63.     ctx.fill();
  64.  }
  65. }
  66.  
  67. function drawFood() {
  68.  var centerX = foodData.x * OBJECT_WIDTH + OBJECT_WIDTH / 2;
  69.  var centerY = foodData.y * OBJECT_HEIGHT + OBJECT_HEIGHT / 2;
  70.  ctx.fillStyle = COLOR_FOOD;
  71.  ctx.beginPath();
  72.  ctx.arc(centerX, centerY, objectRadius, 0, 2 * Math.PI, false);
  73.  ctx.fill();
  74. }
  75.  
  76. function updateScoreElement() {
  77.  if (scoreElement != null) {
  78.    scoreElement.innerHTML = score;
  79.  }
  80. }
  81.  
  82. function getRandomDirection() {
  83.  return Math.floor(Math.random() * 4) + 1;
  84. }
  85.  
  86. function getRandomFood() {
  87.  var x, y;
  88.  var empty = false;
  89.  while (!empty) {
  90.    x = Math.floor(Math.random() * (fieldWidth - 1));
  91.    y = Math.floor(Math.random() * (fieldHeight - 1));
  92.    empty = true;
  93.    for (i in snakeData) {
  94.      if (snakeData[i][0] == x && snakeData[i][1] == y) {
  95.        empty = false;
  96.      }
  97.    }
  98.  }
  99.  return {"x": x, "y": y};
  100. }
  101.  
  102. function getNewSnake(headX, headY) {
  103.  var tailX, tailY;
  104.  switch (snakeDirection) {
  105.    case DIRECTION_LEFT:
  106.      tailX = headX + 1;
  107.      tailY = headY;
  108.      break;
  109.    case DIRECTION_RIGHT:
  110.      tailX = headX - 1;
  111.      tailY = headY;
  112.      break;
  113.    case DIRECTION_UP:
  114.      tailX = headX;
  115.      tailY = headY + 1;
  116.      break;
  117.    case DIRECTION_DOWN:
  118.      tailX = headX;
  119.      tailY = headY - 1;
  120.      break;
  121.  }
  122.  return [{"x": headX, "y": headY}, {"x": tailX, "y": tailY}];
  123. }
  124.  
  125. function moveSnake() {
  126.  var i;
  127.  switch (snakeDirection) {
  128.    case DIRECTION_LEFT:
  129.      if (snakeData[0].x > 0) {
  130.         for (i = snakeData.length - 1; i >= 1; i--) {
  131.           snakeData[i].x = snakeData[i - 1].x;
  132.           snakeData[i].y = snakeData[i - 1].y;
  133.         }
  134.         snakeData[0].x--;
  135.       } else {
  136.         return false;
  137.       }
  138.       break;
  139.     case DIRECTION_RIGHT:
  140.       if (snakeData[0].x < fieldWidth - 1) {
  141.        for (i = snakeData.length - 1; i >= 1; i--) {
  142.           snakeData[i].x = snakeData[i - 1].x;
  143.           snakeData[i].y = snakeData[i - 1].y;
  144.         }
  145.         snakeData[0].x++;
  146.       } else {
  147.         return false;
  148.       }
  149.       break;
  150.     case DIRECTION_UP:
  151.       if (snakeData[0].y > 0) {
  152.         for (i = snakeData.length - 1; i >= 1; i--) {
  153.           snakeData[i].x = snakeData[i - 1].x;
  154.           snakeData[i].y = snakeData[i - 1].y;
  155.         }
  156.         snakeData[0].y--;
  157.       } else {
  158.         return false;
  159.       }
  160.       break;
  161.     case DIRECTION_DOWN:
  162.       if (snakeData[0].y < fieldHeight - 1) {
  163.        for (i = snakeData.length - 1; i >= 1; i--) {
  164.           snakeData[i].x = snakeData[i - 1].x;
  165.           snakeData[i].y = snakeData[i - 1].y;
  166.         }
  167.         snakeData[0].y++;
  168.       } else {
  169.         return false;
  170.       }
  171.       break;
  172.   }
  173.   return true;
  174. }
  175.  
  176. function hasBite() {
  177.   var flag = false;
  178.   var i = 1;
  179.   while (i < snakeData.length && !flag) {
  180.    if (snakeData[i].x == snakeData[0].x &&
  181.      snakeData[i].y == snakeData[0].y) {
  182.      flag = true;
  183.    } else {
  184.      i++;
  185.    }
  186.  }
  187.  return flag;
  188. }
  189.  
  190. function eatFood(lastX, lastY) {
  191.  if (snakeData[0].x == foodData.x && snakeData[0].y == foodData.y) {
  192.    snakeData.push({'x': lastX, 'y': lastY});
  193.    score++;
  194.    updateScoreElement();
  195.    foodData = getRandomFood();
  196.  }
  197. }
  198.  
  199. function gameKeyDown(e) {
  200.  if (gameTimer == null)
  201.    return;
  202.  if (e.keyCode == VK_ESCAPE) {
  203.    clearInterval(gameTimer);
  204.    gameTimer = null;
  205.  } else if (e.keyCode == VK_LEFT) {
  206.    if (snakeDirection != DIRECTION_RIGHT) {
  207.      snakeDirection = DIRECTION_LEFT;
  208.    }
  209.  } else if (e.keyCode == VK_RIGHT) {
  210.    if (snakeDirection != DIRECTION_LEFT) {
  211.      snakeDirection = DIRECTION_RIGHT;
  212.    }
  213.  } else if (e.keyCode == VK_UP) {
  214.    if (snakeDirection != DIRECTION_DOWN) {
  215.      snakeDirection = DIRECTION_UP;
  216.    }
  217.  } else if (e.keyCode == VK_DOWN) {
  218.    if (snakeDirection != DIRECTION_UP) {
  219.      snakeDirection = DIRECTION_DOWN;
  220.    }
  221.  }
  222. }
  223.  
  224. function endGame() {
  225.  clearInterval(gameTimer);
  226.  gameTimer = null;
  227. }
  228.  
  229. function updateGame() {
  230.  var lastX = snakeData[snakeData.length - 1].x;
  231.  var lastY = snakeData[snakeData.length - 1].y;
  232.  var flag = moveSnake();
  233.  if (flag) {
  234.    flag = !hasBite();
  235.  }
  236.  if (flag) {
  237.    eatFood(lastX, lastY);
  238.  } else {
  239.    endGame();
  240.  }
  241.  drawField();
  242.  drawSnake();
  243.  drawFood();
  244. }
  245.  
  246. function startGame() {
  247.  score = 0;
  248.  updateScoreElement();
  249.  fieldWidth = canvasWidth / OBJECT_WIDTH;
  250.  fieldHeight = canvasHeight / OBJECT_HEIGHT;
  251.  if (OBJECT_WIDTH <= OBJECT_HEIGHT)
  252.    objectRadius = OBJECT_WIDTH / 2;
  253.  else
  254.    objectRadius = OBJECT_HEIGHT / 2;
  255.  snakeDirection = getRandomDirection();
  256.  snakeData = getNewSnake(fieldWidth / 2, fieldHeight / 2);
  257.  foodData = getRandomFood();
  258.  gameTimer = setInterval(updateGame, GAME_SPEED);
  259. }
  260.  
  261. function init() {
  262.  var score = document.getElementById("gameScore");
  263.  if (score != null) {
  264.    scoreElement = score;
  265.  }
  266.  var canvas = document.getElementById("gameCanvas");
  267.  if (canvas != null) {
  268.    canvasWidth = canvas.width;
  269.    canvasHeight = canvas.height;
  270.    ctx = canvas.getContext("2d");
  271.    if (ctx != null) {
  272.       document.body.onkeydown = gameKeyDown;
  273.      startGame();
  274.    } else {
  275.      alert("Cannot get 2D context for canvas.");
  276.    }
  277.  } else {
  278.    alert("Game canvas element not found.");
  279.  }
  280. }
  281. </script>
  282. </head>
  283. <body onload="init()">
  284. <div><p>SCORE: <span id="gameScore">0</span></p></div>
  285. <div>
  286. <canvas id="gameCanvas" width = "400" height="400">This game requires HTML5 support.</canvas>
  287. </div>
  288. </body>
  289. </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!