JavaScript 贪吃蛇教程展示了如何使用 JavaScript 创建贪吃蛇游戏。图片和来源可在作者的 GithubJavaScript-Snake-Game 存储库中找到。
贪吃蛇游戏
贪吃蛇 是一款较早的经典视频游戏,最初创建于 70 年代后期。后来它被带到个人电脑上。在这个游戏中,玩家控制一条蛇。目标是吃尽可能多的苹果。蛇每吃一个苹果,它的身体就会变大。蛇必须避开墙壁和它自己的身体。此游戏有时称为 Nibbles。
HTML5 画布
HTML5 canvas 元素提供了一个与分辨率相关的位图区域,可用于动态渲染图形、游戏图形、艺术或其他视觉图像。简单来说,canvas 是 HTML5 中的一个新元素,它允许您使用 JavaScript 绘制图形。 Canvas 无需 Flash、Silverlight 或 Java 等插件即可为网页带来动画效果。
JavaScript Snake 代码示例
蛇的每个关节的大小为 10 像素。蛇是用光标键控制的。最初,蛇有三个关节。如果游戏结束,画布中间会显示“游戏结束”消息。
<!DOCTYPE html> <html> <head> <title>JavaScript Snake game</title> <style> canvas {background: black} </style> <script src="snake.js"></script> </head> <body onload="init();"> <canvas id="myCanvas" width="300" height="300"> </canvas> </body> </html>
这是 HTML 源代码。我们将 JavaScript 源放在snake.js
文件中。
<canvas id="myCanvas" width="300" height="300"> </canvas>
我们创建一个画布对象。这是我们游戏的渲染区域。
// JavaScript Snake example // Author Jan Bodnar // http://zetcode.com/javascript/snake/ var canvas; var ctx; var head; var apple; var ball; var dots; var apple_x; var apple_y; var leftDirection = false; var rightDirection = true; var upDirection = false; var downDirection = false; var inGame = true; const DOT_SIZE = 10; const ALL_DOTS = 900; const MAX_RAND = 29; const DELAY = 140; const C_HEIGHT = 300; const C_WIDTH = 300; const LEFT_KEY = 37; const RIGHT_KEY = 39; const UP_KEY = 38; const DOWN_KEY = 40; var x = new Array(ALL_DOTS); var y = new Array(ALL_DOTS); function init() { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); loadImages(); createSnake(); locateApple(); setTimeout("gameCycle()", DELAY); } function loadImages() { head = new Image(); head.src = 'head.png'; ball = new Image(); ball.src = 'dot.png'; apple = new Image(); apple.src = 'apple.png'; } function createSnake() { dots = 3; for (var z = 0; z < dots; z++) { x[z] = 50 - z * 10; y[z] = 50; } } function checkApple() { if ((x[0] == apple_x) && (y[0] == apple_y)) { dots++; locateApple(); } } function doDrawing() { ctx.clearRect(0, 0, C_WIDTH, C_HEIGHT); if (inGame) { ctx.drawImage(apple, apple_x, apple_y); for (var z = 0; z < dots; z++) { if (z == 0) { ctx.drawImage(head, x[z], y[z]); } else { ctx.drawImage(ball, x[z], y[z]); } } } else { gameOver(); } } function gameOver() { ctx.fillStyle = 'white'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.font = 'normal bold 18px serif'; ctx.fillText('Game over', C_WIDTH/2, C_HEIGHT/2); } function checkApple() { if ((x[0] == apple_x) && (y[0] == apple_y)) { dots++; locateApple(); } } function move() { for (var z = dots; z > 0; z--) { x[z] = x[(z - 1)]; y[z] = y[(z - 1)]; } if (leftDirection) { x[0] -= DOT_SIZE; } if (rightDirection) { x[0] += DOT_SIZE; } if (upDirection) { y[0] -= DOT_SIZE; } if (downDirection) { y[0] += DOT_SIZE; } } function checkCollision() { for (var z = dots; z > 0; z--) { if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) { inGame = false; } } if (y[0] >= C_HEIGHT) { inGame = false; } if (y[0] < 0) { inGame = false; } if (x[0] >= C_WIDTH) { inGame = false; } if (x[0] < 0) { inGame = false; } } function locateApple() { var r = Math.floor(Math.random() * MAX_RAND); apple_x = r * DOT_SIZE; r = Math.floor(Math.random() * MAX_RAND); apple_y = r * DOT_SIZE; } function gameCycle() { if (inGame) { checkApple(); checkCollision(); move(); doDrawing(); setTimeout("gameCycle()", DELAY); } } onkeydown = function(e) { var key = e.keyCode; if ((key == LEFT_KEY) && (!rightDirection)) { leftDirection = true; upDirection = false; downDirection = false; } if ((key == RIGHT_KEY) && (!leftDirection)) { rightDirection = true; upDirection = false; downDirection = false; } if ((key == UP_KEY) && (!downDirection)) { upDirection = true; rightDirection = false; leftDirection = false; } if ((key == DOWN_KEY) && (!upDirection)) { downDirection = true; rightDirection = false; leftDirection = false; } };
这是 JavaScript Snake 源代码。
const DOT_SIZE = 10; const ALL_DOTS = 900; const MAX_RAND = 29; const DELAY = 140; const C_HEIGHT = 300; const C_WIDTH = 300;
DOT_SIZE
是苹果的大小和蛇的点。ALL_DOTS
常量定义画布上可能的最大点数 (900 = 300*300/10*10)。 MAX_RAND
constant 用于计算苹果的随机位置。DELAY
constant 决定了游戏的速度。 C_HEIGHT
和C_WIDTH
常量存储画布的大小。
const LEFT_KEY = 37; const RIGHT_KEY = 39; const UP_KEY = 38; const DOWN_KEY = 40;
这些常量存储方向键的值。它们用于提高可读性。
var x = new Array(ALL_DOTS); var y = new Array(ALL_DOTS);
这两个数组存储了一条蛇所有关节的x和y坐标。
function init() { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); loadImages(); createSnake(); locateApple(); setTimeout("gameCycle()", DELAY); }
init
函数获取对画布对象及其上下文的引用。 loadImages
、createSnake
和locateApple
函数被调用以执行特定任务。 setTimeout
开始动画。
function loadImages() { head = new Image(); head.src = 'head.png'; ball = new Image(); ball.src = 'dot.png'; apple = new Image(); apple.src = 'apple.png'; }
在loadImages
函数中,我们为游戏加载了三张图片。
function createSnake() { dots = 3; for (var z = 0; z < dots; z++) { x[z] = 50 - z * 10; y[z] = 50; } }
在createSnake
函数中,我们创建了蛇对象。一开始,它有三个关节。
function checkApple() { if ((x[0] == apple_x) && (y[0] == apple_y)) { dots++; locateApple(); } }
如果头部与苹果相撞,我们会增加蛇的关节数。我们调用 locateApple
方法随机放置一个新的 apple 对象。
function move() { ...
在move
方法中我们有游戏的关键算法。为了理解它,看看蛇是如何移动的。我们控制蛇的头。我们可以用光标键改变它的方向。其余关节向上移动一个位置。第二个关节移动到第一个关节所在的位置,第三个关节移动到第二个关节所在的位置,依此类推。
for (var z = dots; z > 0; z--) { x[z] = x[(z - 1)]; y[z] = y[(z - 1)]; }
for 循环将蛇的关节向上移动。
if (leftDirection) { x[0] -= DOT_SIZE; }
这条线将头部向左移动。
function checkCollision() { ...
在checkCollision
方法中,我们判断蛇是撞到自己还是撞到其中一个边界。
for (var z = dots; z > 0; z--) { if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) { inGame = false; } }
如果蛇用头撞到了它的一个关节,游戏就结束了。
if (y[0] >= C_HEIGHT) { inGame = false; }
如果蛇碰到画布底部,游戏就结束了。
function locateApple() { var r = Math.floor(Math.random() * MAX_RAND); apple_x = r * DOT_SIZE; r = Math.floor(Math.random() * MAX_RAND); apple_y = r * DOT_SIZE; }
locateApple
随机选择 appleobject 的 x 和 y 坐标。 apple_x
和apple_y
是苹果图片左上角的坐标。
function gameCycle() { if (inGame) { checkApple(); checkCollision(); move(); doDrawing(); setTimeout("gameCycle()", DELAY); } }
gameCycle
函数形成一个游戏循环。假设游戏还没有结束,我们进行碰撞检测,进行移动和绘图。 setTimeout
函数递归调用gameCycle
函数。
if ((key == LEFT_KEY) && (!rightDirection)) { leftDirection = true; upDirection = false; downDirection = false; }
如果我们点击左光标键,我们将leftDirection
变量设置为true。该变量在move
函数中用于更改蛇对象的坐标。还要注意,当蛇向右行驶时,我们不能立即向左转。
这是 JavaScript 贪吃蛇游戏。
列出所有 JavaScript 教程。