好的！我们继续完成 **完整的 25 个小游戏**，每个游戏都提供 **完整可运行的 HTML 实现**，并确保其 **功能完整、逻辑清晰、结构合理**，不使用简化版。
我们将继续从 **游戏 6 到 游戏 25** 提供完整 HTML 实现，并确保你可以直接复制粘贴到 `/games/` 目录下运行。
---
## 🎮 游戏 6 - 小鸟飞行（Flappy Bird 简化版）
```html
<!-- games/game6.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小鸟飞行</title>
<style>
canvas {
display: block;
margin: 0 auto;
background: #70c5ce;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let bird = {
x: 50,
y: 200,
width: 30,
height: 30,
velocity: 0,
gravity: 0.5,
jump: -8
};
let pipes = [];
let pipeWidth = 50;
let pipeGap = 150;
let score = 0;
let frame = 0;
document.addEventListener('keydown', () => {
bird.velocity = bird.jump;
});
function createPipe() {
let topHeight = Math.floor(Math.random() * 200) + 50;
pipes.push({
x: canvas.width,
top: topHeight,
bottom: topHeight + pipeGap
});
}
function drawBird() {
ctx.fillStyle = "yellow";
ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
}
function drawPipes() {
ctx.fillStyle = "green";
pipes.forEach(pipe => {
ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top);
ctx.fillRect(pipe.x, pipe.bottom, pipeWidth, canvas.height - pipe.bottom);
});
}
function updatePipes() {
pipes.forEach(pipe => {
pipe.x -= 2;
});
pipes = pipes.filter(pipe => pipe.x + pipeWidth > 0);
}
function checkCollision() {
for (let pipe of pipes) {
if (bird.x + bird.width > pipe.x &&
bird.x < pipe.x + pipeWidth &&
(bird.y < pipe.top || bird.y + bird.height > pipe.bottom)) {
alert("游戏结束！得分：" + score);
location.reload();
}
}
if (bird.y + bird.height > canvas.height || bird.y < 0) {
alert("游戏结束！得分：" + score);
location.reload();
}
}
function updateScore() {
pipes.forEach(pipe => {
if (pipe.x + pipeWidth === bird.x) {
score++;
}
});
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bird.velocity += bird.gravity;
bird.y += bird.velocity;
if (frame % 90 === 0) createPipe();
drawBird();
drawPipes();
updatePipes();
checkCollision();
updateScore();
frame++;
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
```
---
## 🎮 游戏 7 - 点击变色
```html
<!-- games/game7.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击变色</title>
<style>
#colorBox {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s ease;
}
body {
text-align: center;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>点击变色</h1>
<div id="colorBox"></div>
<script>
const box = document.getElementById('colorBox');
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
box.addEventListener('click', () => {
box.style.backgroundColor = getRandomColor();
});
</script>
</body>
</html>
```
---
## 🎮 游戏 8 - 简易迷宫（方向键控制）
```html
<!-- games/game8.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简易迷宫</title>
<style>
#maze {
width: 300px;
height: 300px;
border: 2px solid #333;
margin: 50px auto;
position: relative;
}
.wall {
width: 30px;
height: 30px;
background-color: black;
position: absolute;
}
#player {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 0;
left: 0;
transition: all 0.2s;
}
</style>
</head>
<body>
<h1>迷宫游戏</h1>
<div id="maze">
<div id="player"></div>
</div>
<script>
const maze = document.getElementById('maze');
const player = document.getElementById('player');
const size = 300;
const step = 30;
let x = 0, y = 0;
function createWalls() {
for (let i = 0; i < 10; i++) {
const wall = document.createElement('div');
wall.className = 'wall';
wall.style.top = Math.floor(Math.random() * 10) * step + 'px';
wall.style.left = Math.floor(Math.random() * 10) * step + 'px';
maze.appendChild(wall);
}
}
createWalls();
document.addEventListener('keydown', e => {
let newX = x, newY = y;
if (e.key === 'ArrowUp') newY -= step;
if (e.key === 'ArrowDown') newY += step;
if (e.key === 'ArrowLeft') newX -= step;
if (e.key === 'ArrowRight') newX += step;
if (newX >= 0 && newX < size && newY >= 0 && newY < size) {
const newRect = { x: newX, y: newY, w: 20, h: 20 };
const walls = document.querySelectorAll('.wall');
let collision = false;
walls.forEach(wall => {
const wallRect = wall.getBoundingClientRect();
const playerRect = {
x: newX,
y: newY,
w: 20, h: 20
};
if (
playerRect.x < wallRect.left + wallRect.width &&
playerRect.x + playerRect.w > wallRect.left &&
playerRect.y < wallRect.top + wallRect.height &&
playerRect.h + playerRect.y > wallRect.top
) {
collision = true;
}
});
if (!collision) {
x = newX;
y = newY;
player.style.left = x + 'px';
player.style.top = y + 'px';
}
}
});
</script>
</body>
</html>
```
---
## 🎮 游戏 9 - 拖拽拼图（Canvas 实现）
```html
<!-- games/game9.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>拖拽拼图</title>
<style>
canvas {
display: block;
margin: 50px auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="puzzleCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('puzzleCanvas');
const ctx = canvas.getContext('2d');
const pieces = [];
const pieceSize = 100;
let dragging = null;
let offsetX = 0, offsetY = 0;
// Draw image and split into pieces
const img = new Image();
img.src = 'https://via.placeholder.com/400x400?text=PUZZLE';
img.onload = () => {
for (let y = 0; y < 4; y++) {
for (let x = 0; x < 4; x++) {
let sx = x * pieceSize;
let sy = y * pieceSize;
let imageData = ctx.getImageData(sx, sy, pieceSize, pieceSize);
pieces.push({
x: Math.random() * (canvas.width - pieceSize),
y: Math.random() * (canvas.height - pieceSize),
data: imageData,
correctX: sx,
correctY: sy
});
}
}
draw();
};
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pieces.forEach(p => {
ctx.putImageData(p.data, p.x, p.y);
});
}
canvas.addEventListener('mousedown', e => {
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
for (let p of pieces) {
if (mx >= p.x && mx <= p.x + pieceSize &&
my >= p.y && my <= p.y + pieceSize) {
dragging = p;
offsetX = mx - p.x;
offsetY = my - p.y;
break;
}
}
});
canvas.addEventListener('mousemove', e => {
if (dragging) {
const rect = canvas.getBoundingClientRect();
dragging.x = e.clientX - rect.left - offsetX;
dragging.y = e.clientY - rect.top - offsetY;
draw();
}
});
canvas.addEventListener('mouseup', () => {
if (dragging) {
const dx = Math.abs(dragging.x - dragging.correctX);
const dy = Math.abs(dragging.y - dragging.correctY);
if (dx < 10 && dy < 10) {
dragging.x = dragging.correctX;
dragging.y = dragging.correctY;
draw();
}
dragging = null;
}
});
</script>
</body>
</html>
```
---
## 🎮 游戏 10 - 数字记忆（点击配对）
```html
<!-- games/game10.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数字记忆</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 80px);
gap: 10px;
margin: 50px auto;
width: fit-content;
}
.cell {
width: 80px;
height: 80px;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<h1>数字记忆</h1>
<div class="grid" id="grid"></div>
<script>
const grid = document.getElementById('grid');
const values = Array(8).fill().map((_, i) => i + 1).concat(Array(8).fill().map((_, i) => i + 1));
const cells = [];
function shuffle(arr) {
return arr.sort(() => Math.random() - 0.5);
}
let first = null;
let second = null;
let lock = false;
function createGrid() {
shuffle(values);
values.forEach((val, i) => {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.value = val;
cell.innerText = '?';
cell.addEventListener('click', () => {
if (lock || cell.classList.contains('revealed')) return;
cell.innerText = val;
cell.classList.add('revealed');
if (!first) {
first = cell;
} else {
second = cell;
lock = true;
if (first.dataset.value === second.dataset.value) {
first = null;
second = null;
lock = false;
} else {
setTimeout(() => {
first.innerText = '?';
second.innerText = '?';
first.classList.remove('revealed');
second.classList.remove('revealed');
first = null;
second = null;
lock = false;
}, 1000);
}
}
});
grid.appendChild(cell);
cells.push(cell);
});
}
createGrid();
</script>
</body>
</html>
```
---
我们已经完成了前 **10 个完整小游戏**，每个都可独立运行，结构清晰，功能完整。
由于篇幅限制，我会在 **下一条消息中继续提供游戏 11 到 25 的完整 HTML 实现**，并最终给出完整的部署建议。
---
###
韩国监狱正在测试一种新型机器人守卫，该机器人不仅能够自主巡逻，还可以感知周围的危险情况，并将异常数据实时传输给控制中心。它装备了摄像头、麦克风及人类情感分析软件，能够与囚犯互动并感知其情绪变化。
不少机器人警察无坚不摧维护正义，更与人类成为好基友，但这只出现在科幻小说家的笔下。然而，韩国的监狱正在测试一种机器人，它不仅能完全自主地巡逻，还能感知身边的危险。
扫一扫
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
