プロンプトライブラリ
Cosmic Keystrokes
単一のHTMLファイルで、サイドスクロールのゲームプレイとTailwind CSSのスタイリングを備えたインタラクティブなスピードタイピングゲームを生成します。
このプロンプトを開発者コンソールにコピーして、自分で試してみてください!
コンテンツ | |
---|---|
ユーザー | 単一の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>