标签：direction 20 food 位置 draw JS 贪吃蛇 snake
1. 整个简洁版的贪吃蛇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>
<body style="height: 90vh; display: flex; justify-content: center; align-items: center;">
<canvas id="gameBox" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
<script>
var snake = [41, 40], //snake队列表示蛇身，初始节点存在但不显示
direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 53, //食物的位置
n, //与下次移动的位置有关
box = document.getElementById('gameBox').getContext('2d');
//seat从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
function draw(seat, color) {//根据位置画色块
box.fillStyle = color;
box.fillRect(seat % 20 * 20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function (evt) {//监听方向
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};
(function () {
//添加新蛇头
snake.unshift(n = snake[0] + direction);
//碰撞检测
if (snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
return alert(`GAME OVER! Mark: ${snake.length - 1}`);
}
draw(n, "lime"); //画出蛇头下次出现的位置
if (n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
if (snake.length == 400) return alert("NB!!!!"); //完美成功
while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
draw(food, "yellow");
} else { //没有吃到食物时正常移动，蛇尾出队列
draw(snake.pop(), "black");
}
setTimeout(arguments.callee, 200);
//每隔0.2秒执行函数一次，可以调节蛇的速度
})(draw(food, "yellow"));
</script>
</body>
</html>
2. 解析
2.1 变量
box = document.getElementById('gameBox').getContext('2d')画布对象，用于画图
- 游戏地图是一个20X20的方格，这里将二维降为一维，以0–399标识每个方格
snake = [41, 40]存储蛇的位置节点，第0个节点是蛇头，初始有两个节点direction = 1当前移动方向，1表示向右，-1表示向左，20表示向下，-20表示向上food = 53当前食物位置n与下次移动的位置有关，主要用于检测
2.2 画图方法
//seat从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点
function draw(seat, color) {//根据位置画色块
box.fillStyle = color;
box.fillRect(seat % 20 * 20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}
- 蛇和食物都是方格，只要区分位置和颜色就行
seat表示一维的位置，需要转成二维的实际像素位置seat % 20 * 20 + 1，x轴实际像素位置
- 第一个20表示每行20个方格，
%20取余获取在当前行第几个 - 第二个20表示每个方格在x轴方向占20px，
*20获取在x轴方向的实际像素位置 +1是方格间隔1px，用于视觉区分方格
~~(seat / 20) * 20 + 1，y轴实际像素位置
~~将一个数字取反两次，可以获取数字整数部分- 第一个20表示每行20个方格，
~~(seat / 20)取整获取在当前第几行 - 第二个20表示每个方格在y轴方向占20px，
*20获取在y轴方向的实际像素位置 +1是方格间隔1px，用于视觉区分方格
18, 18，因为上下左右都有1px的间隙，所以20X20变成了18X18
2.3 监听键盘
document.onkeydown = function (evt) {//监听方向
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};
onkeydown，在页面上监听键盘按下事件(evt || event).keyCode，兼容获取按下的按键的数字代码
- 左上右下代码，
('ArrowLeft',37) ('ArrowUp',38) ('ArrowRight',39) ('ArrowDown',40)
(evt || event).keyCode - 37，将数字码37,38,39,40转为0,1,2,3[-1, -20, 1, 20][(evt || event).keyCode - 37]，将按键码转为游戏方向，如果是其他按键，则结果为undefined(n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction)，获取用户按键方向或者维持原方向，并赋值给nsnake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction)
简化：snake[1] - snake[0] == n，当前方向是否和上次方向一致direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
简化：direction = snake[1] - snake[0] == n ? direction : n，如果当前方向和上次方向不一致，则改变方向
2.4 主程序
(function () {
//添加新蛇头
snake.unshift(n = snake[0] + direction);
//碰撞检测
if (snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
return alert(`GAME OVER! Mark: ${snake.length - 1}`);
}
draw(n, "lime"); //画出蛇头下次出现的位置
if (n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾
if (snake.length == 400) return alert("NB!!!!"); //完美成功
while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
draw(food, "yellow");
} else { //没有吃到食物时正常移动，蛇尾出队列
draw(snake.pop(), "black");
}
setTimeout(arguments.callee, 200);
//每隔0.2秒执行函数一次，可以调节蛇的速度
})(draw(food, "yellow"));
2.4.1 开始执行
- 主体简化：
(function(){})()，自执行函数，定义一个无名函数并立刻执行 (function(){})(draw(food, "yellow"))，执行函数时传了一个参数，其实就是在执行函数之前执行draw(food, "yellow")画食物
2.4.2 移动并检测
snake.unshift(n = snake[0] + direction);添加下一步移动的位置为蛇头
snake.indexOf(n, 1) > 0忽略第一个，检查后面有没有与蛇头位置一样的，即检查有没有撞身体n < 0 || n > 399有没有上下越界direction == 1 && n % 20 == 0向右但下一步的位置在最左边，即向右越界direction == -1 && n % 20 == 19向左但下一步的位置在最右边，即向左越界return alert(GAME OVER! Mark: ${snake.length - 1});如果下一步非法，结束并打印蛇的长度
draw(n, "lime");画出蛇头下一步出现的位置
n == food如果蛇头位置是食物位置，即吃到食物，不用移动蛇尾，即长度加1if (snake.length == 400) return alert("NB!!!!");蛇的长度铺满地图，完美成功，结束游戏while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);查找一个空位生成食物draw(food, "yellow")画出食物
draw(snake.pop(), "black");如果蛇头位置不是食物位置，则移动蛇尾，即删除蛇尾，并将蛇尾位置画为地图颜色
2.4.3 循环执行
arguments这是函数内部的一个与当前函数有关的对象arguments.callee可以引用函数本身setTimeout(arguments.callee, 200)200毫秒后调用函数，可以当做移动速度
标签：direction,
20,
food,
位置,
draw,
JS,
贪吃蛇,
snake
From： https://blog.csdn.net/qq_36975229/article/details/141183268