贪吃蛇小游戏
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
/* 游戏画布样式 */
#game-canvas {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
/* 蛇身和食物样式 */
.snake-segment {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<h1>贪吃蛇游戏</h1>
<div id="game-canvas"></div>
<div>
<p>得分：<span class="score">0</span></p>
<button id="restart-button">重新开始</button>
</div>
<script>
// 获取游戏画布元素
const gameCanvas = document.getElementById('game-canvas');
// 定义游戏画布的宽度和高度
const canvasWidth = 400;
const canvasHeight = 400;
// 定义蛇身的尺寸和初始位置
const segmentSize = 20;
let snakeSegments = [
{
x: segmentSize * 3, y: 0 },
{
x: segmentSize * 2, y: 0 },
{
x: segmentSize, y: 0 }
];
// 随机生成初始位置
const initialX = Math.floor(Math.random() * (canvasWidth / segmentSize - 3) + 3) * segmentSize;
const initialY = Math.floor(Math.random() * (canvasHeight / segmentSize)) * segmentSize;
// 定义蛇的初始移动方向
let direction = 'right';
// 定义食物的初始位置
let food = {
x: 200, y: 200 };
// 创建蛇身元素和食物元素
function createSegmentElement(x, y) {
const segment = document.createElement('div');
segment.className = 'snake-segment';
segment.style.left = x + 'px';
segment.style.top = y + 'px';
return segment;
}
function createFoodElement(x, y) {
const foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = x + 'px';
foodElement.style.top = y + 'px';
return foodElement;
}
// 更新蛇身的位置
function updateSnakePosition() {
const segments = document.getElementsByClassName('snake-segment');
for (let i = 0; i < snakeSegments.length; i++) {
segments[i].style.left = snakeSegments[i].x + 'px';
segments[i].style.top = snakeSegments[i].y + 'px';
}
}
// 更新食物的位置
function updateFoodPosition() {
const foodElement = document.querySelector('.food');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
}
// 清除画布
function clearCanvas() {
gameCanvas.innerHTML = '';
}
// 绘制蛇身
function drawSnake() {
snakeSegments.forEach(segment => {
const segmentElement = createSegmentElement(segment.x, segment.y);
gameCanvas.appendChild(segmentElement);
});
}
// 绘制食物
function drawFood() {
const foodElement = createFoodElement(food.x, food.y);
gameCanvas.appendChild(foodElement);
}
// 显示得分
function getScore() {
const scoreText = document.querySelector(".score")
scoreText.innerText = snakeSegments.length - 3
}
// 移动蛇的函数
function moveSnake() {
// 创建新的蛇头
const head = {
x: snakeSegments[0].x, y: snakeSegments[0].y };
// 根据方向更新蛇头的位置
switch (direction) {
case 'up':
head.y -= segmentSize;
break;
case 'down':
head.y += segmentSize;
break;
case 'left':
head.x -= segmentSize;
break;
case 'right':
head.x += segmentSize;
break;
}
// 将新的蛇头插入到蛇身数组的第一个位置
snakeSegments.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 生成新的食物位置
initFoodPosition();
} else {
// 如果没有吃到食物，移除蛇身数组的最后一个元素，即蛇尾
snakeSegments.pop();
}
// 清除画布
clearCanvas();
// 绘制蛇身和食物
drawSnake();
drawFood();
// 实时分数更新
getScore()
// 检查游戏是否结束
if (isCollision()) {
clearInterval(gameLoop);
alert('游戏结束！得分：' + (snakeSegments.length - 3));
}
}
// 检查蛇头是否与蛇身或游戏边界发生碰撞
function isCollision() {
const head = snakeSegments[0];
// 检查是否与蛇身碰撞
for (let i = 1; i < snakeSegments.length; i++) {
if (head.x === snakeSegments[i].x && head.y === snakeSegments[i].y) {
return true;
}
}
// 检查是否与游戏边界碰撞
if (
head.x < 0 ||
head.x >= canvasWidth ||
head.y < 0 ||
head.y >= canvasHeight
) {
return true;
}
return false;
}
// 监听键盘按键事件，改变蛇的移动方向
document.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
if (direction !== 'down') {
direction = 'up';
}
break;
case 'ArrowDown':
if (direction !== 'up') {
direction = 'down';
}
break;
case 'ArrowLeft':
if (direction !== 'right') {
direction = 'left';
}
break;
case 'ArrowRight':
if (direction !== 'left') {
direction = 'right';
}
break;
}
});
// 初始化食物位置
function initFoodPosition() {
let validPosition = false;
while (!validPosition) {
food.x = Math.floor(Math.random() * (canvasWidth / segmentSize)) * segmentSize;
food.y = Math.floor(Math.random() * (canvasHeight / segmentSize)) * segmentSize;
// 检查食物位置是否与蛇身重叠
let overlap = false;
for (let i = 0; i < snakeSegments.length; i++) {
if (food.x === snakeSegments[i].x && food.y === snakeSegments[i].y) {
overlap = true;
break;
}
}
if (!overlap) {
validPosition = true;
}
}
}
// 获取重新开始按钮元素
const restartButton = document.getElementById('restart-button');
// 重新开始游戏
function restartGame() {
clearInterval(gameLoop); // 清除游戏循环
snakeSegments = [
{
x: segmentSize * 3, y: 0 },
{
x: segmentSize * 2, y: 0 },
{
x: segmentSize, y: 0 }
]; // 重置蛇身位置
direction = 'right'; // 重置蛇的移动方向
initFoodPosition(); // 重新生成食物位置
clearCanvas(); // 清除画布
drawSnake(); // 绘制蛇身
drawFood(); // 绘制食物
gameLoop = setInterval(moveSnake, 500); // 启动游戏循环
}
// 监听重新开始按钮的点击事件
restartButton.addEventListener('click', restartGame);
// 初始化游戏
function initGame() {
// 生成初始的食物位置
initFoodPosition();
// 将蛇身元素和食物元素添加到游戏画布中
drawSnake();
drawFood();
// 启动游戏循环
gameLoop = setInterval(moveSnake, 200);
}
// 开始游戏
initGame();
</script>
</body>
</html>
