贪吃蛇代码
时间: 2023-07-02 14:12:12 浏览: 87
贪吃蛇代码,蛮简单的,嘿嘿嘿
以下是使用HTML5 Canvas和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>
// 获取canvas元素和上下文对象
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置游戏参数
var blockSize = 10; // 每个方块的大小
var widthInBlocks = canvas.width / blockSize;
var heightInBlocks = canvas.height / blockSize;
var score = 0; // 得分
// 画网格线
function drawGrid() {
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 0.5;
for (var x = 0; x < canvas.width; x += blockSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (var y = 0; y < canvas.height; y += blockSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
}
// 画方块
function drawBlock(ctx, position) {
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x, y, blockSize, blockSize);
}
// 画得分
function drawScore() {
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("得分: " + score, blockSize, blockSize);
}
// 初始化贪吃蛇
var snake = {
body: [[6, 4], [5, 4], [4, 4]],
direction: "right"
};
// 画贪吃蛇
function drawSnake() {
ctx.fillStyle = "green";
for (var i = 0; i < snake.body.length; i++) {
drawBlock(ctx, snake.body[i]);
}
}
// 移动贪吃蛇
function moveSnake() {
var head = snake.body[0].slice();
switch (snake.direction) {
case "right":
head[0] += 1;
break;
case "left":
head[0] -= 1;
break;
case "up":
head[1] -= 1;
break;
case "down":
head[1] += 1;
break;
}
snake.body.unshift(head);
var hasEaten = checkFoodCollision();
if (!hasEaten) {
snake.body.pop();
}
}
// 检查贪吃蛇是否撞墙或撞到自己
function checkCollision(position) {
var wallCollision =
position[0] < 0 ||
position[0] >= widthInBlocks ||
position[1] < 0 ||
position[1] >= heightInBlocks;
var selfCollision = false;
for (var i = 0; i < snake.body.length; i++) {
if (position[0] === snake.body[i][0] && position[1] === snake.body[i][1]) {
selfCollision = true;
break;
}
}
return wallCollision || selfCollision;
}
// 生成食物
var food = {
position: [Math.floor(Math.random() * widthInBlocks), Math.floor(Math.random() * heightInBlocks)]
};
// 画食物
function drawFood() {
drawBlock(ctx, food.position);
}
// 检查贪吃蛇是否吃到食物
function checkFoodCollision() {
var head = snake.body[0];
if (head[0] === food.position[0] && head[1] === food.position[1]) {
food.position = [Math.floor(Math.random() * widthInBlocks), Math.floor(Math.random() * heightInBlocks)];
score++;
return true;
} else {
return false;
}
}
// 处理按键事件
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37 && snake.direction !== "right") { // 左箭头
snake.direction = "left";
} else if (event.keyCode === 38 && snake.direction !== "down") { // 上箭头
snake.direction = "up";
} else if (event.keyCode === 39 && snake.direction !== "left") { // 右箭头
snake.direction = "right";
} else if (event.keyCode === 40 && snake.direction !== "up") { // 下箭头
snake.direction = "down";
}
});
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
drawSnake();
drawFood();
drawScore();
moveSnake();
if (checkCollision(snake.body[0])) {
clearInterval(intervalId);
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("游戏结束", canvas.width / 2, canvas.height / 2);
}
}
// 启动游戏
var intervalId = setInterval(gameLoop, 100);
</script>
</body>
</html>
```
以上代码实现了一个简单的贪吃蛇游戏,其中使用Canvas来绘制游戏界面,使用JavaScript来实现游戏逻辑。
阅读全文