html5贪吃蛇代码
时间: 2023-07-03 22:21:50 浏览: 62
以下是一个简单的 HTML5 贪吃蛇游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// 定义游戏画布和绘图环境
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
// 定义蛇的初始位置和大小
var snakeX = 10;
var snakeY = 10;
var snakeSize = 20;
// 定义蛇的移动速度和方向
var snakeSpeed = 1;
var snakeDirection = "right";
// 定义食物的初始位置和大小
var foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
var foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
var foodSize = snakeSize;
// 绘制蛇和食物
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
ctx.fillStyle = "green";
ctx.fillRect(snakeX, snakeY, snakeSize, snakeSize);
// 绘制食物
ctx.fillStyle = "red";
ctx.fillRect(foodX, foodY, foodSize, foodSize);
}
// 更新蛇的位置和方向
function update() {
// 根据方向更新蛇的位置
if (snakeDirection == "right") {
snakeX += snakeSize * snakeSpeed;
} else if (snakeDirection == "left") {
snakeX -= snakeSize * snakeSpeed;
} else if (snakeDirection == "up") {
snakeY -= snakeSize * snakeSpeed;
} else if (snakeDirection == "down") {
snakeY += snakeSize * snakeSpeed;
}
// 检测蛇是否吃到了食物
if (snakeX == foodX && snakeY == foodY) {
// 重新生成食物的位置
foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
}
}
// 监听键盘事件,改变蛇的方向
document.addEventListener("keydown", function(event) {
if (event.keyCode == 37 && snakeDirection != "right") {
snakeDirection = "left";
} else if (event.keyCode == 38 && snakeDirection != "down") {
snakeDirection = "up";
} else if (event.keyCode == 39 && snakeDirection != "left") {
snakeDirection = "right";
} else if (event.keyCode == 40 && snakeDirection != "up") {
snakeDirection = "down";
}
});
// 游戏循环,每秒钟更新一次
setInterval(function() {
update();
draw();
}, 1000 / 60);
</script>
</body>
</html>
```
这只是一个简单的示例,还有很多地方可以进行优化和改进,比如增加蛇的长度、增加难度等等。