Directorio de artículos
Ideas
Mapa de 400px * 400px, cada 20px * 20px se divide en celdas para dibujar el cuerpo de la serpiente.
Cambia el color de la cola y la cabeza cada vez que te muevas
Todos los códigos
<!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>
Resuelve el error continuo del teclado rápido
Las teclas de flecha realmente cambian el valor de la dirección. Si el valor de la dirección se cambia continuamente antes del siguiente movimiento de la serpiente, puede causar el error de comerse a sí mismo en la dirección inversa,
así que agregue una bandera. Consulte el código fuente para obtener más detalles.