20行js代码实现的贪吃蛇大战？
谁可以给我注释一下，求大神，解释这里的fx，n，dz变量代表什么，什么意思？？求大神<body><canvasid="can"width="400"height="400...
谁可以给我注释一下，求大神，解释这里的fx，n，dz变量代表什么，什么意思？？求大神
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body> 展开
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body> 展开
3个回答
展开全部
稍等，我先留个坑，一会儿上电脑看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>贪吃蛇重构</title><style>
body {display: flex;height: 100vh;margin: 0;padding: 0;justify-content: center;align-items: center;}</style>
</head>
<body>
<canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
<script>var snake = [41, 40], //snake队列表示蛇身，初始节点存在但不显示direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 43, //食物的位置
n, //与下次移动的位置有关box = document.getElementById('can').getContext('2d');//从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);//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。}
document.onkeydown = function(evt) {//当键盘上下左右键摁下的时候改变directiondirection = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;};
!function() {snake.unshift(n = snake[0] + direction);//此时的n为下次蛇头出现的位置，n进入队列 if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序return alert("GAME OVER!");}draw(n, "lime"); //画出蛇头下次出现的位置if(n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾while (snake.indexOf(food = ~~(Math.random() * 400)) >= 0);draw(food, "yellow");} else { //没有吃到食物时正常移动，蛇尾出队列draw(snake.pop(),"black");}setTimeout(arguments.callee, 150);//每隔0.15秒执行函数一次，可以调节蛇的速度
}();
</script>
</body>
</html>
这不是我写的，是我看见的那个网址里面写的详细的。这个提交是电脑端，我发现一提交就自动压缩，乱了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>贪吃蛇重构</title><style>
body {display: flex;height: 100vh;margin: 0;padding: 0;justify-content: center;align-items: center;}</style>
</head>
<body>
<canvas id="can" width="400" height="400" style="background-color: black">对不起，您的浏览器不支持canvas</canvas>
<script>var snake = [41, 40], //snake队列表示蛇身，初始节点存在但不显示direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 43, //食物的位置
n, //与下次移动的位置有关box = document.getElementById('can').getContext('2d');//从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);//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。}
document.onkeydown = function(evt) {//当键盘上下左右键摁下的时候改变directiondirection = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;};
!function() {snake.unshift(n = snake[0] + direction);//此时的n为下次蛇头出现的位置，n进入队列 if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序return alert("GAME OVER!");}draw(n, "lime"); //画出蛇头下次出现的位置if(n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾while (snake.indexOf(food = ~~(Math.random() * 400)) >= 0);draw(food, "yellow");} else { //没有吃到食物时正常移动，蛇尾出队列draw(snake.pop(),"black");}setTimeout(arguments.callee, 150);//每隔0.15秒执行函数一次，可以调节蛇的速度
}();
</script>
</body>
</html>
这不是我写的，是我看见的那个网址里面写的详细的。这个提交是电脑端，我发现一提交就自动压缩，乱了。
更多追问追答
追答
回答你问题的另一个给了一个网址，那个我表示确实详细。那个网页链接里面另一个链接更详细。我解了一半，自己把自己绕住了。你看看那个网页里的就能明白了。
我在电脑端copy过来了。你可以看看。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
