贪吃虫javascript代码
时间: 2023-07-09 15:33:37 浏览: 167
贪吃虫代码
好的,以下是一个简单的贪吃虫的 JavaScript 代码示例,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃虫游戏</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 初始化贪吃虫和食物位置
var snake = [{x: 10, y: 10}];
var food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10};
// 监听键盘事件,控制贪吃虫移动方向
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37) {
snake.direction = "left";
} else if (event.keyCode === 38) {
snake.direction = "up";
} else if (event.keyCode === 39) {
snake.direction = "right";
} else if (event.keyCode === 40) {
snake.direction = "down";
}
});
// 更新贪吃虫位置
function update() {
var head = {x: snake[0].x, y: snake[0].y};
if (snake.direction === "left") {
head.x -= 10;
} else if (snake.direction === "up") {
head.y -= 10;
} else if (snake.direction === "right") {
head.x += 10;
} else if (snake.direction === "down") {
head.y += 10;
}
snake.unshift(head);
if (snake[0].x === food.x && snake[0].y === food.y) {
food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10};
} else {
snake.pop();
}
}
// 渲染游戏画面
function render() {
ctx.clearRect(0, 0, 400, 400);
ctx.fillStyle = "#f00";
ctx.fillRect(food.x, food.y, 10, 10);
ctx.fillStyle = "#000";
snake.forEach(function(segment) {
ctx.fillRect(segment.x, segment.y, 10, 10);
});
}
// 游戏循环
function gameLoop() {
update();
render();
setTimeout(gameLoop, 100);
}
gameLoop();
</script>
</body>
</html>
```
该代码创建了一个画布(canvas),并在其中绘制了一个贪吃虫和一些食物。玩家可以使用方向键控制贪吃虫的移动方向。贪吃虫会自动向前移动,并在吃到食物时变长。游戏循环使用 setTimeout() 函数来定时更新和渲染游戏画面。
阅读全文