原文： https://zetcode.com/gfx/html5canvas/snake/

在 HTML5 画布教程的这一部分中，我们将创建一个 Snake 游戏克隆。

Snake

贪食蛇是较旧的经典视频游戏。 它最初是在 70 年代后期创建的。 后来它被带到 PC 上。 在这个游戏中，玩家控制蛇。 目的是尽可能多地吃苹果。 蛇每次吃一个苹果，它的身体就会长大。 蛇必须避开墙壁和自己的身体。 该游戏有时称为 Nibbles 。

开发

蛇的每个关节的大小为 10 像素。 蛇由光标键控制。 最初，蛇具有三个关节。 如果游戏结束，则画布中间会显示"Game Over"消息。

snake.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Snake in HTML5 canvas</title>    
  5. <style>
  6.     canvas {background: black}
  7. </style>
  8. <script>
  9.     var canvas;
  10.     var ctx;
  12.     var head;
  13.     var apple;
  14.     var ball;
  16.     var dots;
  17.     var apple_x;
  18.     var apple_y;
  20.     var leftDirection = false;
  21.     var rightDirection = true;
  22.     var upDirection = false;
  23.     var downDirection = false;
  24.     var inGame = true;    
  26.     const DOT_SIZE = 10;
  27.     const ALL_DOTS = 900;
  28.     const MAX_RAND = 29;
  29.     const DELAY = 140;
  30.     const C_HEIGHT = 300;
  31.     const C_WIDTH = 300;    
  33.     const LEFT_KEY = 37;
  34.     const RIGHT_KEY = 39;
  35.     const UP_KEY = 38;
  36.     const DOWN_KEY = 40;
  38.     var x = new Array(ALL_DOTS);
  39.     var y = new Array(ALL_DOTS);   
  41.     function init() {
  43.         canvas = document.getElementById('myCanvas');
  44.         ctx = canvas.getContext('2d');
  46.         loadImages();
  47.         createSnake();
  48.         locateApple();
  49.         setTimeout("gameCycle()", DELAY);
  50.     }    
  52.     function loadImages() {
  54.         head = new Image();
  55.         head.src = 'head.png';    
  57.         ball = new Image();
  58.         ball.src = 'dot.png'; 
  60.         apple = new Image();
  61.         apple.src = 'apple.png'; 
  62.     }
  64.     function createSnake() {
  66.         dots = 3;
  68.         for (var z = 0; z < dots; z++) {
  69.             x[z] = 50 - z * 10;
  70.             y[z] = 50;
  71.         }
  72.     }
  74.     function checkApple() {
  76.         if ((x[0] == apple_x) && (y[0] == apple_y)) {
  78.             dots++;
  79.             locateApple();
  80.         }
  81.     }    
  83.     function doDrawing() {
  85.         ctx.clearRect(0, 0, C_WIDTH, C_HEIGHT);
  87.         if (inGame) {
  89.             ctx.drawImage(apple, apple_x, apple_y);
  91.             for (var z = 0; z < dots; z++) {
  92.                 if (z == 0) {
  93.                     ctx.drawImage(head, x[z], y[z]);
  94.                 } else {
  95.                     ctx.drawImage(ball, x[z], y[z]);
  96.                 }
  97.             }  
  98.         } else {
  100.             gameOver();
  101.         }        
  102.     }
  104.     function gameOver() {
  106.         ctx.fillStyle = 'white';
  107.         ctx.textBaseline = 'middle'; 
  108.         ctx.textAlign = 'center'; 
  109.         ctx.font = 'normal bold 18px serif';
  111.         ctx.fillText('Game over', C_WIDTH/2, C_HEIGHT/2);
  112.     }
  114.     function checkApple() {
  116.         if ((x[0] == apple_x) && (y[0] == apple_y)) {
  118.             dots++;
  119.             locateApple();
  120.         }
  121.     }
  123.     function move() {
  125.         for (var z = dots; z > 0; z--) {
  126.             x[z] = x[(z - 1)];
  127.             y[z] = y[(z - 1)];
  128.         }
  130.         if (leftDirection) {
  131.             x[0] -= DOT_SIZE;
  132.         }
  134.         if (rightDirection) {
  135.             x[0] += DOT_SIZE;
  136.         }
  138.         if (upDirection) {
  139.             y[0] -= DOT_SIZE;
  140.         }
  142.         if (downDirection) {
  143.             y[0] += DOT_SIZE;
  144.         }
  145.     }    
  147.     function checkCollision() {
  149.         for (var z = dots; z > 0; z--) {
  151.             if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
  152.                 inGame = false;
  153.             }
  154.         }
  156.         if (y[0] >= C_HEIGHT) {
  157.             inGame = false;
  158.         }
  160.         if (y[0] < 0) {
  161.             inGame = false;
  162.         }
  164.         if (x[0] >= C_WIDTH) {
  165.             inGame = false;
  166.         }
  168.         if (x[0] < 0) {
  169.             inGame = false;
  170.         }
  171.     }
  173.     function locateApple() {
  175.         var r = Math.floor(Math.random() * MAX_RAND);
  176.         apple_x = r * DOT_SIZE;
  178.         r = Math.floor(Math.random() * MAX_RAND);
  179.         apple_y = r * DOT_SIZE;
  180.     }    
  182.     function gameCycle() {
  184.         if (inGame) {
  186.             checkApple();
  187.             checkCollision();
  188.             move();
  189.             doDrawing();
  190.             setTimeout("gameCycle()", DELAY);
  191.         }
  192.     }
  194.     onkeydown = function(e) {
  196.         var key = e.keyCode;
  198.         if ((key == LEFT_KEY) && (!rightDirection)) {
  199.             leftDirection = true;
  200.             upDirection = false;
  201.             downDirection = false;
  202.         }
  204.         if ((key == RIGHT_KEY) && (!leftDirection)) {
  205.             rightDirection = true;
  206.             upDirection = false;
  207.             downDirection = false;
  208.         }
  210.         if ((key == UP_KEY) && (!downDirection)) {
  211.             upDirection = true;
  212.             rightDirection = false;
  213.             leftDirection = false;
  214.         }
  216.         if ((key == DOWN_KEY) && (!upDirection)) {
  217.             downDirection = true;
  218.             rightDirection = false;
  219.             leftDirection = false;
  220.         }        
  221.     };    
  222. </script>
  223. </head>
  225. <body onload="init();">
  226.     <canvas id="myCanvas" width="300" height="300">
  227.     </canvas>
  228. </body>
  229. </html>

首先，我们将定义游戏中使用的常量。

  1. const DOT_SIZE = 10;
  2. const ALL_DOTS = 900;
  3. const MAX_RAND = 29;
  4. const DELAY = 140;
  5. const C_HEIGHT = 300;
  6. const C_WIDTH = 300;

DOT_SIZE是苹果的大小和蛇的点。 ALL_DOTS常数定义画布上可能的最大点数（900 = 300 * 300/10 * 10）。 MAX_RAND常数用于计算苹果的随机位置。 DELAY常数确定游戏的速度。 C_HEIGHT和C_WIDTH常数存储画布的大小。

  1. const LEFT_KEY = 37;
  2. const RIGHT_KEY = 39;
  3. const UP_KEY = 38;
  4. const DOWN_KEY = 40;

这些常量存储箭头键的值。 它们用于提高可读性。

  1. var x = new Array(ALL_DOTS);
  2. var y = new Array(ALL_DOTS);

这两个数组存储蛇的所有关节的 x 和 y 坐标。

  1. function init() {
  3.     canvas = document.getElementById('myCanvas');
  4.     ctx = canvas.getContext('2d');
  6.     loadImages();
  7.     createSnake();
  8.     locateApple();
  9.     setTimeout("gameCycle()", DELAY);
  10. }

init()函数获取对画布对象及其上下文的引用。 调用loadImages()，createSnake()和locateApple()函数来执行特定任务。 setTimeout()开始动画。

  1. function loadImages() {
  3.     head = new Image();
  4.     head.src = 'head.png';    
  6.     ball = new Image();
  7.     ball.src = 'dot.png'; 
  9.     apple = new Image();
  10.     apple.src = 'apple.png'; 
  11. }

在loadImages()函数中，我们检索游戏的图像。

  1. function createSnake() {
  3.     dots = 3;
  5.     for (var z = 0; z < dots; z++) {
  6.         x[z] = 50 - z * 10;
  7.         y[z] = 50;
  8.     }
  9. }

在createSnake()函数中，我们创建蛇对象。 首先，它具有三个关节。

  1. function checkApple() {
  3.     if ((x[0] == apple_x) && (y[0] == apple_y)) {
  5.         dots++;
  6.         locateApple();
  7.     }
  8. }

如果头部与苹果相撞，我们会增加蛇的关节数。 我们称locateApple()方法为随机放置一个新的Apple对象。

在move()方法中，我们有游戏的关键算法。 要了解它，请看一下蛇是如何运动的。 我们控制蛇的头。 我们可以使用光标键更改其方向。 其余关节在链上向上移动一个位置。 第二关节移动到第一个关节的位置，第三关节移动到第二个关节的位置，依此类推。

  1. for (var z = dots; z > 0; z--) {
  2.     x[z] = x[(z - 1)];
  3.     y[z] = y[(z - 1)];
  4. }

该代码将关节向上移动。

  1. if (leftDirection) {
  2.     x[0] -= DOT_SIZE;
  3. }

这条线将头向左移动。

在checkCollision()方法中，我们确定蛇是否击中了自己或边界之一。

  1. for (var z = dots; z > 0; z--) {
  3.     if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
  4.         inGame = false;
  5.     }
  6. }

如果蛇用头撞到其关节之一，则游戏结束。

  1. if (y[0] >= C_HEIGHT) {
  2.     inGame = false;
  3. }

如果蛇撞到画布底部，则游戏结束。

  1. function locateApple() {
  3.     var r = Math.floor(Math.random() * MAX_RAND);
  4.     apple_x = r * DOT_SIZE;
  6.     r = Math.floor(Math.random() * MAX_RAND);
  7.     apple_y = r * DOT_SIZE;
  8. }

locateApple()随机选择苹果对象的 x 和 y 坐标。 apple_x和apple_y是苹果图像左上点的坐标。

  1. function gameCycle() {
  3.     if (inGame) {
  5.         checkApple();
  6.         checkCollision();
  7.         move();
  8.         doDrawing();
  9.         setTimeout("gameCycle()", DELAY);
  10.     }
  11. }

gameCycle()函数形成游戏周期。 如果游戏尚未完成，我们将执行碰撞检测，移动和绘画。 setTimeout()函数递归调用gameCycle()函数。

  1. if ((key == LEFT_KEY) && (!rightDirection)) {
  2.     leftDirection = true;
  3.     upDirection = false;
  4.     downDirection = false;
  5. }

如果单击左光标键，则将leftDirection变量设置为 true。 move()函数中使用此变量来更改蛇对象的坐标。 还要注意，当蛇向右行驶时，我们不能立即向左转。

HTML5 画布中的贪食蛇 - 图1

图：贪食蛇

这是 HTML5 画布中的贪食蛇游戏。