Bibliothèque de prompts
Cosmic Keystrokes
Bibliothèque de prompts
Cosmic Keystrokes
Générez un jeu de frappe rapide interactif dans un seul fichier HTML, avec un gameplay à défilement latéral et un style Tailwind CSS.
Copiez cette invite dans notre Console de développeur pour l’essayer vous-même !
| Contenu | |
|---|---|
| Utilisateur | Écrivez-moi une application web complète dans un seul fichier HTML. L’application devrait contenir un jeu simple à défilement latéral où j’utilise WASD pour me déplacer. En se déplaçant dans le monde, le personnage/sprite rencontrera occasionnellement des mots. Quand un mot est rencontré, le joueur doit taper le mot correctement le plus rapidement possible. Plus le mot est tapé rapidement avec succès, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour garder une trace des points. Les mots devraient être aléatoires et très variables pour garder le jeu intéressant. Vous devriez rendre le site web très esthétique et utiliser Tailwind. |
Exemple de sortie
<!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>Jeu de frappe à défilement latéral</title>
</head>
<body class="bg-gray-900 text-white">
<div class="fixed top-4 right-4 text-2xl">
Score: <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">
Soumettre
</button>
</div>
<script>
const words = [
'capacité',
'capable',
'environ',
'au-dessus',
'accepter',
'selon',
'compte',
'à travers',
'action',
'activité',
'réellement',
'adresse',
'administration',
'admettre',
'adulte',
'affecter',
'après',
'encore',
'contre',
'agence',
'agent',
'il y a',
'accepter',
'accord',
'devant',
'air',
'tout',
'permettre',
'presque',
'seul',
'le long de',
'déjà',
'aussi',
'bien que',
'toujours',
'américain',
'parmi',
'montant',
'analyse',
'et',
'animal',
'un autre',
'réponse',
'n'importe quel',
'n'importe qui',
'n'importe quoi',
'apparaître',
'appliquer',
'approche',
'zone',
'argumenter',
'bras',
'autour',
'arriver',
'art',
'article',
'artiste',
'comme',
'demander',
'supposer',
'à',
'attaquer',
'attention',
'avocat',
'public',
'auteur',
'autorité',
'disponible',
'éviter',
'loin',
'bébé',
'retour',
'mauvais',
'sac',
'balle',
'banque',
'bar',
'base',
'être',
'battre',
'beau',
'parce que',
'devenir',
'lit',
'avant',
'commencer',
'comportement',
'derrière',
'croire',
'avantage',
'meilleur',
'mieux',
'entre',
'au-delà',
'grand',
'facture',
'milliard',
'peu',
'noir',
'sang',
'bleu',
'conseil',
'corps',
'livre',
'né',
'tous les deux',
'boîte',
'garçon',
'casser',
'apporter',
'frère',
'budget',
'construire',
'bâtiment',
'entreprise',
'mais',
'acheter',
'par',
'appeler',
'caméra',
'campagne',
];
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>
Requête API
Claude 3 Opus arrive bientôt sur l’API Bedrock