Jeu de devinette de nombre.

• Concept : Le jeu génère un nombre aléatoire, et le joueur doit le deviner en un nombre limité de tentatives.
• Technologies : Utilisez JavaScript pour la logique du jeu, HTML pour la structure, et CSS pour le style.
• Compétences apprises : Manipulation du DOM, événements JavaScript, conditions.

Je vais vous guider à travers la création d'un jeu de devinette de nombre simple, étape par étape.
Ce jeu générera un nombre aléatoire entre 1 et 100, et le joueur aura pour tâche de le deviner.
Voici comment procéder :

Étape 1: La structure HTML

Tout d'abord, créez la structure de base de votre jeu dans un fichier HTML nommé index.html.
La structure de base du jeu comporte un champ d'entrée pour les suppositions, un bouton pour soumettre la supposition et un paragraphe pour afficher le résultat.

Étape 2: Styling avec CSS

Ensuite, ajoutez du style à votre jeu dans un fichier CSS séparé nommé style.css.
Un styles simples pour rendre le jeu un peu plus attrayant.

Étape 3: Logique du Jeu en JavaScript

Maintenant, le cœur du jeu. Créez un fichier script.js pour y mettre la logique du jeu.

• Génération d'un nombre aléatoire: Math.random() génère un nombre aléatoire entre 0 et 1, que nous multiplions par 100 et arrondissons vers le bas pour obtenir un nombre entier entre 1 et 100.
• Sélection des éléments du DOM: Nous utilisons document.getElementById pour sélectionner les éléments HTML que nous allons manipuler avec JavaScript.
• Vérification de la supposition: La fonction checkGuess compare la supposition de l'utilisateur avec le nombre aléatoire et affiche un message approprié.
• Écouteur d'événements: addEventListener est utilisé pour déclencher la fonction de vérification lorsque l'utilisateur clique sur le bouton "Deviner!".

Ajoute tes fichiers javascript et css dans ton fichier html à l'aide de liens vers les fichiers sources.

C'est tout! Avec ces trois étapes, vous avez créé un simple jeu de devinette de nombre. Vous pouvez toujours étendre ce projet de base en ajoutant des fonctionnalités telles que le suivi du nombre de tentatives ou en mettant en place une limite de tentatives.

Jeu du pierre, papier, ciseaux

Créons ensemble un jeu de Pierre-Papier-Ciseaux.
Ce jeu classique oppose deux joueurs qui choisissent entre pierre, papier ou ciseaux.

Les règles sont simples : la pierre bat les ciseaux, les ciseaux battent le papier, et le papier bat la pierre. Voici comment vous pouvez procéder, étape par étape :

Étape 1: Structure HTML

Tout d'abord, créez la structure de base de votre jeu dans un fichier HTML nommé index.html.

Étape 2: Logique du Jeu en JavaScript

Enfin, ajoutez la logique de jeu dans un fichier JavaScript (script.js).

Étape 3: Inventer la partie CSS

Invente les propriétés CSS qui correspondent aux images ci dessous.

Jeu du Memory Card Game.

Créons ensemble un Memory Card Game simple.
Ce jeu consiste à trouver des paires de cartes identiques parmi un ensemble de cartes disposées face cachée.
Voici comment vous pouvez procéder, étape par étape :

Étape 1: Structure HTML

Commencez par définir la structure de base de votre jeu dans un fichier HTML.
Un plateau de jeu vide où les cartes seront générées dynamiquement.

Étape 3: Logique du Jeu en JavaScript

Dans cette structure, nous avons un titre et une section qui servira de plateau de jeu (gameBoard) où toutes les cartes seront placées.

Étape 2: Styling avec CSS

Ensuite, stylisez votre jeu dans un fichier CSS séparé (style.css).
Styles pour le plateau de jeu et les cartes. Les cartes retournées changent de couleur pour indiquer qu'elles sont face visible.

Ce CSS définit le style de base du jeu, avec un plateau de jeu qui affiche les cartes en flexbox, et un style de base pour les cartes.

Étape 3: Logique du Jeu en JavaScript

Enfin, ajoutez la logique de jeu dans un fichier JavaScript (script.js).

• Initialisation : Au chargement du document, le plateau de jeu est créé avec des cartes mélangées.
• Fonction shuffleArray : Mélange les valeurs des cartes pour que le jeu soit différent à chaque fois.
• Fonction createBoard : Crée les cartes et les ajoute au plateau de jeu. Chaque carte est un div avec une classe card et une valeur attribuée.
• Fonction flipCard : Gère le retournement des cartes. Empêche le retournement d'autres cartes si deux sont déjà retournées et pas encore vérifiées.
• Fonction checkForMatch : Vérifie si deux cartes retournées ont la même valeur.
• Fonction disableCards : Désactive les cartes correspondantes en retirant leur écouteur d'événements, les laissant face visible.
• Fonction unflipCards : Si les cartes ne correspondent pas, elles sont retournées face cachée après un court délai.
• Fonction resetBoard : Réinitialise l'état du plateau après chaque tentative.

Evolutions du jeu.

Ceci vous donne un jeu de Memory fonctionnel. Vous pouvez élargir ce concept de base en ajoutant des scores, des niveaux de difficulté, ou en modifiant le thème visuel des cartes.

Jeu de tire en Javascript, HTML, CSS.

Lien vers la création d'un jeu de tir en javascript : https://www.youtube.com/watch?v=DAB26mn3HF4