js用代码实现一个高级难度的贪吃蛇游戏
时间: 2024-03-01 15:55:25 浏览: 28
好的,以下是一个使用原生JavaScript实现的高级难度贪吃蛇游戏:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script src="snake.js"></script>
</body>
</html>
```
JavaScript代码:
```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 定义蛇的初始位置和大小
var snakeSize = 20;
var snakeX = 0;
var snakeY = 0;
var snakeBody = [
{x: snakeX, y: snakeY},
{x: snakeX + snakeSize, y: snakeY},
{x: snakeX + snakeSize * 2, y: snakeY},
{x: snakeX + snakeSize * 3, y: snakeY},
{x: snakeX + snakeSize * 4, y: snakeY}
];
// 定义食物的初始位置和大小
var foodSize = 20;
var foodX = Math.floor(Math.random() * (canvas.width - foodSize));
var foodY = Math.floor(Math.random() * (canvas.height - foodSize));
// 定义蛇的移动速度和方向
var speed = 100;
var direction = "right";
// 定义游戏是否结束和分数
var gameOver = false;
var score = 0;
// 监听键盘事件
document.addEventListener("keydown", function(event) {
if (event.keyCode == 37 && direction != "right") { // left arrow
direction = "left";
} else if (event.keyCode == 38 && direction != "down") { // up arrow
direction = "up";
} else if (event.keyCode == 39 && direction != "left") { // right arrow
direction = "right";
} else if (event.keyCode == 40 && direction != "up") { // down arrow
direction = "down";
}
});
// 游戏循环
function gameLoop() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制食物
ctx.fillStyle = "red";
ctx.fillRect(foodX, foodY, foodSize, foodSize);
// 绘制蛇
for (var i = 0; i < snakeBody.length; i++) {
ctx.fillStyle = "green";
ctx.fillRect(snakeBody[i].x, snakeBody[i].y, snakeSize, snakeSize);
}
// 移动蛇
var headX = snakeBody[snakeBody.length - 1].x;
var headY = snakeBody[snakeBody.length - 1].y;
if (direction == "left") {
headX -= snakeSize;
} else if (direction == "up") {
headY -= snakeSize;
} else if (direction == "right") {
headX += snakeSize;
} else if (direction == "down") {
headY += snakeSize;
}
// 检查蛇是否碰到边界
if (headX >= canvas.width || headX < 0 || headY >= canvas.height || headY < 0) {
gameOver = true;
}
// 检查蛇是否碰到自己的身体
for (var i = 0; i < snakeBody.length - 1; i++) {
if (headX == snakeBody[i].x && headY == snakeBody[i].y) {
gameOver = true;
}
}
// 检查蛇是否吃到了食物
if (headX == foodX && headY == foodY) {
score++;
foodX = Math.floor(Math.random() * (canvas.width - foodSize));
foodY = Math.floor(Math.random() * (canvas.height - foodSize));
} else {
snakeBody.shift();
}
// 更新蛇的身体
snakeBody.push({x: headX, y: headY});
// 更新游戏分数
document.getElementById("score").innerHTML = "分数:" + score;
// 如果游戏结束,停止循环
if (gameOver) {
clearInterval(interval);
alert("游戏结束,你的得分是:" + score);
}
}
// 启动游戏循环
var interval = setInterval(gameLoop, speed);
```
这个游戏具有以下特点:
1. 使用Canvas绘制游戏画面
2. 蛇和食物都可以在任意位置生成
3. 可以通过键盘控制蛇的移动方向
4. 蛇碰到边界或自己的身体会导致游戏结束
5. 每吃到一个食物得分加一,并且生成新的食物
6. 游戏结束后会显示得分并停止循环