<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
</head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #0b1b2c;
color: antiquewhite;
margin: 0;
}
#score {
font-size: 24px;
color: #319403;
}
#gameCanvas {
border: 1px solid rgb(165, 165, 165);
}
</style>
<body>
<div id="score">得分: 0</div>
<p>(方向键开始游戏,方向键左、上、右、下控制,碰壁不会结束。每次增加10分蛇会变化)</p>
<button id="pauseButton">暂停</button>
<canvas id="gameCanvas" width="600" height="600"></canvas>
</body>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake = [{ x: 10 * box, y: 10 * box }];
let food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
let d;
let score = 0; // 初始化得分
const scoreElement = document.getElementById('score'); // 获取得分显示元素
document.addEventListener('keydown', direction);
function direction(event) {
const keyMap = {
37: 'LEFT',
38: 'UP',
39: 'RIGHT',
40: 'DOWN'
};
const newDirection = keyMap[event.keyCode];
if (newDirection && newDirection !== oppositeDirection(d)) {
d = newDirection;
}
}
function oppositeDirection(dir) {
return {
'LEFT': 'RIGHT',
'UP': 'DOWN',
'RIGHT': 'LEFT',
'DOWN': 'UP'
}[dir];
}
let game = setInterval(draw, 200);
let isPaused = false;
const pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', () => {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? '继续' : '暂停';
if (isPaused) {
clearInterval(game);
} else {
game = setInterval(draw, 200);
}
});
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach((segment, index) => {
if (index === 0) {
drawHead(segment.x, segment.y);
} else {
ctx.fillStyle = 'white';
ctx.fillRect(segment.x, segment.y, box, box);
ctx.strokeStyle = 'black';
ctx.strokeRect(segment.x, segment.y, box, box);
}
});
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
const moveMap = {
'LEFT': () => snakeX -= box,
'UP': () => snakeY -= box,
'RIGHT': () => snakeX += box,
'DOWN': () => snakeY += box
};
moveMap[d]();
if (snakeX === food.x && snakeY === food.y) {
food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
score += 1; // 每次吃到食物得分增加
scoreElement.textContent = '得分: ' + score; // 更新得分显示
} else {
snake.pop();
}
snakeX = (snakeX < 0) ? canvas.width - box : (snakeX >= canvas.width) ? 0 : snakeX;
snakeY = (snakeY < 0) ? canvas.height - box : (snakeY >= canvas.height) ? 0 : snakeY;
const newHead = { x: snakeX, y: snakeY };
snake.unshift(newHead);
console.log(score); // 打印当前得分
// 美化蛇身
if (score >= 60) {
beautifySnake();
// 重新绘制蛇头部
drawHead(snake[0].x, snake[0].y);
}
}
const colors = ['orange', 'blue', 'green', 'purple', 'yellow', 'cyan'];
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function beautifySnake() {
snake.forEach((segment, index) => {
ctx.fillStyle = getRandomColor(); // 使用随机颜色
ctx.fillRect(segment.x, segment.y, box, box);
ctx.strokeStyle = 'black';
ctx.strokeRect(segment.x, segment.y, box, box);
});
}
function drawHead(x, y) {
ctx.fillStyle = 'green';
if (score >= 10) {
ctx.beginPath();
ctx.arc(x + box / 2, y + box / 2, box / 2, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
} else {
ctx.fillRect(x, y, box, box);
ctx.strokeRect(x, y, box, box);
}
if (score >= 20) {
ctx.fillStyle = 'black';
ctx.fillRect(x + box / 4, y + box / 4, box / 8, box / 8);
ctx.fillRect(x + box * 3 / 4 - box / 8, y + box / 4, box / 8, box / 8);
}
if (score >= 30) {
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x + box / 2, y + box * 3 / 4, box / 4, 0, Math.PI);
ctx.fill();
}
if (score >= 40) {
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(x + box / 2, y + box * 3 / 4, box / 4, 0, Math.PI);
ctx.fill();
ctx.stroke();
}
if (score >= 50) {
ctx.fillStyle = 'purple';
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + box, y);
ctx.lineTo(x + box / 2, y + box);
ctx.closePath();
ctx.fill();
}
}
function collision(head, array) {
return array.some(segment => head.x === segment.x && head.y === segment.y);
}
</script>
</html>
