HTML5 Canvas 中的贪吃蛇
最后修改于 2023 年 7 月 17 日
在本篇 HTML5 Canvas 教程中，我们创建了一个贪吃蛇游戏的克隆。
贪吃蛇
贪吃蛇 是一款经典的早期电子游戏。它最早诞生于 70 年代末。后来被移植到了个人电脑上。在这款游戏中，玩家控制一条蛇。目标是尽可能多地吃苹果。每次蛇吃到苹果，它的身体就会变长。蛇必须避开墙壁和自己的身体。这款游戏有时也被称为 Nibbles。
开发
蛇的每个关节的大小是 10 像素。蛇通过方向键控制。初始时，蛇有三个关节。如果游戏结束，会在 Canvas 中间显示“Game Over”消息。
<!DOCTYPE html>
<html>
<head>
<title>Snake in HTML5 canvas</title>
<style>
canvas {background: black}
</style>
<script>
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;
}
};
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>
首先，我们定义游戏中使用的常量。
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 常量定义了 Canvas 上可能出现点的最大数量（900 = 300*300/10*10）。MAX_RAND 常量用于计算苹果的随机位置。DELAY 常量决定了游戏的运行速度。C_HEIGHT 和 C_WIDTH 常量存储了 Canvas 的尺寸。
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 函数获取 Canvas 对象及其上下文的引用。然后调用 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 方法，该方法会随机放置一个新的苹果对象。
在 move 方法中，我们实现了游戏的核心算法。为了理解它，请观察蛇的移动方式。我们控制蛇的头部。可以通过方向键改变其方向。其余的关节会沿链条向前移动一个位置。第二个关节移动到第一个关节所在的位置，第三个关节移动到第二个关节所在的位置，依此类推。
for (var z = dots; z > 0; z--) {
x[z] = x[(z - 1)];
y[z] = y[(z - 1)];
}
此代码沿链移动关节。
if (leftDirection) {
x[0] -= DOT_SIZE;
}
此行将头部向左移动。
在 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;
}
如果蛇撞到了 Canvas 的底部，游戏就结束了。
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 会随机选择苹果对象的 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 函数中用于更改蛇对象的坐标。同时请注意，当蛇正向右移动时，我们不能立即向左转。
这就是 HTML5 Canvas 中的贪吃蛇游戏。