Click here for free DL of the app version that can save data.

No:16688

107

←

Prev Next

→

A baking game of bake pastries and serving custome..ALL
Developer User7368｜Date and time 23/9/20 4:43:41
Build time 34.504 sec｜Game capacity 3.632KB｜

Script

Sure! Here's a simple baking game where you can bake pastries and serve customers using pictograms. This implementation uses HTML, JavaScript, and CSS to create a single HTML file. Please find the code below:

Baking Game

Bake Pastries and Serve Customers

Customers

In this game, you'll see an oven with a "Bake" button. Clicking the "Bake" button will randomly select a pastry from the available options (Croissant, Cupcake, and Donut). After a few seconds, customers will appear, and you need to click on the correct pastry that matches the one baked in the oven. Please note that you'll need to replace the image URLs in the code with actual pictogram images for "emozi_all/pictogram.png", "emozi_all/croissant.png", "emozi_apple.png", and "emozi_bear.png" to make it work. Also, make sure to have those images in the same folder as the HTML file. Hope you enjoy playing this baking game!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Baking Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    .pastry {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
    
    #oven {
      width: 252px;
      height: 200px;
      background-color: #FFDAB9;
      border: 3px solid #CD853F;
      margin: 0 auto;
      padding-top: 20px;
    }
    
    #customers {
      text-align: center;
      margin-top: 20px;
    }
    
    #feedback {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Baking Game</h1>
  
  <h2>Bake Pastries and Serve Customers</h2>
  
  <div id="oven">
    <img id="pastryImage" src="" alt="Pastry" class="pastry">
    <p id="pastryName"></p>
    <button onclick="startBaking()">Bake</button>
  </div>
  
  <div id="customers">
    <h3>Customers</h3>
    <img id="customer1" src="customer.png" alt="Customer" class="pastry">
    <img id="customer2" src="customer.png" alt="Customer" class="pastry">
    <img id="customer3" src="customer.png" alt="Customer" class="pastry">
  </div>
  
  <div id="feedback"></div>
  
  <script>
    // List of pastries available for baking
    const pastries = [
      {
        name: "Croissant",
        image: "croissant.png"
      },
      {
        name: "Cupcake",
        image: "cupcake.png"
      },
      {
        name: "Donut",
        image: "donut.png"
      }
    ];
    
    // Function to randomly select a pastry from the list
    function getRandomPastry() {
      const randomIndex = Math.floor(Math.random() * pastries.length);
      return pastries[randomIndex];
    }
    
    // Function to start the baking process
    function startBaking() {
      const pastry = getRandomPastry();
      
      document.getElementById("pastryImage").src = pastry.image;
      document.getElementById("pastryName").textContent = pastry.name;
      
      document.getElementById("feedback").textContent = "Baking a " + pastry.name + "...";
      
      setTimeout(serveCustomers, 3000);
    }
    
    // Function to serve customers after baking
    function serveCustomers() {
      const customers = document.querySelectorAll("#customers img");
      
      customers.forEach((customer) => {
        const pastry = getRandomPastry();
        
        customer.src = pastry.image;
        customer.alt = pastry.name;
        
        customer.onclick = function() {
          if (customer.alt === document.getElementById("pastryName").textContent) {
            document.getElementById("feedback").textContent = "Correct! Enjoy your pastry!";
            customer.onclick = null;
          } else {
            document.getElementById("feedback").textContent = "Oops! Wrong pastry. Try again!";
          }
        };
      });
    }
  </script>
</body>
</html>
```

Please note that you'll need to replace the image URLs in the code with actual pictogram images for "customer.png", "croissant.png", "cupcake.png", and "donut.png" to make it work. Also, make sure to have those images in the same folder as the HTML file.

Hope you enjoy playing this baking game!