当前位置：首页 > news >正文

改进版网页贪吃蛇游戏

news 2026/4/21 11:56:19

提示词：

请进一步改进：

添加方向按键，这样手机触摸屏也能玩

添加游戏得分

添加“开始游戏”与“重新开始”的按钮

重新设计一下 UI 样式

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇游戏</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;font-family: Arial, sans-serif;}.game-container {text-align: center;display: flex;align-items: center;justify-content: space-between;max-width: 100%;flex-wrap: wrap;}#gameCanvas {border: 2px solid #333;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin: 0 auto;}#gameControls {text-align: center;margin: 0 auto;padding: 0 8px;}#gameScore {display: flex;flex-direction: column;align-items: center;justify-content: center;}#score {font-size: 24px;margin: 10px 0;}#startBtn {font-size: 18px;padding: 12px 24px;background: linear-gradient(145deg, #f0f0f0, #cacaca);color: #333;border: none;border-radius: 10px;cursor: pointer;transition: all 0.3s ease;box-shadow: 5px 5px 10px #bebebe,-5px -5px 10px #ffffff;position: relative;overflow: hidden;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}#startBtn::before {content: '';position: absolute;top: 2px;left: 2px;right: 2px;bottom: 50%;background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);border-radius: 8px 8px 0 0;pointer-events: none;}#startBtn:hover {transform: translateY(-2px);box-shadow: 6px 6px 12px #bebebe,-6px -6px 12px #ffffff;background: linear-gradient(145deg, #f5f5f5, #d0d0d0);}#startBtn:active {transform: translateY(1px);box-shadow: inset 4px 4px 8px #bebebe,inset -4px -4px 8px #ffffff;background: linear-gradient(145deg, #e6e6e6, #c0c0c0);}.controls {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;width: 180px;margin: 20px auto;}.control-btn {width: 60px;height: 60px;font-size: 24px;background: linear-gradient(145deg, #f0f0f0, #cacaca);color: #333;border: none;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;display: flex;justify-content: center;align-items: center;box-shadow: 5px 5px 10px #bebebe,-5px -5px 10px #ffffff;position: relative;overflow: hidden;}.control-btn::before {content: '';position: absolute;top: 5%;left: 5%;right: 5%;bottom: 5%;border-radius: 50%;z-index: -1;}.control-btn:hover {transform: translateY(-2px);box-shadow: 6px 6px 12px #bebebe,-6px -6px 12px #ffffff;}.control-btn:active {transform: translateY(1px);box-shadow: inset 4px 4px 8px #bebebe,inset -4px -4px 8px #ffffff;}#up {grid-column: 2;}#left {grid-column: 1;grid-row: 2;}#right {grid-column: 3;grid-row: 2;}#down {grid-column: 2;grid-row: 3;}</style>
</head><body><div class="game-container"><canvas id="gameCanvas" width="300" height="300"></canvas><div id="gameControls"><div id="gameScore"><div id="score">得分: 0</div><button id="startBtn">开始游戏</button></div><div class="controls"><button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button><button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button><button id="right" class="control-btn" onclick="changeDirectionByButton('right')">→</button><button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button></div></div></div><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const scoreElement = document.getElementById('score');const startBtn = document.getElementById('startBtn');const gridSize = 15;const tileCount = canvas.width / gridSize;let snake = [{ x: 10, y: 10 }];let food = { x: 15, y: 15 };let dx = 0;let dy = 0;let score = 0;let gameRunning = false;function drawGame() {if (!gameRunning) return;clearCanvas();moveSnake();drawSnake();drawFood();checkCollision();updateScore();setTimeout(drawGame, 200);}function clearCanvas() {ctx.fillStyle = '#f0f0f0';ctx.fillRect(0, 0, canvas.width, canvas.height);}function moveSnake() {const head = { x: snake[0].x + dx, y: snake[0].y + dy };snake.unshift(head);if (head.x === food.x && head.y === food.y) {generateFood();score += 10;} else {snake.pop();}}function drawSnake() {snake.forEach((segment, index) => {const gradient = ctx.createLinearGradient(segment.x * gridSize,segment.y * gridSize,(segment.x + 1) * gridSize,(segment.y + 1) * gridSize);gradient.addColorStop(0, '#4CAF50');gradient.addColorStop(1, '#45a049');ctx.fillStyle = gradient;ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);if (index === 0) {// Draw eyesctx.fillStyle = 'white';ctx.beginPath();ctx.arc(segment.x * gridSize + 5, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);ctx.fill();}});}function drawFood() {const gradient = ctx.createRadialGradient(food.x * gridSize + gridSize / 2,food.y * gridSize + gridSize / 2,2,food.x * gridSize + gridSize / 2,food.y * gridSize + gridSize / 2,gridSize / 2);gradient.addColorStop(0, '#ff6b6b');gradient.addColorStop(1, '#ee5253');ctx.fillStyle = gradient;ctx.beginPath();ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 1, 0, 2 * Math.PI);ctx.fill();}function generateFood() {food.x = Math.floor(Math.random() * tileCount);food.y = Math.floor(Math.random() * tileCount);}function checkCollision() {const head = snake[0];if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {gameOver();}for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {gameOver();}}}function gameOver() {gameRunning = false;startBtn.textContent = '重新开始';startBtn.style.display = 'inline-block';alert(`游戏结束！你的得分是: ${score}`);}function updateScore() {scoreElement.textContent = `得分: ${score}`;}function resetGame() {snake = [{ x: 10, y: 10 }];food = { x: 15, y: 15 };dx = 0;dy = 0;score = 0;updateScore();}document.addEventListener('keydown', changeDirection);function changeDirection(event) {const LEFT_KEY = 37;const RIGHT_KEY = 39;const UP_KEY = 38;const DOWN_KEY = 40;const keyPressed = event.keyCode;const goingUp = dy === -1;const goingDown = dy === 1;const goingRight = dx === 1;const goingLeft = dx === -1;if (keyPressed === LEFT_KEY && !goingRight) {dx = -1;dy = 0;}if (keyPressed === UP_KEY && !goingDown) {dx = 0;dy = -1;}if (keyPressed === RIGHT_KEY && !goingLeft) {dx = 1;dy = 0;}if (keyPressed === DOWN_KEY && !goingUp) {dx = 0;dy = 1;}}function changeDirectionByButton(direction) {if (direction === 'left' && dx !== 1) {dx = -1;dy = 0;} else if (direction === 'up' && dy !== 1) {dx = 0;dy = -1;} else if (direction === 'down' && dy !== -1) {dx = 0;dy = 1;} else if (direction === 'right' && dx !== -1) {dx = 1;dy = 0;}}startBtn.addEventListener('click', () => {resetGame();gameRunning = true;startBtn.style.display = 'none';drawGame();});clearCanvas();</script>
</body></html>

备注：

这个改进版本包含以下UI和功能增强：

添加了方向按键，使游戏可以在移动设备上玩
添加了居中的游戏容器，使游戏在页面上更加美观。
改进了Canvas的样式，添加了边框和阴影效果。
添加了得分显示。
添加了开始/重新开始按钮。
为蛇和食物添加了渐变色，使其看起来更有立体感。
为蛇头部添加了眼睛，增加了趣味性。
将食物改为圆形，并添加了渐变效果。
添加了游戏结束时的提示。
改进了整体的配色方案，使用了更柔和的颜色。
这个版本的UI更加美观，游戏体验也更好。你可以将这段代码保存为HTML文件并在浏览器中打开来玩游戏。点击"开始游戏"按钮开始，使用方向键来控制蛇的移动方向。