写一个贪吃蛇js游戏
时间: 2023-12-13 08:02:54 浏览: 25
以下是一个简单的贪吃蛇JS游戏。在这个游戏中,玩家使用方向键控制贪吃蛇的移动,目标是尽可能地吃到食物并避免撞到墙壁或自己的身体。当蛇吃到食物时,它会变长,并且游戏难度会逐渐增加。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
// 获取画布和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 定义格子大小和数量
var gridSize = 10;
var gridCount = canvas.width / gridSize;
// 定义初始蛇的位置和长度
var snake = [{x: 5, y: 5}];
var snakeLength = 1;
// 定义初始食物的位置
var food = {x: Math.floor(Math.random() * gridCount), y: Math.floor(Math.random() * gridCount)};
// 定义初始速度和方向
var speed = 100;
var direction = "right";
// 绘制格子
function drawGrid() {
ctx.beginPath();
for (var i = 0; i < gridCount; i++) {
ctx.moveTo(i * gridSize, 0);
ctx.lineTo(i * gridSize, canvas.height);
ctx.moveTo(0, i * gridSize);
ctx.lineTo(canvas.width, i * gridSize);
}
ctx.stroke();
}
// 绘制蛇和食物
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制格子
drawGrid();
// 绘制蛇
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 update() {
// 根据方向移动蛇头
var head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case "up":
head.y--;
break;
case "down":
head.y++;
break;
case "left":
head.x--;
break;
case "right":
head.x++;
break;
}
// 判断是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 增加蛇的长度
snakeLength++;
// 生成新的食物
food = {x: Math.floor(Math.random() * gridCount), y: Math.floor(Math.random() * gridCount)};
// 加速游戏
speed -= 5;
}
// 将蛇头插入数组开头
snake.unshift(head);
// 如果蛇的长度超过了限制,删除末尾的格子
if (snake.length > snakeLength) {
snake.pop();
}
// 判断是否撞到墙壁或自己的身体
if (head.x < 0 || head.x >= gridCount || head.y < 0 || head.y >= gridCount) {
// 游戏结束
clearInterval(interval);
alert("Game Over!");
} else {
for (var i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
// 游戏结束
clearInterval(interval);
alert("Game Over!");
}
}
}
}
// 处理键盘输入
function handleInput(event) {
switch (event.keyCode) {
case 37:
// 左箭头
if (direction !== "right") {
direction = "left";
}
break;
case 38:
// 上箭头
if (direction !== "down") {
direction = "up";
}
break;
case 39:
// 右箭头
if (direction !== "left") {
direction = "right";
}
break;
case 40:
// 下箭头
if (direction !== "up") {
direction = "down";
}
break;
}
}
// 开始游戏
draw();
var interval = setInterval(function() {
update();
draw();
}, speed);
document.addEventListener("keydown", handleInput);
```