Artikelverzeichnis
Ideen
400px * 400px Karte, jede 20px * 20px ist in Zellen unterteilt, um den Körper der Schlange zu zeichnen.
Ändern Sie die Farbe des Schwanzes und des Kopfes bei jeder Bewegung
Alle Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
</head>
<body>
<canvas width="400" height="400" style="background-color: #362E3D;">给我换chromium</canvas>
<script>
const map = document.getElementsByTagName('canvas')[0].getContext('2d'); // 数组存蛇身位置 一行 1-20 二行21-40 总共20*20
var snake = [23, 22, 21]; // 数组头部蛇头 后部蛇尾
var direction = 1; // 1右 -1左 -20上 20下
var flag = 1; // 解决快速键盘bug
var food = 50; // 食物位置
function draw(x, color) {
map.fillStyle = color;
//用1-400标识没找到通用像素换算公式 最后一列分开计算
if (x % 20 == 0) {
// 最后一列
map.fillRect(380 + 2, Math.floor(x / 21) * 20 + 2, 18, 18); // 使1-400的块标志对应像素点
} else {
// 其余列
map.fillRect((x % 20 - 1) * 20 + 2, Math.floor(x / 20) * 20 + 2, 18, 18);
}
flag = 1; // draw()完后才能改变direction
}
let len = snake.length;
for (let i = 0; i < len; i++)
draw(snake[i], "#FDE5C5");
(function () {
let head = snake[0] + direction;
if (head % 20 == 1 && direction == 1 || head % 20 == 0 && direction == -1 || head < 1 || head > 400 ||
snake.includes(head))
return alert('GG');
snake.unshift(head);
draw(head, "#FDE5C5");
if (head == food) {
while (snake.includes(food = Math.floor(Math.random() * 400 + 1)));
// arr.includes 有的话返回true 否则false
} else {
//正常移动 没吃到才改变尾部颜色
draw(snake.pop(), "#362E3D");
}
draw(food, "#EB1A4B");
setTimeout(arguments.callee, 100); // arguments.callee 代表函数名 调用匿名函数自己
})();
document.onkeydown = function (event) {
event = event || window.event; // ie中是windo.event
if (flag) {
// draw执行后(蛇移动后)才可以改变direction
switch (event.keyCode) {
case 37:
direction != 1 ? direction = -1 : 0;
break;
case 38:
direction != 20 ? direction = -20 : 0;
break;
case 39:
direction != -1 ? direction = 1 : 0;
break;
case 40:
direction != -20 ? direction = 20 : 0;
break;
}
}
flag = 0; // 等待下一次draw执行
}
</script>
</body>
</html>
Beheben Sie den Fehler bei der schnellen Tastatur
Die Pfeiltasten ändern tatsächlich den Richtungswert. Wenn der Richtungswert vor der nächsten Bewegung der Schlange kontinuierlich geändert wird, kann dies dazu führen, dass sich der Fehler in umgekehrter Richtung frisst. Fügen Sie
daher ein Flag hinzu. Weitere Informationen finden Sie im Quellcode