AI生成移动端贪吃蛇游戏页面，手机浏览器打开即可玩
贪吃蛇游戏可计分，可穿墙，AI生成适配手机浏览器的游戏，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>贪吃蛇游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
touch-action: none; /* 禁用默认触摸行为 */
}
canvas {
background-color: #333;
border: 2px solid #fff;
max-width: 100%;
max-height: 100%;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
}
#gameOver {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div id="score">得分: 0</div>
<div id="gameOver">游戏结束</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gameOverElement = document.getElementById('gameOver');
const gridSize = 20; // 网格大小
let tileCount = 20; // 网格数量
let tileSize; // 每个网格的像素大小
let snake = [{ x: 10, y: 10 }]; // 蛇的初始位置
let food = { x: 5, y: 5 }; // 食物的初始位置
let direction = { x: 0, y: 0 }; // 蛇的移动方向
let score = 0; // 得分
let gameOver = false; // 游戏是否结束
// 初始化画布大小
function resizeCanvas() {
const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
canvas.width = size;
canvas.height = size;
tileSize = canvas.width / tileCount;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 游戏主循环
function gameLoop() {
if (gameOver) {
gameOverElement.style.display = 'block';
return;
}
setTimeout(function(){
update();
draw();
requestAnimationFrame(gameLoop); // 使用 requestAnimationFrame 实现高性能动画
}, 100);
}
// 更新游戏状态
function update() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// 边缘穿越逻辑
if (head.x < 0) head.x = tileCount - 1;
if (head.x >= tileCount) head.x = 0;
if (head.y < 0) head.y = tileCount - 1;
if (head.y >= tileCount) head.y = 0;
// 吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
scoreElement.textContent = `得分: ${score}`;
food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
} else {
snake.pop(); // 如果没有吃到食物，移除蛇尾
}
snake.unshift(head); // 添加新的蛇头
// 检查是否撞到自己
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
gameOver = true;
}
}
}
// 绘制游戏画面
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
ctx.fillStyle = 'lime';
snake.forEach(part => ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize));
// 绘制食物
ctx.fillStyle = 'red';
ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
}
// 触摸控制逻辑
let touchStartX = 0;
let touchStartY = 0;
canvas.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
});
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const touchEndX = e.touches[0].clientX;
const touchEndY = e.touches[0].clientY;
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;
if (Math.abs(dx) > Math.abs(dy)) {
direction = { x: dx > 0 ? 1 : -1, y: 0 }; // 水平移动
} else {
direction = { x: 0, y: dy > 0 ? 1 : -1 }; // 垂直移动
}
});
// 启动游戏
gameLoop();
</script>
</body>
</html>