发布时间：2022-03-26 18:32:46
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5实现贪吃蛇小游戏</title>
<style>
#myCanvas {
box-shadow: 0 0 6px #000;
background: #000;
}
</style>
</head>
<body style="margin: auto; padding: 0; text-align: center;">
<br/><br/><br/>
<input type="button" value="开始游戏" onclick="beginGame();"><br/><br/><br/>
<!--定义游戏画面大小，格子数量等于长(宽)/格子长(宽)-->
<canvas id="myCanvas" width="480" height="240"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var w = 15; //格子长宽，方格，长宽相等
var snaLen = 6; //初始蛇身长度
var snake = []; //身体长度
for (var i = 0; i < snaLen; i++) {
snake[i] = new cell(i, 0, 39);
}
var head = snake[snaLen - 1]; //头部
//初始食物，以及实物可能出现的位置，*后面的数字设置为长（宽）-2；下面106行还需要修改一次
var foodx = Math.ceil(Math.random() * 30 + 1);
var foody = Math.ceil(Math.random() * 14 + 1);
var food = new Food(foodx, foody);
//食物
function Food(x, y) {
this.x = x;
this.y = y;
return this;
}
//身体
function cell(x, y, d) {
this.x = x;
this.y = y;
this.d = d;
return this;
}
//动作，蛇可以活动的区域，长宽坐标设置为和画布一致；
function draw() {
ctx.clearRect(0, 0, 480, 240);
//画布网格设置
for(var i = 0; i < 32; i++){ //横向格子数量
ctx.strokeStyle = "#AAA";//线条颜色
ctx.lineWidth=0.5;//线条粗细
ctx.beginPath();
ctx.moveTo(0,i*w);
ctx.lineTo(480,i*w); //宽度
ctx.moveTo(i*w,0);
ctx.lineTo(i*w,240); //高度
ctx.closePath();
ctx.stroke();
}
//画蛇身
for (var j = 0; j < snake.length; j++) {
ctx.fillStyle = "green";//蛇身颜色
if (j == snake.length - 1) {
ctx.fillStyle = "red";//蛇头颜色
}
ctx.beginPath();
ctx.rect(snake[j].x * w, snake[j].y * w, w, w);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//出现食物
drawFood();
//吃到食物
if (head.x == food.x && head.y == food.y) {
initFood();
food = new Food(foodx, foody);
//重新出现食物
drawFood();
//增加蛇的长度 有些小瑕疵，蛇身增长时应该是身体增长，而不是在蛇头上增长
var newCell = new cell(head.x, head.y, head.d);
switch (head.d) {
case 40:
newCell.y++;
break; //下
case 39:
newCell.x++;
break; //右
case 38:
newCell.y--;
break; //上
case 37:
newCell.x--;
break; //左
}
snake[snake.length] = newCell;
head = newCell;
//head =
}
}
//随机初始化食物，同29行修改
function initFood() {
foodx = Math.ceil(Math.random() * 30 + 1);
foody = Math.ceil(Math.random() * 14 + 1);
for (var i = 0; i < snake.length; i++) {
if (snake[i].x == foodx && snake[i].y == foody) {
initFood();
}
}
}
//画食物
function drawFood() {
//绘制食物
ctx.fillStyle = "orange";//食物颜色
ctx.beginPath();
ctx.rect(food.x * w, food.y * w, w, w);
ctx.closePath();
ctx.fill();
}
draw();
//监听键盘事件
document.onkeydown = function(e) {
//下40 ， 右边39，左边37，上38 键盘事件
var keyCode = e.keyCode;
if (head.d - keyCode != 2 && head.d - keyCode != -2 && keyCode >= 37 && keyCode <= 40) {
moveSnake(keyCode);
}
}
//控制蛇移动方向
function moveSnake(keyCode) {
var newSnake = [];
var newCell = new cell(head.x, head.y, head.d); //头
//身体
for (var i = 1; i < snake.length; i++) {
newSnake[i - 1] = snake[i];
}
newSnake[snake.length - 1] = newCell;
newCell.d = keyCode;
switch (keyCode) {
case 40:
newCell.y++;
break; //下
case 39:
newCell.x++;
break; //右
case 38:
newCell.y--;
break; //上
case 37:
newCell.x--;
break; //左
}
snake = newSnake;
head = snake[snake.length - 1];
checkDeath();
draw();
}
//游戏规则
function checkDeath() {
//超出边框：x=画布宽/格子宽，y=画布高/格子高
if (head.x >= 32 || head.y >= 16 || head.x < 0 || head.y < 0) {
alert("Game over!");
window.location.reload();
}
//咬到自己
for (var i = 0; i < snake.length - 1; i++) {
if (head.x == snake[i].x && head.y == snake[i].y) {
alert("Game over!");
window.location.reload();
}
}
}
//蛇自动走
function moveClock() {
moveSnake(head.d);
}
var isMove = false;
function beginGame() {
!isMove && setInterval(moveClock, 300);//蛇移动速度，默认300
isMove = true;
}
</script>
</body>
</html>
演示：