Jotto est un jeu classique de dédouage des mots qui est antérieure aux jeux numériques modernes comme Wordle. J'ai choisi de recréer ce jeu parce que:
Contrairement à Wordle, Jotto se concentre uniquement sur la correspondance des lettres sans informations de position, ce qui en fait un autre type de défi déductif qui teste votre capacité à suivre et à éliminer les possibilités.
Tout au long de ce projet, j'ai découvert plusieurs techniques d'incitation efficaces lorsque je travaille avec un développeur AWS Q:
La décomposition de l'application en composants spécifiques avec des responsabilités claires a donné de meilleurs résultats:
Générez le shell d'une nouvelle application React pour un jeu de puzzle de mots appelé Jotto. Utilisez Vite pour la configurationCette invite initiale a établi la structure du projet et la pile technologique.
Lorsqu'ils sont confrontés à des problèmes avec la visibilité du texte, j'ai utilisé des descriptions de problèmes spécifiques:
Je ne vois pas les textes dans les lettres de supposition et de correspondanceCela a suscité des améliorations CSS ciblées plutôt qu'une refonte complète.
L'ajout de nouvelles fonctionnalités a été plus efficace lors de la description de l'expérience utilisateur plutôt que des détails de mise en œuvre:
Voulez-vous inclure un panneau qui explique comment fonctionne le jeu? il peut apparaître lorsqu'il est sélectionné par un nouvel utilisateurLorsque j'ai remarqué des problèmes d'utilisation, j'ai posé des questions directes sur des fonctionnalités spécifiques:
Vos suppositions devraient faire défiler automatiquement lorsqu'il y a un nouvel ajout, ne pensez-vous pas?Voulez-vous réparer le tracker de lettres? Cela ne m'aide pas efficacementCes invites ont conduit à des améliorations fonctionnelles ciblées plutôt qu'à de simples changements visuels.
Pour ce projet, j'ai utilisé un développeur AWS Q pour aider à divers aspects du développement. Cet outil m'a aidé:
Le développeur AWS Q s'est avéré particulièrement précieux pour le prototypage rapide des idées et la mise en œuvre des fonctionnalités qui auraient pris beaucoup plus de temps à coder manuellement. La capacité de l'outil à comprendre les mécanismes de jeu et à les traduire en code fonctionnel a considérablement accéléré le processus de développement.
Q Développeur a mis en œuvre des modèles de gestion de l'état React avec un crochet personnalisé (usejottogame) Cette logique de jeu encapsulée:
const usejottogame = () => {const [Secretword, setSecretword] = UseState (''); const [suppositions, setGuesses] = UseState ([]); const [matches, setmatches] = useState ([]); const [GameStatus, setGameStatus] = UseState («Playing»); // ... Autres variables d'état // Fonctions logiques de jeu const soumiguess = (deviner) => {if (gameStatus! == 'play') return; const normaliséGuess = deviner.tolowerCase (); const MatchCount = countmatchingtters (normaliséGuess, Secretword); SetGuesses ([... Guess, normalisé-buess]); setMatches ([... Matches, MatchCount]); SetAtTempts (tentatives + 1); // Vérifiez si le lecteur a gagné if (isCorrectGuess (normaliséGess, Secretword)) {const finalsCore = calculateCore (); setScore (finalscore); setGameStatus («won»); // Enregistrer le score élevé const newhighscore = {score: finalscore, word: secretword, tentatives: tentatives + 1, date: new Date (). Toisostring ()}; SaveHighscore (NewHighscore); } // Vérifiez si le joueur a perdu (a utilisé toutes les tentatives) else if (Tentatives + 1> = maxatTempts) {setGameStatus ('perdu'); }}; const startNewgame = () => {const newnetword = getRandomword (worthwords); setSecretWord (NewsCretword); setGuess ([]); setMatches ([]); setGameStatus («jouer»); SetAtTempts (0); setScore (0); }; // Retourne l'état et les fonctions return {Secretword, Guess, Matches, GameStatus, Tentatives, MaxAtTempts, Score, HighScore, SoumideGess, StartNewgame}; };Cette approche a séparé les préoccupations et a rendu la logique du jeu réutilisable.
L'algorithme de correspondance de lettres a été mis en œuvre efficacement:
Export const CountMatchingLetters = (deviner, Secretword) => {if (! Deviner ||! Secretword) Retour 0; const devinertters = nouveau set (deviner.tolowercase (). Split ('')); const Secrettters = nouveau set (Secretword.tolowerCase (). Split ('')); Soit MatchCount = 0; devinertters.ForEach (lettre => {if (sécrétaires.has (lettre)) {matchCount ++;}}); retour matchCount; };L'utilisation d'ensembles pour cette opération était une solution élégante qui gère correctement les règles de correspondance de Jotto. L'algorithme efficacement: