Utilisez HTML pour créer un jeu de préparation de crêpes

Au lieu d'attendre passivement l'arrivée de 35 personnes, les personnes bien établies dans l'industrie devraient prendre l'initiative d'explorer des emplois secondaires et mettre en œuvre un jeu de préparation de crêpes HTML, combinant méthodes traditionnelles et technologie moderne, et s'engager à préparer des crêpes délicieuses et savoureuses. crêpes créatives.

introduction

Introduction

Dans cet article, nous expliquerons comment utiliser HTML, CSS et JavaScript pour créer un jeu intéressant de préparation de crêpes. Les crêpes sont un mets traditionnel chinois. Dans le jeu, les joueurs doivent simuler la préparation de crêpes pour obtenir des scores élevés. Nous commencerons par réaliser une interface de jeu, ajouterons progressivement des fonctions interactives, et enfin réaliserons un mini-jeu complet. De plus, nous partagerons également quelques conseils et expériences pour optimiser et faire évoluer le jeu. Même les débutants peuvent suivre les étapes décrites dans cet article pour créer facilement un jeu unique et découvrir le plaisir de créer des jeux.

Contexte du jeu

Dans cette société moderne au rythme effréné, les gens sont souvent occupés par des choses insignifiantes et il est difficile de trouver un moment de détente et de plaisir. Afin de réduire le stress et de permettre aux gens de retrouver leur amour pour la nourriture, l'ensemble du processus de fabrication des crêpes peut être reproduit sur la page Web en utilisant des technologies telles que HTML, CSS et JavaScript. Dans le jeu, les joueurs joueront le rôle d'un « maître des crêpes » et devront apprendre à maîtriser la quantité de farine et le temps nécessaire pour étaler des crêpes parfaites. La difficulté du jeu augmentera progressivement et les joueurs devront continuellement améliorer leurs compétences et viser des scores plus élevés.

Grâce à ce petit jeu, nous espérons apporter de la joie et du défi aux joueurs, et permettre à chacun de ressentir à nouveau le plaisir de préparer de la nourriture. Ce jeu de préparation de crêpes sera un choix amusant aussi bien pour les chefs professionnels que pour les personnes intéressées par les crêpes.

Matériel et outils nécessaires

Les bases du HTML

Pour maîtriser les connaissances de base du HTML, vous pouvez partir des aspects suivants :

1. Qu'est-ce que le HTML : définition, rôle et contexte historique du HTML.

2. Structure du HTML : La structure de base du HTML, y compris le type de document, le rôle de la tête et du corps, etc.

3. Balises de texte HTML : balises de texte HTML, qui sont des éléments et des balises HTML, tels que des paragraphes, des titres, des listes, des liens, etc. Expliquez comment écrire du code HTML pour implémenter ces balises.

4. Balise d'image HTML : comment HTML intègre les images et découvrez certaines propriétés et utilisations de la balise img.

5. Balises de tableau HTML : comment utiliser HTML pour créer des tableaux, y compris l'utilisation des balises table, tr, th, td et autres.

6. Balisage de formulaire HTML : comment utiliser HTML pour créer un formulaire, y compris l'utilisation de formulaire, d'entrée, de zone de texte et d'autres balises, vous pouvez bien comprendre l'utilisation de certains contrôles de formulaire courants.

7. Balisage de style HTML : comment utiliser CSS pour styliser le HTML.

Grâce à l'étude des aspects ci-dessus, vous pouvez comprendre les connaissances de base du HTML, maîtriser la structure de base et le langage de balisage du HTML et implémenter des pages HTML simples.

Styles CSS

Pour maîtriser les bases du CSS, vous pouvez partir des aspects suivants :

1. Qu'est-ce que CSS : définition, rôle et contexte historique du CSS.

2. Trois façons d'écrire des styles CSS : l'utilisation, les avantages et les inconvénients des feuilles de style internes CSS, des feuilles de style externes et des feuilles de style en ligne.

3. Sélecteurs CSS : types et utilisation des sélecteurs CSS, y compris les sélecteurs de balises, les sélecteurs d'ID, les sélecteurs de classe, les sélecteurs d'attributs, les sélecteurs de pseudo-classe, etc.

4. Styles CSS : types et utilisation des styles CSS, y compris les styles de texte, les styles de police, les styles d'arrière-plan, les styles de bordure, les styles flottants, les styles de positionnement, etc.

5. Modèle de boîte CSS : concepts et composants du modèle de boîte CSS, et comment mettre en page des pages HTML via le modèle de boîte.

6. Cascade et héritage CSS : expliquez les mécanismes de cascade et d'héritage de CSS, et comment utiliser ces mécanismes pour améliorer la réutilisabilité des styles et optimiser le code CSS.

7. Conception réactive : comment utiliser les requêtes multimédias CSS et la mise en page élastique pour mettre en œuvre une conception réactive afin de s'adapter à différents appareils et tailles d'écran.

Grâce à l'étude des aspects ci-dessus, vous pouvez comprendre les connaissances de base du CSS, maîtriser la méthode d'écriture et les règles grammaticales de base des styles CSS et implémenter des définitions de style CSS simples.

Programmation JavaScript

Pour maîtriser les bases de JavaScript, vous pouvez partir des aspects suivants :

1. Qu'est-ce que JavaScript : définition, rôle et historique de JavaScript.

2. Syntaxe de base de JavaScript : règles de syntaxe JavaScript, comprenant des concepts de base tels que les déclarations de variables, les types de données, les opérateurs, les instructions conditionnelles, les instructions de boucle, etc.

3. Fonctions JavaScript : définition et utilisation de fonctions en JavaScript, y compris les paramètres de fonction, les valeurs de retour, les étendues, etc. Il peut également expliquer l'écriture de certaines fonctions intégrées et fonctions personnalisées courantes.

4. Tableaux et objets JavaScript : concepts et utilisation des tableaux et des objets en JavaScript, y compris le parcours, l'ajout, la suppression et le tri des tableaux, les propriétés et méthodes des objets, etc.

5. Opérations JavaScript DOM : comment utiliser JavaScript pour manipuler des éléments dans des documents HTML, notamment obtenir des éléments, modifier les attributs d'éléments, ajouter des écouteurs d'événements, etc.

6. Gestion des erreurs en JavaScript : types d'erreurs courants et mécanismes de gestion des erreurs en JavaScript, et comment utiliser les instructions try...catch pour détecter et gérer les erreurs.

7. Programmation asynchrone en JavaScript : le modèle de programmation asynchrone en JavaScript, y compris les fonctions de rappel, Promise, async/await, etc., et comment gérer les opérations asynchrones et éviter l'enfer des rappels.

8. Modularisation JavaScript : le concept et l'utilisation de la modularisation JavaScript, y compris la syntaxe modulaire ES6 et les outils modulaires couramment utilisés tels que Webpack, Babel, etc.

Grâce à l'introduction des aspects ci-dessus, vous pouvez comprendre les connaissances de base de JavaScript, maîtriser la syntaxe de base et les fonctions courantes de JavaScript et être capable d'écrire des programmes JavaScript simples.

Construire une interface de jeu

Créer un fichier HTML

Le HTML est la base des pages Web. Pour créer un jeu de préparation de crêpes, vous devez d'abord créer un fichier HTML. Ensuite, nous présenterons comment créer un fichier HTML et du code de base.

1. Créer un nouveau fichier HTML
   Ouvrez l'éditeur et créez une nouvelle page.

2. Ajout de code de modèle HTML
   Le code de modèle HTML est une structure de fichier HTML standard, comprenant les balises DOCTYPE, html, head et body. Ce qui suit est un code de modèle HTML de base :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>摊煎饼小游戏</title>
  </head>
  <body>
    <!-- 在这里加入页面内容 -->
  </body>
</html>

3. Ajouter du contenu de page
   Vous pouvez ajouter du contenu de page à l'intérieur de la balise body. Selon les exigences du jeu de fabrication de crêpes, des éléments tels que des écrans de jeu et les boutons de commande associés doivent être ajoutés. Voici un exemple de code simple :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>摊煎饼小游戏</title>
  </head>
  <body>
    <h1>欢迎来到摊煎饼小游戏</h1>
    <div id="pancake"></div>
    <button id="flip">翻转</button>
    <button id="stack">叠加</button>
    <script src="game.js"></script>
  </body>
</html>

Dans ce code, nous avons ajouté une h1étiquette pour afficher le titre du jeu, un pancakeélément div avec un identifiant pour afficher les crêpes et deux boutons pour les opérations du joueur. Il convient de noter que nous avons également ajouté une balise script dans la balise body et introduit un fichier JavaScript nommé game.js.

À ce stade, la création du fichier HTML et l’écriture de la partie de base du code sont terminées. Ensuite, vous devez utiliser des styles CSS et du code JavaScript pour implémenter les fonctions spécifiques du jeu.

Configurer le canevas de jeu

La configuration du canevas du jeu en HTML nécessite l'utilisation de la balise canvas. Voici un exemple de code qui configure le canevas du jeu

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>摊煎饼小游戏</title>
    <style>
      #gameCanvas {
    
    
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到摊煎饼小游戏</h1>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <script src="game.js"></script>
  </body>
</html>

Dans le code ci-dessus, un élément of est ajouté idcomme gameCanvascanevas canvasde jeu. En définissant ses propriétés widthet height, vous pouvez déterminer la taille du canevas. canvasDans le même temps, certains styles simples tels que les bordures sont également ajoutés.

Dans cet exemple, canvasdéfinissez la largeur sur 400 pixels et la hauteur sur 300 pixels. Les développeurs peuvent ajuster ces valeurs en fonction de la configuration de votre jeu.

Vous pouvez ensuite utiliser JavaScriptdu code pour dessiner des crêpes sur la toile, contrôler la logique du jeu, etc. Les fichiers de l'exemple de code ci-dessus doivent game.jsêtre liés aux emplacements appropriés afin d'ajouter les fonctionnalités spécifiques du jeu.

Concevoir des éléments de crêpes

Dans la section précédente, un élément canevas avec l'ID gameCanvas a été créé pour dessiner le canevas du jeu. Ensuite, vous écrirez du code JavaScript dans le fichier game.js pour dessiner l'élément pancake.

// 获取canvas元素和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 绘制摊煎饼的函数
function drawPancake() {
    
    
  ctx.beginPath();
  ctx.arc(200, 150, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'brown';
  ctx.fill();

  ctx.beginPath();
  ctx.arc(185, 130, 8, 0, Math.PI * 2);
  ctx.arc(215, 130, 8, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();

  ctx.beginPath();
  ctx.arc(185, 120, 5, 0, Math.PI * 2);
  ctx.arc(215, 120, 5, 0, Math.PI * 2);
  ctx.fillStyle = 'black';
  ctx.fill();
}

// 调用绘制摊煎饼的函数
drawPancake();

Utilisez d’abord pour document.getElementByIdobtenir l’ élément et utilisez pour obtenir le contexte du dessin. Ensuite une fonction est définie pour dessiner la forme de la crêpe.IDgameCanvascanvasgetContext('2d')canvas的2DdrawPancake

À l'intérieur drawPancakede la fonction, une méthode est utilisée beginPathpour commencer à créer un chemin, et arcune méthode est utilisée pour dessiner une crêpe circulaire et définir la couleur et le style de remplissage. En appelant plusieurs fois arcdes méthodes et des méthodes, des détails tels que des crêpes peuvent être dessinés.fill

Enfin, à la fin du code une fonction est appelée drawPancakepour effectuer l'opération de dessin.

Avec le code ci-dessus, une simple forme de crêpe peut être dessinée sur la toile du jeu.

Ajouter une interaction de jeu

Surveiller les opérations des utilisateurs

Écrivez du code JavaScript pour implémenter la logique du jeu de propagation des crêpes. Dans ce jeu, le joueur doit contrôler une spatule pour se déplacer d'avant en arrière sur l'écran, et appuyer sur la barre d'espace pour retourner la crêpe au moment approprié.

// 获取游戏画布和上下文
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

// 定义变量
let position = canvas.width / 2; // 煎饼位置
let velocity = 0; // 煎饼速度
let flipped = false; // 是否已经翻面

// 监听键盘事件
document.addEventListener('keydown', event => {
    
    
  if (event.code === 'Space') {
    
    
    flip();
  }
});

// 翻转煎饼
function flip() {
    
    
  if (!flipped) {
    
    
    velocity = -10;
    flipped = true;
  }
}

// 更新游戏状态
function update() {
    
    
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制煎饼
  ctx.fillStyle = '#de9967';
  ctx.fillRect(position - 25, canvas.height - 75, 50, 50);

  // 更新煎饼位置和速度
  position += velocity;
  velocity += 1;

  // 判断煎饼是否落地
  if (canvas.height - 75 < 0) {
    
    
    velocity = 0;
    flipped = false;
    position = canvas.width / 2;
  }

  // 循环更新游戏状态
  requestAnimationFrame(update);
}

// 开始游戏
update();

Dans le JavaScriptcode ci-dessus, l'élément canevas et l'objet contextuel sont d'abord obtenus, et certaines variables sont définies pour enregistrer la position, la vitesse, l'état de retournement et d'autres informations de la crêpe. Ensuite, il écoute les événements du clavier et appelle une fonction pour retourner la crêpe lorsque l'utilisateur appuie sur la barre d'espace flip.

À l'intérieur updatede la fonction, utilisez d'abord clearRectla méthode pour effacer le canevas et utilisez fillRectla méthode pour dessiner la forme de la crêpe. Ensuite, la position et la vitesse de la crêpe sont mises à jour, et si l'état du jeu doit être réinitialisé, il est déterminé en jugeant si la crêpe a atterri.

Enfin, utilisez requestAnimationFramela méthode pour mettre à jour l'état du jeu en boucle pour obtenir l'effet de mise à jour dynamique de l'écran.

Implémenter une animation de propagation de crêpes

Dans chaque image, la toile doit d'abord être dégagée, puis la position de la crêpe doit être redessinée. Cela garantit que seul le dernier état des crêpes est affiché sur le canevas pour obtenir des effets d'animation.

// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制煎饼
ctx.fillStyle = '#de9967';
ctx.fillRect(position - 25, canvas.height - 75, 50, 50);

Utilisez clearRectla méthode pour effacer le canevas. Cette méthode reçoit quatre paramètres : la coordonnée x du coin supérieur gauche, la coordonnée y du coin supérieur gauche et la largeur et la hauteur effacées. Utilisez ensuite fillRectla méthode pour redessiner la position de la crêpe.

Grâce aux étapes ci-dessus, vous pouvez obtenir l'effet d'animation des crêpes. Dans chaque image, mettez à jour l'état de la crêpe, effacez la toile et redessinez la position de la crêpe. Répétez ce processus pour obtenir un effet d'animation de crêpe fluide.

Calculer le score et la fin du jeu

Le score du joueur est égal à la hauteur de l'atterrissage de la crêpe. Nous pouvons calculer le score lorsque la crêpe touche le sol et afficher le score sur l'écran.

// 计算得分
if (position + 25 >= canvas.height) {
    
    
    score = Math.floor((canvas.height - 75 - position) / 10);
    isGameOver = true;
}

// 显示得分
if (isGameOver) {
    
    
    ctx.font = 'bold 30px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(`得分: ${
    
    score}`, canvas.width / 2, canvas.height / 2);
}

Dans le code ci-dessus, il est déterminé si le jeu est terminé en jugeant si la position de la crêpe atteint le bas de la toile, et le score du joueur est calculé. Si le jeu est terminé, utilisez fillTextla méthode pour afficher le résultat du score au centre de l'écran.

Game Over
Lorsque le joueur marque, le jeu est terminé et nous devons arrêter la boucle de jeu et donner la possibilité de redémarrer la partie.

// 结束游戏
if (isGameOver) {
    
    
    cancelAnimationFrame(gameLoop);
    const restartBtn = document.createElement('button');
    restartBtn.innerText = '重新开始';
    restartBtn.addEventListener('click', () => location.reload());
    document.body.appendChild(restartBtn);
}

Utilisez cancelAnimationFrameune méthode pour arrêter la boucle du jeu et créez un bouton pour redémarrer le jeu. Lorsque le joueur clique sur ce bouton, la page se recharge et le jeu peut recommencer.