生成贪吃蛇代码 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
/* 我们将样式也写在这里 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// 这里是我们的游戏代码
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 游戏的一些变量
let snake = [{x: 50, y: 50}];
let direction = 'RIGHT';
let food = {x: 100, y: 100};
const box = 10;
function drawSnake(){
ctx.fillStyle = 'green';
snake.forEach(part => {
ctx.fillRect(part.x, part.y, box, box);
});
}
function drawFood(){
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
}
function moveSnake(){
let head = {...snake[0]};
if(direction == 'UP') head.y -= box;
if(direction == 'DOWN') head.y += box;
if(direction == 'LEFT') head.x -= box;
if(direction == 'RIGHT') head.x += box;
// 将新头添加到蛇前面
snake.unshift(head);
// 如果吃到食物，就生成新的食物
if(head.x == food.x && head.y == food.y){
food = {
x: Math.floor(Math.random() * (canvas.width / box)) * box,
y: Math.floor(Math.random() * (canvas.height / box)) * box
};
} else {
// 没有吃到食物就移除蛇的最后一节
snake.pop();
}
}
function gameLoop(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
moveSnake();
setTimeout(gameLoop, 100);
}
// 监听键盘事件，改变蛇的方向
document.addEventListener('keydown', event => {
if(event.keyCode == 37 && direction != 'RIGHT') direction = 'LEFT';
if(event.keyCode == 38 && direction != 'DOWN') direction = 'UP';
if(event.keyCode == 39 && direction != 'LEFT') direction = 'RIGHT';
if(event.keyCode == 40 && direction != 'UP') direction = 'DOWN';
});
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码