A random emoji moving IN THE BOX FOREVER but everytime it hits a wall or corner, the box shrinks's game

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

No:37362

←

Prev Next

→

A random emoji moving IN THE BOX FOREVER but every..ALL
Developer User17064｜Date and time 24/1/21 2:34:22
Build time 9.51 sec｜Game capacity 2.709KB｜

Script

Sure! Here's an example implementation of a game that meets your requirements. It consists of a single HTML file that contains JavaScript enclosed in script tags. The game involves a randomly moving emoji inside a box, and whenever the emoji hits a wall or corner, the size of the box shrinks. Pictograms are used to represent the emoji.

🌟

You can save this code in a file with a ".html" extension, open it in a web browser, and you will see the game in action. The emoji will move randomly inside the box, and whenever it hits a wall or corner, the box will shrink by 10% of its size.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Emoji Game</title>
  <style>
    #box {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
      overflow: hidden;
    }
    #emoji {
      font-size: 100px;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <span id="emoji">🌟</span>
  </div>

var boxWidth = box.offsetWidth;
      var boxHeight = box.offsetHeight;

var emojiSize = 100;
      var emojiWidth = emoji.offsetWidth;
      var emojiHeight = emoji.offsetHeight;

var boxShrinkRate = 0.1;
      var isShrinking = false;

function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

function moveEmoji() {
        var posX = getRandomInt(0, boxWidth - emojiWidth);
        var posY = getRandomInt(0, boxHeight - emojiHeight);

emoji.style.transform = 'translate(' + posX + 'px, ' + posY + 'px)';
      }

function shrinkBox() {
        if (boxWidth > emojiSize && boxHeight > emojiSize) {
          boxWidth -= boxShrinkRate * boxWidth;
          boxHeight -= boxShrinkRate * boxHeight;
          box.style.width = boxWidth + 'px';
          box.style.height = boxHeight + 'px';
        }
      }

function checkCollision() {
        var emojiLeft = parseInt(emoji.style.left, 10);
        var emojiTop = parseInt(emoji.style.top, 10);

if (emojiLeft <= 0 || 
            emojiLeft + emojiWidth >= boxWidth || 
            emojiTop <= 0 || 
            emojiTop + emojiHeight >= boxHeight) {
          if (!isShrinking) {
            isShrinking = true;
            shrinkBox();
            setTimeout(function() {
              isShrinking = false;
              moveEmoji();
            }, 500);
          }
        }
      }

moveEmoji();
      setInterval(checkCollision, 100);
    });
  </script>
</body>
</html>
```