js代码实现贪吃蛇
时间: 2023-09-13 13:05:24 浏览: 49
好的,下面是一个简单的 JavaScript 代码实现贪吃蛇的示例:
```javascript
// 定义画布大小和格子大小
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gridSize = 10;
var canvasWidth = 400, canvasHeight = 400;
// 定义蛇的初始状态
var snake = [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}];
var direction = "right";
// 定义食物的初始位置
var food = {x: 15, y: 15};
// 绘制函数
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// 绘制蛇
ctx.fillStyle = "green";
for (var i = 0; i < snake.length; i++) {
ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
}
// 绘制食物
ctx.fillStyle = "red";
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
}
// 移动函数
function move() {
// 更新蛇头位置
var head = {x: snake[0].x, y: snake[0].y};
if (direction == "right") head.x++;
else if (direction == "left") head.x--;
else if (direction == "up") head.y--;
else if (direction == "down") head.y++;
snake.unshift(head);
// 判断是否吃到食物
if (head.x == food.x && head.y == food.y) {
food.x = Math.floor(Math.random() * (canvasWidth / gridSize));
food.y = Math.floor(Math.random() * (canvasHeight / gridSize));
} else {
snake.pop();
}
// 判断是否撞墙或自撞
if (head.x < 0 || head.x * gridSize >= canvasWidth || head.y < 0 || head.y * gridSize >= canvasHeight) {
clearInterval(intervalId);
alert("Game over!");
}
for (var i = 1; i < snake.length; i++) {
if (head.x == snake[i].x && head.y == snake[i].y) {
clearInterval(intervalId);
alert("Game over!");
}
}
}
// 键盘监听函数
document.addEventListener("keydown", function(event) {
if (event.keyCode == 37 && direction != "right") direction = "left";
else if (event.keyCode == 38 && direction != "down") direction = "up";
else if (event.keyCode == 39 && direction != "left") direction = "right";
else if (event.keyCode == 40 && direction != "up") direction = "down";
});
// 游戏主循环函数
var intervalId = setInterval(function() {
move();
draw();
}, 100);
```
以上是一个简单的示例,实现了贪吃蛇的基本功能,但还有很多优化和扩展的空间,比如添加分数、难度等级等。希望能对你有所帮助。