A balancing game, where two emojis were bouncing all around until they get hooked into the ring of emojis's game

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

No:14552

←

Prev Next

→

A balancing game, where two emojis were bouncing a..ALL
Developer User6282｜Date and time 23/9/3 3:21:11
Build time 29.874 sec｜Game capacity 3.774KB｜

Script

Sure! Here's an example of a simple balancing game implemented as a single HTML file using JavaScript and pictograms for emojis:

You can save the above code into a single HTML file and open it using a web browser on your smartphone to play the game. The game area is displayed as a 300x300 box with a yellow ring in the center. Two bouncing emojis are created, and you need to try to hook them into the ring by moving the ring around using your finger. When an emoji successfully hooks into the ring, it will turn green. The game loop continuously updates the position of the emojis and checks for hooking conditions.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple balancing game implemented as a single HTML file using JavaScript and pictograms for emojis:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Balancing Game</title>
  <style>
    #gameArea {
      position: relative;
      height: 300px;
      width: 300px;
      border: 1px solid black;
    }
    #ring {
      position: absolute;
      top: 130px;
      left: 130px;
      height: 40px;
      width: 40px;
      border: 2px solid black;
      border-radius: 50%;
      background-color: yellow;
    }
    .emoji {
      position: absolute;
      height: 40px;
      width: 40px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="ring"></div>
  </div>

// Create two bouncing emojis
    for (var i = 0; i < emojis.length; i++) {
      var emojiElement = document.createElement("div");
      emojiElement.classList.add("emoji");
      emojiElement.innerHTML = emojis[i];
      emojiElements.push(emojiElement);
      document.getElementById("gameArea").appendChild(emojiElement);

// Randomly position the emojis inside the game area
      var randomX = Math.floor(Math.random() * 260) + 20;
      var randomY = Math.floor(Math.random() * 260) + 20;
      emojiElement.style.top = randomY + "px";
      emojiElement.style.left = randomX + "px";

// Assign random velocity to each emoji
      var xVelocity = Math.floor(Math.random() * 4) - 2;
      var yVelocity = Math.floor(Math.random() * 4) - 2;
      emojiElement.xVelocity = xVelocity;
      emojiElement.yVelocity = yVelocity;
    }

// Function to update the position of the emojis
    function moveEmojis() {
      for (var i = 0; i < emojiElements.length; i++) {
        var emoji = emojiElements[i];

// Update the position based on velocity
        var newX = parseInt(emoji.style.left) + emoji.xVelocity;
        var newY = parseInt(emoji.style.top) + emoji.yVelocity;

// Reverse the direction if the emoji touches the game area boundary
        if (newX < 0 || newX > 260) {
          emoji.xVelocity *= -1;
        }
        if (newY < 0 || newY > 260) {
          emoji.yVelocity *= -1;
        }

emoji.style.left = newX + "px";
        emoji.style.top = newY + "px";

// Check if the emoji is hooked into the ring
        if (isEmojiHooked(emoji)) {
          emoji.style.backgroundColor = "green";
        } else {
          emoji.style.backgroundColor = "";
        }
      }
    }

// Function to check if the emoji is hooked into the ring
    function isEmojiHooked(emoji) {
      var ringRect = ring.getBoundingClientRect();
      var emojiRect = emoji.getBoundingClientRect();

// Check if the emoji's center point is within the ring
      var emojiCenterX = emojiRect.left + emojiRect.width / 2;
      var emojiCenterY = emojiRect.top + emojiRect.height / 2;

return (
        emojiCenterX >= ringRect.left &&
        emojiCenterX <= ringRect.right &&
        emojiCenterY >= ringRect.top &&
        emojiCenterY <= ringRect.bottom
      );
    }

// Start the game loop
    setInterval(moveEmojis, 10);
  </script>
</body>
</html>
```