宇宙键盘
在单个 HTML 文件中生成一个交互式速打游戏,包含横向滚动游戏玩法和 Tailwind CSS 样式。
将此提示复制到我们的开发者 Console 中亲自尝试!
| 内容 | |
|---|---|
| 用户 | 请用单个 HTML 文件为我编写一个完整的 Web 应用程序。该应用程序应包含一个简单的横向滚动游戏,我可以使用 WASD 键在游戏中移动。在移动过程中,角色/精灵偶尔会遇到单词。遇到单词时,玩家必须尽快正确地输入该单词。输入单词的速度越快,玩家获得的分数就越多。我们应该在右上角设置一个计数器来记录分数。为了保持游戏的趣味性,单词应该是随机且高度可变的。 你应该让网站非常美观,并使用 Tailwind。 |
示例输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>横向滚动打字游戏</title>
</head>
<body class="bg-gray-900 text-white">
<div class="fixed top-4 right-4 text-2xl">
分数: <span id="score">0</span>
</div>
<div id="game" class="h-screen w-screen overflow-hidden relative">
<div
id="player"
class="absolute bottom-10 left-10 w-8 h-8 bg-blue-500"
></div>
</div>
<div
id="word-input"
class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white text-black p-4 rounded hidden"
>
<input
type="text"
id="typed-word"
class="border border-gray-300 rounded px-2 py-1 mb-2 w-full"
/>
<button id="submit-word" class="bg-blue-500 text-white px-4 py-2 rounded">
提交
</button>
</div>
<script>
const words = [
'能力',
'可以',
'关于',
'上面',
'接受',
'根据',
'帐户',
'穿过',
'行动',
'活动',
'实际上',
'地址',
'管理',
'承认',
'成人',
'影响',
'之后',
'再次',
'反对',
'机构',
'代理',
'以前',
'同意',
'协议',
'前面',
'空气',
'所有',
'允许',
'几乎',
'单独',
'沿着',
'已经',
'也',
'虽然',
'总是',
'美国人',
'其中',
'数量',
'分析',
'和',
'动物',
'另一个',
'回答',
'任何',
'任何人',
'任何事',
'出现',
'应用',
'方法',
'区域',
'争论',
'手臂',
'周围',
'到达',
'艺术',
'文章',
'艺术家',
'作为',
'询问',
'假设',
'在',
'攻击',
'注意',
'律师',
'观众',
'作者',
'权威',
'可用',
'避免',
'离开',
'婴儿',
'背部',
'坏',
'包',
'球',
'银行',
'酒吧',
'基础',
'是',
'打败',
'美丽',
'因为',
'变成',
'床',
'之前',
'开始',
'行为',
'背后',
'相信',
'好处',
'最好',
'更好',
'之间',
'超越',
'大',
'账单',
'十亿',
'一点',
'黑色',
'血液',
'蓝色',
'板',
'身体',
'书',
'出生',
'两个',
'盒子',
'男孩',
'打破',
'带来',
'兄弟',
'预算',
'建造',
'建筑',
'业务',
'但是',
'购买',
'通过',
'呼叫',
'相机',
'运动',
];
let score = 0;
let currentWord;
let startTime;
const game = document.getElementById('game');
const player = document.getElementById('player');
const wordInput = document.getElementById('word-input');
const typedWord = document.getElementById('typed-word');
const submitWord = document.getElementById('submit-word');
const scoreDisplay = document.getElementById('score');
let playerX = 10;
let playerY = game.offsetHeight - 50;
const speed = 5;
function placeWord() {
const word = document.createElement('div');
word.textContent = words[Math.floor(Math.random() * words.length)];
word.className = 'absolute text-2xl';
word.style.left = `${game.offsetWidth + 10}px`;
word.style.top = `${Math.random() * (game.offsetHeight - 50)}px`;
game.appendChild(word);
return word;
}
function checkCollision(word) {
const playerRect = player.getBoundingClientRect();
const wordRect = word.getBoundingClientRect();
return !(
playerRect.right < wordRect.left ||
playerRect.left > wordRect.right ||
playerRect.bottom < wordRect.top ||
playerRect.top > wordRect.bottom
);
}
function startInput(word) {
currentWord = word.textContent;
wordInput.style.display = 'block';
typedWord.value = '';
typedWord.focus();
startTime = Date.now();
}
function endInput() {
wordInput.style.display = 'none';
const endTime = Date.now();
const elapsedTime = endTime - startTime;
const timeBonus = Math.max(2000 - elapsedTime, 0);
score += Math.round(1000 + timeBonus);
scoreDisplay.textContent = score;
}
function checkInput() {
if (typedWord.value === currentWord) {
endInput();
}
}
function gameLoop() {
playerY = Math.max(
0,
Math.min(playerY, game.offsetHeight - player.offsetHeight)
);
playerX = Math.max(
0,
Math.min(playerX, game.offsetWidth - player.offsetWidth)
);
player.style.top = `${playerY}px`;
player.style.left = `${playerX}px`;
const words = Array.from(
document.querySelectorAll('#game > div:not(#player)')
);
words.forEach((word) => {
const currentLeft = parseInt(word.style.left);
word.style.left = `${currentLeft - speed}px`;
if (checkCollision(word)) {
startInput(word);
}
if (currentLeft < -word.offsetWidth) {
word.remove();
}
});
if (Math.random() < 0.01) {
placeWord();
}
requestAnimationFrame(gameLoop);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'w') playerY -= speed;
if (e.key === 'a') playerX -= speed;
if (e.key === 's') playerY += speed;
if (e.key === 'd') playerX += speed;
});
typedWord.addEventListener('input', checkInput);
submitWord.addEventListener('click', checkInput);
gameLoop();
</script>
</body>
</html>
API 请求
import anthropic
client = anthropic.Anthropic(
# 默认为 os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
model="claude-3-opus-20240229",
max_tokens=2000,
temperature=0,
messages=[
{
"role": "user",
"content": [
{
"type": "text",
"text": "请用单个 HTML 文件为我编写一个完整的 Web 应用程序。该应用程序应包含一个简单的横向滚动游戏,我可以使用 WASD 键在游戏中移动。在移动过程中,角色/精灵偶尔会遇到单词。遇到单词时,玩家必须尽快正确地输入该单词。输入单词的速度越快,玩家获得的分数就越多。我们应该在右上角设置一个计数器来记录分数。为了保持游戏的趣味性,单词应该是随机且高度可变的。\n \n你应该让网站非常美观,并使用 Tailwind。"
}
]
}
]
)
print(message.content)
![Do NOT Think That Much for 2+3=? On the Overthinking of o1-Like LLMs[不要过度思考2+3等于几 在类LLM的过度思考上]-AI论文](https://assh83.com/wp-content/uploads/2025/01/1-2-350x250.png)
![Slow Perception: Let’s Perceive Geometric Figures Step-by-step[缓慢感知：让我们逐步感知几何图形]-AI论文](https://assh83.com/wp-content/uploads/2025/01/1-1-350x250.png)
![Ensembling Large Language Models with Process Reward-Guided Tree Search for Better Complex Reasoning[结合大型语言模型与过程奖励引导的树搜索以提升复杂推理能力]-AI论文](https://assh83.com/wp-content/uploads/2025/01/1-350x248.png)
![Large Concept Models:Language Modeling in a Sentence Representation Space[大型概念模型：在句子表示空间中的语言建模]-AI论文](https://assh83.com/wp-content/uploads/2025/01/image-1-350x250.png)