Créer un jeu web interactif de carte gratin

Introduction

Dans ce projet, nous vous guiderons tout au long du processus de création d'un jeu de cartes gratins simples basé sur le web. Ce jeu permet aux utilisateurs de gratter un revêtement gris pour révéler une image sous-jacente, qui sera soit un message "gagnant" soit un message "réessayez". Nous utiliserons HTML pour la structure, CSS pour la mise en forme et JavaScript pour l'interactivité.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer un projet web de base avec HTML, CSS et JavaScript
Comment manipuler le canevas HTML5 pour créer des effets interactifs
Comment utiliser JavaScript pour gérer les interactions de l'utilisateur telles que les clics et les déplacements de souris
Comment travailler avec des images dans le développement web, y compris le chargement et l'affichage dynamiques
Comment implémenter une logique de jeu simple qui décide aléatoirement le résultat pour l'utilisateur

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Démontrez une compréhension solide du canevas HTML5 et de ses capacités pour les jeux et les applications interactives basées sur le web
Montrez votre compétence dans l'utilisation de JavaScript pour créer du contenu dynamique et répondre aux entrées de l'utilisateur
Intégrez diverses technologies web pour créer une application web complète et fonctionnelle
Conceptez une interface utilisateur simple mais attrayante pour un jeu basé sur le web
Appliquez des concepts de développement de jeu de base tels que les résultats aléatoires et l'interaction de l'utilisateur

Créer la structure HTML

Dans cette étape, nous configurons la structure de base de la page web dans index.html, y compris la déclaration DOCTYPE, l'élément html et les sections head et body. Nous définissons l'ensemble des caractères en UTF-8 pour une reconnaissance universelle des caractères et configurons la vue pour une conception responsive, afin de s'assurer que notre application de cartes gratins ait une bonne apparence sur des appareils de tailles variables.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cartes gratins</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        Avez-vous de la chance? Essayez!
        <a href="#" onclick="window.location.reload()">Réessayez</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Dans le body, nous créons un élément div avec un id de "main" qui sert de conteneur pour notre application. Dans ce conteneur, nous incluons un div avec une classe de "msg" pour afficher un message amusant invitant l'utilisateur à tenter sa chance. Ce message inclut également un lien qui, lorsqu'il est cliqué, recharge la page, permettant aux utilisateurs de réessayer la carte gratin sans avoir à rafraîchir manuellement le navigateur.

Enfin, nous incluons un élément canvas où l'effet de carte gratin sera implémenté, et nous liens un fichier JavaScript externe nommé "main.js" où résidera la logique de notre application.

Cette structure HTML fournit la base nécessaire pour notre application de cartes gratins, en définissant les zones où le texte et la surface gratable seront affichés.

✨ Vérifier la solution et pratiquer

Mettre en forme le canevas

Dans le fichier JavaScript main.js, nous commençons par sélectionner l'élément canevas et en appliquant quelques styles initiaux.

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

Nous définissons la backgroundColor sur "transparent" pour vous assurer que l'arrière-plan du canevas ne cache pas une partie quelconque de la page web sur laquelle il est placé. En définissant la position sur "absolute", nous avons plus de flexibilité pour positionner le canevas par rapport à d'autres éléments si nécessaire.

Cette étape est cruciale pour préparer l'élément canevas, en vous assurant qu'il s'intègre parfaitement au reste de la conception de la page web et est prêt pour les éléments dynamiques que nous allons ajouter à l'étape suivante.

✨ Vérifier la solution et pratiquer

Charger l'image de grattage

Ici, nous chargeons une image aléatoire à utiliser comme arrière-plan de la carte gratin.

// Continuez dans main.js

// Tableau d'images possibles à révéler
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// Créez un nouvel objet Image et définissez la source
const img = new Image();
img.src = selectedImage;

// Une fois l'image chargée, ajustez la taille et l'arrière-plan du canevas
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

Nous créons un tableau nommé images contenant les noms de fichiers d'images possibles. Ensuite, nous sélectionnons aléatoirement une image de ce tableau en utilisant Math.floor(Math.random() * images.length).

Nous créons un nouvel objet Image et définissons sa source (src) sur l'image choisie. L'écouteur d'événements onload garantit que nous ne poursuivons le reste du script qu'une fois que l'image est entièrement chargée, évitant tout problème qui pourrait résulter de la tentative de manipuler une image qui n'a pas été complètement téléchargée.

Cette étape est cruciale pour la nature dynamique de la carte gratin, car elle introduit une variabilité et une surprise chaque fois que l'application est chargée ou actualisée. En chargeant une image aléatoire, nous simulons le résultat incertain d'une vraie carte gratin, améliorant l'expérience utilisateur.

✨ Vérifier la solution et pratiquer

Préparer la couche de grattage

Après avoir chargé l'image sélectionnée sur le canevas, nous devons préparer la couche de grattage. Cela se fait en recouvrant l'ensemble du canevas avec un rectangle gris. Cette couche grise sert de surface gratable avec laquelle l'utilisateur interagira pour révéler l'image en dessous.

// Continuez dans main.js

// Recouvrez le canevas avec un rectangle gris pour servir de couche de grattage
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// Préparez le canevas pour l'effet de grattage
ctx.globalCompositeOperation = "destination-out";

Dans cette étape, nous définissons le style de remplissage en gris et dessinons un rectangle couvrant l'ensemble du canevas, créant une couche de grattage sur l'image sélectionnée. Le globalCompositeOperation défini sur "destination-out" garantit que tout nouveau dessin sur le canevas rendra les couches sous-jacentes transparentes, permettant de révéler l'image en dessous là où l'utilisateur gratte.

✨ Vérifier la solution et pratiquer

Créer la fonction de grattage

Pour implémenter l'effet de grattage, nous définissons une fonction draw qui sera appelée chaque fois que l'utilisateur interagit avec le canevas. Cette fonction vérifie si l'utilisateur est en train de dessiner (drapeau isDrawing) puis calcule la position du curseur ou du toucher par rapport au canevas. Elle trace ensuite un cercle à cette position avec une opération de composition qui rend la couche grise transparente, révélant l'image en dessous.

// Continuez dans main.js

let isDrawing = false;

// Définissez la fonction pour simuler le grattage
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // Tracez un cercle à la position du curseur ou du toucher
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

Cette fonction vérifie tout d'abord que le drapeau isDrawing est vrai, ce qui indique que l'utilisateur a initié une action de grattage. Elle calcule ensuite la position exacte où le grattage se produit et trace un cercle à cette position, effaçant ainsi la couche grise pour révéler des parties de l'image sous-jacente.

✨ Vérifier la solution et pratiquer

Ajouter des écouteurs d'événements pour les actions de grattage

Enfin, nous devons détecter quand l'utilisateur effectue des actions sur le canevas pour déclencher l'effet de grattage.

// Continuez dans main.js

  // Ecouteurs d'événements pour gérer les interactions souris et tactile
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

Nous ajoutons des écouteurs d'événements pour mousedown, mousemove, mouseup, touchstart, touchmove et touchend. Ces écouteurs définissent le drapeau isDrawing et appellent la fonction draw en conséquence pour créer un effet de grattage interactif.

Lorsque l'utilisateur appuie sur le bouton de la souris ou touche l'écran (mousedown ou touchstart), nous définissons isDrawing sur vrai et commençons à suivre leur mouvement pour créer l'effet de grattage. Lorsqu'ils relâchent le bouton ou cessent de toucher l'écran (mouseup ou touchend), nous définissons isDrawing sur faux, arrêtant l'action de grattage. Les événements mousemove et touchmove continuent d'appeler la fonction draw tant que isDrawing est vrai, permettant à l'utilisateur de gratter la couche grise et de révéler l'image en dessous lorsqu'ils déplacent leur souris ou leur doigt sur le canevas.

Pour voir les effets suivants, cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE, et basculez vers l'onglet "Web 8080".

✨ Vérifier la solution et pratiquer

Résumé

Dans ce projet, nous avons créé un jeu de carte gratin simple où les utilisateurs peuvent gratter une couche pour révéler un message caché. Nous avons configuré la structure HTML, initialisé le canevas en JavaScript, chargé et affiché des images, et implémenté l'effet de grattage à l'aide de l'API du canevas. Ce projet peut être un ajout amusant aux pages web et peut être étendu de diverses manières, comme en ajoutant plus d'images, en améliorant la conception ou en l'intégrant dans un jeu plus grand.

Créer un jeu web de carte gratin

Introduction

👀 Aperçu

🎯 Tâches

🏆 Réalisations

Créer la structure HTML

Mettre en forme le canevas

Charger l'image de grattage

Préparer la couche de grattage

Créer la fonction de grattage

Ajouter des écouteurs d'événements pour les actions de grattage

Résumé