js编写一个贪吃蛇游戏
时间: 2024-05-15 20:12:45 浏览: 8
好的,以下是一个简单的贪吃蛇游戏的实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const blockSize = 10;
const width = canvas.width / blockSize;
const height = canvas.height / blockSize;
let snake = {
body: [
{ x: 5, y: 5 },
{ x: 4, y: 5 },
],
direction: "right",
};
let food = {
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
};
let isGameOver = false;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
moveSnake();
checkCollision();
checkFood();
if (!isGameOver) {
setTimeout(draw, 100);
}
}
function drawSnake() {
ctx.fillStyle = "green";
snake.body.forEach((block) => {
ctx.fillRect(block.x * blockSize, block.y * blockSize, blockSize, blockSize);
});
}
function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);
}
function moveSnake() {
let newX = snake.body[0].x;
let newY = snake.body[0].y;
if (snake.direction === "right") {
newX++;
} else if (snake.direction === "left") {
newX--;
} else if (snake.direction === "up") {
newY--;
} else if (snake.direction === "down") {
newY++;
}
let newHead = { x: newX, y: newY };
snake.body.unshift(newHead);
snake.body.pop();
}
function checkCollision() {
let head = snake.body[0];
if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {
isGameOver = true;
alert("Game Over");
}
for (let i = 1; i < snake.body.length; i++) {
if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
isGameOver = true;
alert("Game Over");
}
}
}
function checkFood() {
let head = snake.body[0];
if (head.x === food.x && head.y === food.y) {
snake.body.push({ x: 0, y: 0 });
food.x = Math.floor(Math.random() * width);
food.y = Math.floor(Math.random() * height);
}
}
document.addEventListener("keydown", (e) => {
if (e.keyCode === 37 && snake.direction !== "right") {
snake.direction = "left";
} else if (e.keyCode === 38 && snake.direction !== "down") {
snake.direction = "up";
} else if (e.keyCode === 39 && snake.direction !== "left") {
snake.direction = "right";
} else if (e.keyCode === 40 && snake.direction !== "up") {
snake.direction = "down";
}
});
draw();
</script>
</body>
</html>
```
这个游戏使用 HTML5 Canvas 来实现,每次执行 `draw()` 函数来更新游戏界面。其中,`snake` 对象表示蛇的状态,包括身体坐标和移动方向;`food` 对象表示食物的坐标;`isGameOver` 表示游戏是否结束。`drawSnake()` 和 `drawFood()` 分别用来绘制蛇和食物,`moveSnake()` 用来更新蛇的位置,`checkCollision()` 用来检测碰撞,`checkFood()` 用来检测是否吃到食物。最后,通过监听键盘事件来改变蛇的移动方向。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)