A random emoji moving in a box 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:37360

←

Prev Next

→

A random emoji moving in a box but everytime it hi..ALL
Developer User17064｜Date and time 24/1/21 2:32:37
Build time 8.835 sec｜Game capacity 2.407KB｜

Script

Sure! Here's an example of an HTML file implementing the game you described, using JavaScript and pictograms:

🎯

This code sets up a game board represented by the `game-box` div element. Inside the box, there is an emoji represented by the `emoji` span element. The emoji moves within the box and bounces off the walls or corners. Every time it collides with the walls or corners, the box shrinks by decreasing its width or height by 10 pixels. You can copy this code into an HTML file, save it with the extension `.html`, and open it in a web browser, preferably on a smartphone, to play the game. The emoji will move randomly inside the box, bouncing off the walls and corners while the box shrinks on collision.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of an HTML file implementing the game you described, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-box {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      overflow: hidden;
    }
    
    #emoji {
      position: absolute;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div id="game-box">
    <span id="emoji">🎯</span>
  </div>

// Generate a random starting position for the emoji
    let posX = Math.floor(Math.random() * (boxWidth - 50));
    let posY = Math.floor(Math.random() * (boxHeight - 50));

// Define the emoji's movement speed
    const speedX = 5;
    const speedY = 5;

// Function to update the emoji's position
    function updatePosition() {
      // Move the emoji
      posX += speedX;
      posY += speedY;

// Check for collisions with walls or corners
      if (posX + emoji.offsetWidth >= boxWidth || posX <= 0) {
        speedX *= -1; // Reverse horizontal direction
        gameBox.style.width = (boxWidth - 10) + "px"; // Shrink the box
      }
      if (posY + emoji.offsetHeight >= boxHeight || posY <= 0) {
        speedY *= -1; // Reverse vertical direction
        gameBox.style.height = (boxHeight - 10) + "px"; // Shrink the box
      }

// Update the emoji's position
      emoji.style.left = posX + "px";
      emoji.style.top = posY + "px";
    }

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

You can copy this code into an HTML file, save it with the extension `.html`, and open it in a web browser, preferably on a smartphone, to play the game. The emoji will move randomly inside the box, bouncing off the walls and corners while the box shrinks on collision.