根据用户定义的游戏产品名称和功能模块，生成一个完整的单文件网页应用。
好的，这是一个完整的、单文件HTML网页应用，名为“文字跑酷”。它实现了如下功能：横版卷轴场景、WASD键控制移动、动态生成的文字障碍物、实时计分，并且使用了Tailwind CSS美化界面。
以下是你的单页HTML代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字跑酷</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body class="bg-gray-800 text-white flex flex-col justify-center items-center h-screen">
<header class="absolute top-0 w-full bg-gray-900 text-center py-4">
<h1 class="text-xl font-bold">文字跑酷</h1>
<p class="text-sm">使用 WASD 键来移动，躲避文字障碍，尽可能生存更久吧！</p>
<div class="text-sm">
<span>得分：</span><span id="score" class="font-bold text-yellow-400">0</span>
</div>
</header>
<div class="flex-1 relative w-full">
<canvas id="gameCanvas"></canvas>
</div>
<footer class="absolute bottom-0 w-full bg-gray-900 text-center py-2 text-sm">
<span>项目由 © 2023 提供支持</span>
</footer>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let player = {
x: 50,
y: canvas.height / 2,
width: 30,
height: 30,
color: "cyan",
speed: 5,
};
let score = 0;
let obstacles = [];
let keys = { w: false, a: false, s: false, d: false };
let lastTime = 0;
let obstacleSpawnTimer = 0;
// Helper function to draw text
function drawText(text, x, y, size, color) {
ctx.fillStyle = color || "white";
ctx.font = `${size}px Arial`;
ctx.fillText(text, x, y);
}
// Obstacle class
class Obstacle {
constructor(x, y, word) {
this.x = x;
this.y = y;
this.word = word;
this.width = word.length * 20;
this.height = 30;
this.color = "red";
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
drawText(this.word, this.x + 5, this.y + 22, 16, "white");
}
update(deltaTime) {
this.x -= 200 * (deltaTime / 1000);
}
}
// Handle player movement
function movePlayer() {
if (keys.w && player.y > 0) player.y -= player.speed;
if (keys.s && player.y + player.height < canvas.height) player.y += player.speed;
if (keys.a && player.x > 0) player.x -= player.speed;
if (keys.d && player.x + player.width < canvas.width) player.x += player.speed;
}
// Check collision
function checkCollision(player, obstacle) {
return (
player.x < obstacle.x + obstacle.width &&
player.x + player.width > obstacle.x &&
player.y < obstacle.y + obstacle.height &&
player.y + player.height > obstacle.y
);
}
// Game loop
function gameLoop(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update
movePlayer();
score += deltaTime / 1000;
obstacleSpawnTimer += deltaTime;
if (obstacleSpawnTimer > 2000) {
const randomWord = ["代码", "跑酷", "文字", "编程", "游戏"][Math.floor(Math.random() * 5)];
const randomY = Math.random() * (canvas.height - 60) + 30;
obstacles.push(new Obstacle(canvas.width, randomY, randomWord));
obstacleSpawnTimer = 0;
}
obstacles.forEach(obstacle => obstacle.update(deltaTime));
obstacles = obstacles.filter(obstacle => obstacle.x > -obstacle.width);
// Draw
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
obstacles.forEach(obstacle => {
obstacle.draw();
if (checkCollision(player, obstacle)) {
// End game if collision occurs
alert(`游戏结束！您的得分为：${Math.floor(score)}`);
obstacles = [];
score = 0;
player.x = 50;
player.y = canvas.height / 2;
}
});
// Update score display
document.getElementById("score").innerText = Math.floor(score);
requestAnimationFrame(gameLoop);
}
// Input detection
window.addEventListener("keydown", (e) => {
if (e.key.toLowerCase() in keys) keys[e.key.toLowerCase()] = true;
});
window.addEventListener("keyup", (e) => {
if (e.key.toLowerCase() in keys) keys[e.key.toLowerCase()] = false;
});
// Start game
gameLoop(0);
</script>
</body>
</html>
```
### 功能说明：
1. **横版卷轴游戏：** 玩家矩形（cyan）在画布上移动，文字障碍物从右向左滚动。
2. **WASD 键移动：** 按下 `W`（上）、`A`（左）、`S`（下）、`D`（右）可移动玩家。
3. **动态生成文字障碍物：** 障碍物为随机生成的中文词语，每过一段时间从右侧生成。
4. **碰撞检测：** 如果玩家与障碍物碰撞，则游戏结束并显示得分。
5. **计分器：** 按时间增长实时计分，分数显示在顶部。
### 样式亮点：
- 使用 **Tailwind CSS** 实现简洁美观的界面。
- 整体背景为深色，突出游戏区域。
你可以直接复制以上代码到本地保存为 `index.html`，并双击运行即可体验该应用。
以下是一个完整、功能齐全的单文件网页应用，名称为“单词记忆挑战”。它集成了卡片翻转游戏、随机单词生成、计时器机制以及实时计分器，并运用了 Bootstrap 美化页面。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词记忆挑战</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 900px;
margin: 50px auto;
}
.card {
cursor: pointer;
text-align: center;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #dee2e6;
font-size: 18px;
font-weight: bold;
color: #6c757d;
transition: transform 0.3s;
perspective: 1000px;
}
.card.flipped {
background-color: #0d6efd;
color: #fff;
}
.card.matched {
background-color: #198754;
color: #fff;
}
</style>
</head>
<body>
<div class="container text-center">
<h1 class="my-4">单词记忆挑战</h1>
<div class="d-flex justify-content-center mb-4">
<button id="startGame" class="btn btn-primary me-2">开始游戏</button>
<span class="btn btn-secondary me-2" id="timer">计时器: 0 秒</span>
<span class="btn btn-secondary" id="score">分数: 0</span>
</div>
<div id="gameContainer" class="card-container"></div>
</div>
<script>
// 单词对列表
const words = ["apple", "banana", "cat", "dog", "fish", "grape", "moon", "sun", "apple", "banana", "cat", "dog", "fish", "grape", "moon", "sun"];
// 游戏状态
let flippedCards = [];
let matchedPairs = 0;
let score = 0;
let streak = 0;
let timer = 0;
let interval;
// 开始游戏
function startGame() {
document.getElementById("gameContainer").innerHTML = "";
shuffleArray(words);
score = 0;
streak = 0;
matchedPairs = 0;
timer = 0;
clearInterval(interval);
interval = setInterval(() => {
timer += 1;
document.getElementById("timer").textContent = `计时器: ${timer} 秒`;
}, 1000);
renderGame();
document.getElementById("score").textContent = `分数: ${score}`;
}
// 洗牌算法
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// 渲染游戏卡片
function renderGame() {
const gameContainer = document.getElementById("gameContainer");
words.forEach((word, index) => {
const card = document.createElement("div");
card.classList.add("card");
card.dataset.word = word;
card.dataset.index = index;
card.textContent = "?";
card.addEventListener("click", () => flipCard(card));
gameContainer.appendChild(card);
});
}
// 卡片翻转操作
function flipCard(card) {
if (card.classList.contains("flipped") || card.classList.contains("matched")) return;
card.classList.add("flipped");
card.textContent = card.dataset.word;
flippedCards.push(card);
if (flippedCards.length === 2) {
// 检查是否匹配
const [card1, card2] = flippedCards;
if (card1.dataset.word === card2.dataset.word) {
matchedPairs++;
streak++;
score += 10 * streak; // 连击奖励
card1.classList.add("matched");
card2.classList.add("matched");
flippedCards = [];
if (matchedPairs === words.length / 2) {
setTimeout(() => {
alert(`恭喜！你完成了挑战！总分: ${score}，用时: ${timer} 秒`);
clearInterval(interval);
}, 500);
}
} else {
streak = 0; // 连击中断
score -= 5;
setTimeout(() => {
card1.classList.remove("flipped");
card2.classList.remove("flipped");
card1.textContent = "?";
card2.textContent = "?";
flippedCards = [];
}, 1000);
}
document.getElementById("score").textContent = `分数: ${score}`;
}
}
document.getElementById("startGame").addEventListener("click", startGame);
</script>
</body>
</html>
```
### 功能与机制说明
1. **卡片翻转游戏**：
- 点击卡片翻转它显示单词，匹配正确时变成绿色，否则翻回原样。
2. **随机生成**：
- 利用 Fisher-Yates 算法对单词数组进行随机洗牌，确保游戏局势每次不同。
3. **计时器机制**：
- 游戏开始后计时器每秒更新一次，显示在页面顶部。
4. **计分方式**：
- 匹配正确得分，默认每次得 10 分，有连击奖励。
- 连击奖励随着连续成功次数递增（例如，连续2次得分为 20 分，连续3次为 30 分）。
- 错误翻牌会扣减 5 分。
5. **页面美化**：
- 使用 Bootstrap 布局和组件，配以自定义样式让应用界面现代而简洁。
您可以直接将以上代码保存为 `.html` 文件后运行，即可体验游戏！
以下是一个完整的单文件 HTML 应用，名为“品牌拼图挑战”。应用提供拖拽拼图、限时完成机制，以及实时计分功能。通过自定义品牌配色美化，提供用户友好的界面。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌拼图挑战</title>
<style>
/* 自定义品牌配色 */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
color: #ff6f61;
margin-top: 20px;
}
#game-container {
position: relative;
width: 500px;
height: 500px;
border: 5px solid #ff6f61;
display: flex;
flex-wrap: wrap;
margin: 20px auto;
}
.puzzle-piece {
width: 100px;
height: 100px;
border: 1px solid #ccc;
cursor: grab;
}
.puzzle-piece.correct {
border-color: #28a745;
}
#score-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-size: 1.2rem;
margin-top: 10px;
}
#score {
font-weight: bold;
color: #28a745;
}
#timer {
font-weight: bold;
color: #dc3545;
}
button {
margin-top: 20px;
padding: 10px 15px;
font-size: 1rem;
border: none;
border-radius: 5px;
background-color: #ff6f61;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #ff4e4e;
}
</style>
</head>
<body>
<h1>品牌拼图挑战</h1>
<div id="score-container">
<div>分数: <span id="score">0</span></div>
<div>倒计时: <span id="timer">60</span>秒</div>
</div>
<div id="game-container"></div>
<button id="reset-button">重新开始</button>
<script>
const gameContainer = document.getElementById('game-container');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const resetButton = document.getElementById('reset-button');
let score = 0;
let timer = 60;
let interval;
// 初始化拼图块
const pieces = [
{ id: 0, img: 'https://via.placeholder.com/100/ff6f61', correctX: 0, correctY: 0 },
{ id: 1, img: 'https://via.placeholder.com/100/007bff', correctX: 100, correctY: 0 },
{ id: 2, img: 'https://via.placeholder.com/100/f4a261', correctX: 200, correctY: 0 },
{ id: 3, img: 'https://via.placeholder.com/100/43aa8b', correctX: 300, correctY: 0 },
{ id: 4, img: 'https://via.placeholder.com/100/ff6f61', correctX: 0, correctY: 100 },
{ id: 5, img: 'https://via.placeholder.com/100/007bff', correctX: 100, correctY: 100 },
{ id: 6, img: 'https://via.placeholder.com/100/f4a261', correctX: 200, correctY: 100 },
{ id: 7, img: 'https://via.placeholder.com/100/43aa8b', correctX: 300, correctY: 100 }
];
function randomizePieces() {
return pieces
.map(piece => ({ ...piece, random: Math.random() }))
.sort((a, b) => a.random - b.random)
.map(({ random, ...piece }) => piece);
}
function createPuzzle() {
const shuffledPieces = randomizePieces();
while (gameContainer.firstChild) gameContainer.removeChild(gameContainer.firstChild);
shuffledPieces.forEach(piece => {
const el = document.createElement('div');
el.style.backgroundImage = `url(${piece.img})`;
el.classList.add('puzzle-piece');
el.draggable = true;
el.addEventListener('dragstart', e => {
e.dataTransfer.setData('id', piece.id);
});
gameContainer.appendChild(el);
});
return shuffledPieces;
}
const updateTimer = () =>--....
帮助开发者快速从创意转化为功能齐全、可运行的网页游戏，加速项目启动，让想法无需等待。
为教学提供交互式游戏工具，只需简单输入模块和规则，即可生成具有教育娱乐双重功能的课程辅助工具。
实现活动宣传创意，生成吸引用户参与的网页小游戏，用于品牌推广或用户互动方案的实施。
只需定义页面样式和功能，即可快速生成视觉独特的游戏作品，轻松实现设计创意展示。
快速搭建游戏原型用于实验和数据收集，为用户行为研究提供便捷工具，缩短实验准备时间。
通过引导AI生成一个完整的单文件网页游戏应用，帮助用户轻松、高效地将创意转化为可运行的网页游戏原型。
将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期
