想起不来之前在哪里看到过这个贪吃蛇代码，这里做一下笔记。
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>document</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
background-color: black;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas width = '400' height='400'></canvas>
<script>
var pen = document.querySelector('canvas').getContext('2d')
//在canvas上获取2d画笔
var snake = [42, 41];
//蛇的坐标，42 % 20 = 2 ~~（42 / 20） = 2 （2，2）
// 41 % 20 = 1 ~~（41 / 20） = 2（1，2）
var food = 43;
var fx = 1;
var n;
function draw(num, c){
pen.fillStyle = c; // 画画颜色
pen.fillRect(num % 20 * 20 + 1, ~~(num / 20) * 20 + 1, 18, 18);
//填充的正方形
}
document.onkeydown = function (e) {
fx = snake[0] - snake[1] == (n = [-1, -20, 1, 20][(event || e).keyCode - 37] || fx) ? fx : n;
}
// 新的蛇头 - 旧的蛇头 = -1，表示向左，= -20，表示向上， 1 表示向右，= 20 表示向下。
!function (){
//console.log(1)
snake.unshift(n = snake[0] + fx); // 给蛇添加蛇头
draw(n, 'green')
if(n < 0 || n > 400 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
// 如果添加的蛇头 < 0 或者 > 400，或者当方向向右，新的蛇头是第一列的值，，或者当方向向左，新的蛇头是最后一列的值。
return alert('Game over'); // 以上选项表示超出界限。
if(n == food){ // 如果新添加的蛇头值 == food值，就不断随机0到400的值，直到随机出的值不在snake数组内，跳出循环，给获得n对应的坐标填充黄色。
while(snake.indexOf(n = ~~(Math.random() * 400)) >= 0);
//console.log(n)
food = n
draw(n, 'yellow');
}else
draw(snake.pop(), 'black');
console.log(snake)
// 把pop出的蛇尾巴变成黑色，与背景融为一体。
setTimeout(arguments.callee,180) //表示延时器，每个180s执行该函数
}()
</script>
</body>
</html>
2506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
