Touch a egg to hatch into a duck's game

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

No:20946

←

Prev Next

→

Touch a egg to hatch into a duck
Developer User9100｜Date and time 23/10/12 7:16:05
Build time 50.479 sec｜Game capacity 2.084KB｜

Script

Sure! Here's an implementation of a simple game where you can touch an egg to hatch it into a duck. The game is implemented in a single HTML file and enclosed in script tags using JavaScript. It is optimized for smartphone operation and uses pictograms for a better user experience.

In this game, you'll see an egg pictogram displayed on the screen. When you touch/click the egg, it will hatch into a duck pictogram. The egg image is initially visible, while the duck image is hidden. When you touch the egg, the JavaScript code will trigger and hide the egg image while showing the duck image. You can replace the `"emozi_all/egg.png"` and `"emozi_all/duck.png"` with your own image filenames to customize the appearance of the egg and duck images. Note: Make sure to save the egg and duck image files (with the specified filenames or replace the filenames in the code accordingly) in the same directory as the HTML file for them to be displayed correctly.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #egg {
      width: 150px;
      height: 200px;
    }
    #duck {
      width: 200px;
      height: 200px;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <img id="egg" src="egg.png" alt="Egg">
    <img id="duck" src="duck.png" alt="Duck">
  </div>

// Get the egg and duck element
    var egg = document.getElementById("egg");
    var duck = document.getElementById("duck");

// Add event listener for touch/click on egg
    egg.addEventListener("click", hatchDuck);

function hatchDuck() {
      // Hide the egg and show the duck
      egg.style.display = "none";
      duck.style.display = "block";
    }
  </script>
</body>
</html>
```

You can replace the `"egg.png"` and `"duck.png"` with your own image filenames to customize the appearance of the egg and duck images.

Note: Make sure to save the egg and duck image files (with the specified filenames or replace the filenames in the code accordingly) in the same directory as the HTML file for them to be displayed correctly.