Create a gane where I can move an angle icon if I feed q dragon it will evolve and look different and become stronger's game

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

No:17474

131

←

Prev Next

→

Create a gane where I can move an angle icon if I ..ALL
Developer User7678｜Date and time 23/9/23 11:15:05
Build time 27.243 sec｜Game capacity 2.933KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. The game allows you to move an angle icon, feed a dragon, and watch it evolve and become stronger based on the number of times it is fed.

⚡️

🐉

To play the game: 1. Save the code as an HTML file (e.g., `dragon_game.html`). 2. Open the HTML file in a web browser. 3. Use your smartphone's touch screen to move the angle icon within the game container. 4. Tap on the game container to feed the dragon. 5. Every 3 times you feed the dragon, it will evolve and change its appearance, becoming stronger by adding more fire emojis. Enjoy playing the dragon feeding game on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Dragon Feeding Game</title>
  <style>
    #game-container {
      width: 400px;
      height: 400px;
      position: relative;
      border: 2px solid black;
    }

#angle-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 50px;
    }

#dragon-container {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <span id="angle-icon">⚡️</span>
    <div id="dragon-container">
      <span id="dragon">🐉</span>
    </div>
  </div>

function moveIcon(event) {
      var icon = document.getElementById("angle-icon");
      var container = document.getElementById("game-container");
      var containerWidth = container.offsetWidth;
      var containerHeight = container.offsetHeight;
      var iconWidth = icon.offsetWidth;
      var iconHeight = icon.offsetHeight;
      var x = event.touches[0].clientX - container.offsetLeft - (iconWidth / 2);
      var y = event.touches[0].clientY - container.offsetTop - (iconHeight / 2);

x = Math.max(0, Math.min(x, containerWidth - iconWidth));
      y = Math.max(0, Math.min(y, containerHeight - iconHeight));

icon.style.left = x + "px";
      icon.style.top = y + "px";
    }

function feedDragon() {
      feedCount++;
      var dragon = document.getElementById("dragon");

if (feedCount >= 3) {
        dragon.innerHTML = "🔥";
      }

if (feedCount >= 6) {
        dragon.innerHTML = "🔥🔥";
      }

if (feedCount >= 9) {
        dragon.innerHTML = "🔥🔥🔥";
      }

if (feedCount >= 12) {
        dragon.innerHTML = "🔥🔥🔥🔥";
      }

if (feedCount >= 15) {
        dragon.innerHTML = "🔥🔥🔥🔥🔥";
      }
    }

document.getElementById("game-container").addEventListener("touchmove", moveIcon);
    document.getElementById("game-container").addEventListener("touchstart", feedDragon);

</script>
</body>
</html>
```

To play the game:

1. Save the code as an HTML file (e.g., `dragon_game.html`).
2. Open the HTML file in a web browser.
3. Use your smartphone's touch screen to move the angle icon within the game container.
4. Tap on the game container to feed the dragon.
5. Every 3 times you feed the dragon, it will evolve and change its appearance, becoming stronger by adding more fire emojis.

Enjoy playing the dragon feeding game on your smartphone!