H5游戏源码开发,win2003云主机,试用云主机,免费windows10云主机,vps线路远程桌面连接不稳定

🗣 Wd提问: H5游戏源码开发

🤖 Ai回答:
H5贪吃蛇游戏开发

我将为您创建一个完整的H5贪吃蛇游戏，包含现代UI设计、游戏控制、分数统计和响应式布局。

设计思路
使用Canvas绘制游戏区域
实现键盘控制和触摸控制
添加游戏状态管理（开始/暂停/结束）
设计现代化UI界面
实现响应式布局

下面是完整的实现代码：

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<titleH5贪吃蛇游戏</title
<style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, 1a2a6c, b21f1f, 1a2a6c);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: fff;
}

.container {
max-width: 800px;
width: 100%;
text-align: center;
}

header {
margin-bottom: 20px;
}

h1 {
font-size: 3.5rem;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
background: linear-gradient(to right, ff7e5f, feb47b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 2px;
}

.subtitle {
font-size: 1.2rem;
opacity: 0.8;
margin-bottom: 20px;
}

.game-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 20px 0;
}

.game-board {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
}

canvas {
display: block;
background: rgba(0, 0, 0, 0.3);
}

.game-info {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
min-width: 250px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 8px;
}

.stat {
text-align: center;
}

.stat-value {
font-size: 2.5rem;
font-weight: bold;
color: ff7e5f;
}

.stat-label {
font-size: 1rem;
opacity: 0.7;
}

.controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}

button {
background: linear-gradient(to right, ff7e5f, feb47b);
color: white;
border: none;
padding: 12px 20px;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

button:active {
transform: translateY(1px);
}

.direction-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}

.dir-btn {
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
height: 60px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}

.dir-btn:hover {
background: rgba(255, 255, 255, 0.2);
}

.dir-btn:active {
background: rgba(255, 255, 255, 0.3);
}

.up { grid-column: 2; grid-row: 1; }
.down { grid-column: 2; grid-row: 3; }
.left { grid-column: 1; grid-row: 2; }
.right { grid-column: 3; grid-row: 2; }

.instructions {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
margin-top: 30px;
text-align: left;
}

.instructions h2 {
margin-bottom: 15px;
color: ff7e5f;
}

.instructions ul {
padding-left: 20px;
}

.instructions li {
margin-bottom: 10px;
line-height: 1.6;
}

.game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}

.game-over.show {
opacity: 1;
pointer-events: all;
}

.game-over h2 {
font-size: 3rem;
margin-bottom: 20px;
color: ff7e5f;
}

.game-over p {
font-size: 1.5rem;
margin-bottom: 30px;
}

.mobile-controls {
display: none;
}

@media (max-width: 768px) {
.game-container {
flex-direction: column;
align-items: center;
}

.mobile-controls {
display: block;
margin-top: 20px;
width: 100%;
}

h1 {
font-size: 2.5rem;
}
}

@media (max-width: 480px) {
.stats {
flex-direction: column;
gap: 10px;
}

.controls {
grid-template-columns: 1fr;
}
}
</style
</head
<body
<div class=container
<header
<h1H5贪吃蛇</h1
<div class=subtitle经典游戏 HTML5实现</div
</header

<div class=game-container
<div class=game-board
<canvas id=gameCanvas width=400 height=400</canvas
<div class=game-over id=gameOver
<h2游戏结束!</h2
<p得分: <span id=finalScore0</span</p
<button id=restartBtn重新开始</button
</div
</div

<div class=game-info
<div class=stats
<div class=stat
<div class=stat-value id=score0</div
<div class=stat-label分数</div
</div
<div class=stat
<div class=stat-value id=level1</div
<div class=stat-label等级</div
</div
</div

<div class=controls
<button id=startBtn开始游戏</button
<button id=pauseBtn暂停游戏</button
</div

<div class=mobile-controls
<h3方向控制</h3
<div class=direction-controls
<div class=dir-btn up id=upBtn↑</div
<div class=dir-btn down id=downBtn↓</div
<div class=dir-btn left id=leftBtn←</div
<div class=dir-btn right id=rightBtn→</div
</div
</div
</div
</div

<div class=instructions
<h2游戏说明</h2
<ul
<li使用键盘方向键（↑ ↓ ← →）或屏幕上的方向按钮控制蛇的移动</li
<li吃到红色食物可增加蛇的长度和得分</li
<li每得10分升一级，速度会加快</li
<li撞到墙壁或自己的身体游戏结束</li
<li蛇身越长，得分越高，挑战越大！</li
</ul
</div
</div

<script
// 游戏变量
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const gameOverElement = document.getElementById('gameOver');
const finalScoreElement = document.getElementById('finalScore');

// 游戏常量
const box = 20;
const rows = canvas.height / box;
const cols = canvas.width / box;

// 游戏状态
let snake = [];
let food = {};
let direction = '';
let score = 0;
let level = 1;
let gameInterval;
let gameRunning = false;

// 初始化游戏
function initGame() {
// 初始化蛇长度为3
snake = [
{x: 10 * box, y: 10 * box},
{x: 9 * box, y: 10 * box},
{x: 8 * box, y: 10 * box}
];

// 初始方向
direction = 'RIGHT';

// 生成食物
generateFood();

// 重置分数和等级
score = 0;
level = 1;
scoreElement.textContent = score;
levelElement.textContent = level;

// 隐藏游戏结束画面
gameOverElement.classList.remove('show');

// 绘制初始状态
draw();
}

// 生成食物
function generateFood() {
food = {
x: Math.floor(Math.random() * cols) * box,
y: Math.floor(Math.random() * rows) * box
};

// 确保食物不会出现在蛇身上
for (let i = 0; i < snake.length; i++) {
if (food.x === snake[i].x && food.y === snake[i].y) {
generateFood();
break;
}
}
}

// 绘制游戏
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制网格背景
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if ((i + j) % 2 === 0) {
ctx.fillRect(j * box, i * box, box, box);
}
}
}

// 绘制蛇
for (let i = 0; i < snake.length; i++) {
// 蛇头
if (i === 0) {
ctx.fillStyle = '4CAF50';
ctx.fillRect(snake[i].x, snake[i].y, box, box);

// 蛇眼睛
ctx.fillStyle = 'black';
let eyeSize = box / 5;

// 根据方向调整眼睛位置
let offset = box / 3;
if (direction === 'RIGHT') {
ctx.fillRect(snake[i].x + box offset, snake[i].y + offset, eyeSize, eyeSize);
ctx.fillRect(snake[i].x + box offset, snake[i].y + box offset eyeSize, eyeSize, eyeSize);
} else if (direction === 'LEFT') {
ctx.fillRect(snake[i].x + offset eyeSize, snake[i].y + offset, eyeSize, eyeSize);
ctx.fillRect(snake[i].x + offset eyeSize, snake[i].y + box offset eyeSize, eyeSize, eyeSize);
} else if (direction === 'UP') {
ctx.fillRect(snake[i].x + offset, snake[i].y + offset eyeSize, eyeSize, eyeSize);
ctx.fillRect(snake[i].x + box offset eyeSize, snake[i].y + offset eyeSize, eyeSize, eyeSize);
} else if (direction === 'DOWN') {
ctx.fillRect(snake[i].x + offset, snake[i].y + box offset, eyeSize, eyeSize);
ctx.fillRect(snake[i].x + box offset eyeSize, snake[i].y + box offset, eyeSize, eyeSize);
}
}
// 蛇身
else {
ctx.fillStyle = i % 2 === 0 ? '8BC34A' : '7CB342';
ctx.fillRect(snake[i].x, snake[i].y, box, box);

// 蛇身边框
ctx.strokeStyle = '4CAF50';
ctx.lineWidth = 1;
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
}

// 绘制食物
ctx.fillStyle = 'FF5252';
ctx.beginPath();
ctx.arc(food.x + box/2, food.y + box/2, box/2 2, 0, Math.PI * 2);
ctx.fill();

// 食物内部细节
ctx.fillStyle = 'FF8A80';
ctx.beginPath();
ctx.arc(food.x + box/2, food.y + box/2, box/4, 0, Math.PI * 2);
ctx.fill();
}

// 移动蛇
function move() {
// 计算新的蛇头位置
let head = {x: snake[0].x, y: snake[0].y};

if (direction === 'LEFT') head.x -= box;
if (direction === 'UP') head.y -= box;
if (direction === 'RIGHT') head.x += box;
if (direction === 'DOWN') head.y += box;

// 检查碰撞
if (collision(head)) {
gameOver();
return;
}

// 添加新的蛇头
snake.unshift(head);

// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 增加分数
score += level;
scoreElement.textContent = score;

// 每10分升一级
let newLevel = Math.floor(score / 10) + 1;
if (newLevel level) {
level = newLevel;
levelElement.textContent = level;

// 根据等级调整速度
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 150 (level * 10));
}

// 生成新食物
generateFood();
} else {
// 没吃到食物则移除尾部
snake.pop();
}

// 绘制新状态
draw();
}

// 碰撞检测
function collision(head) {
// 撞墙检测
if (head.x < 0 head.y < 0 head.x = cols * box head.y = rows * box) {
return true;
}

// 撞自身检测
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}

return false;
}

// 游戏结束
function gameOver() {
clearInterval(gameInterval);
gameRunning = false;

finalScoreElement.textContent = score;
gameOverElement.classList.add('show');
}

// 游戏主循环
function gameLoop() {
move();
}

// 开始游戏
function startGame() {
if (gameRunning) return;

initGame();
gameRunning = true;

// 设置游戏速度 (150ms 每级减少10ms)
gameInterval = setInterval(gameLoop, 150 (level * 10));
}

// 暂停游戏
function pauseGame() {
if (!gameRunning) return;

clearInterval(gameInterval);
gameRunning = false;
}

// 事件监听
document.addEventListener('keydown', function(e) {
// 防止方向键滚动页面
if ([37, 38, 39, 40].includes(e.keyCode)) {
e.preventDefault();
}

if (e.keyCode === 37 && direction !== 'RIGHT') {
direction = 'LEFT';
} else if (e.keyCode === 38 && direction !== 'DOWN') {
direction = 'UP';
} else if (e.keyCode === 39 && direction !== 'LEFT') {
direction = 'RIGHT';
} else if (e.keyCode === 40 && direction !== 'UP') {
direction = 'DOWN';
} else if (e.keyCode === 32) { // 空格键暂停/继续
if (gameRunning) {
pauseGame();
} else {
startGame();
}
}
});

// 按钮事件
document.getElementById('startBtn').addEventListener('click', startGame);
document.getElementById('pauseBtn').addEventListener('click', pauseGame);
document.getElementById('restartBtn').addEventListener('click', startGame);

// 方向按钮事件
document.getElementById('upBtn').addEventListener('click', () = {
if (direction !== 'DOWN') direction = 'UP';
});
document.getElementById('downBtn').addEventListener('click', () = {
if (direction !== 'UP') direction = 'DOWN';
});
document.getElementById('leftBtn').addEventListener('click', () = {
if (direction !== 'RIGHT') direction = 'LEFT';
});
document.getElementById('rightBtn').addEventListener('click', () = {
if (direction !== 'LEFT') direction = 'RIGHT';
});

// 初始化游戏
initGame();
</script
</body
</html

游戏功能说明

1、核心游戏机制：
使用Canvas绘制游戏区域
蛇的移动和方向控制
食物生成和碰撞检测
分数系统和等级提升

2、游戏控制：
键盘方向键控制蛇的移动
屏幕方向按钮（移动设备友好）
开始/暂停/重新开始按钮

3、游戏特性：
蛇身长度随吃食物增加
每得10分升一级，速度加快
精美的蛇头设计（有眼睛）
食物设计为圆形苹果样式

4、UI设计：
现代化渐变背景和卡片设计
游戏状态显示（分数和等级）
响应式布局（适配桌面和移动设备）
游戏结束画面

5、其他功能：
游戏说明区域
网格背景增强视觉效果
平滑的动画和过渡效果

使用说明

1、点击开始游戏按钮开始
2、使用键盘方向键或屏幕上的方向按钮控制蛇的移动
3、吃到红色食物增加分数
4、避免撞墙或撞到自己的身体
5、游戏结束后可点击重新开始按钮

这个游戏完全使用HTML5、CSS3和JavaScript实现，无需任何外部库，可以直接在浏览器中运行。

Ai作答

📣 商家广告：