An iron ball placed on a piece of wood I can control the movement of the piece of wood through the movement of the mobile in order to make the ball avoid falling into the holes's game

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

No:41560

←

Prev Next

→

An iron ball placed on a piece of wood I can contr..ALL
Developer User18630｜Date and time 24/2/8 11:42:22
Build time 13.1 sec｜Game capacity 3.581KB｜

Script

Sure! Here's a simple game in HTML, JavaScript, and CSS where you can control the movement of a piece of wood to avoid letting the iron ball fall into the holes. This game is designed for smartphone operation and uses pictograms for visual elements. You can copy the code below and save it as a single HTML file:

When you open the HTML file on your smartphone, you will see a piece of wood at the bottom of the screen and an iron ball just above it. There are three red holes placed randomly on the screen. By tilting your device, you can control the movement of the wood. The goal is to avoid letting the ball fall into any of the holes. If the ball collides with any hole, a "Game Over!" alert will be displayed. You can customize the game further by modifying the CSS styles or adding more holes. Have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

You can copy the code below and save it as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }
    #game-container {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #fefefe;
    }
    #wood {
      position: absolute;
      width: 80px;
      height: 10px;
      background-color: #8c6239;
      border-radius: 5px;
      bottom: 20px;
      left: calc(50% - 40px);
    }
    #ball {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #222222;
      border-radius: 50%;
      bottom: 40px;
      left: calc(50% - 10px);
    }
    .hole {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: #ff0000;
      border-radius: 50%;
    }
    #hole-1 {
      bottom: 100px;
      left: 20px;
    }
    #hole-2 {
      bottom: 100px;
      left: calc(50% - 20px);
    }
    #hole-3 {
      bottom: 100px;
      right: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="wood"></div>
    <div id="ball"></div>
    <div class="hole" id="hole-1"></div>
    <div class="hole" id="hole-2"></div>
    <div class="hole" id="hole-3"></div>
  </div>

function moveWood(event) {
      if (!isGameOver) {
        var x = event.accelerationIncludingGravity.x;
        var maxX = containerWidth - woodWidth;
        var newPos = Math.min(maxX, Math.max(0, (wood.offsetLeft - x * 2)));
        wood.style.left = newPos + 'px';
      }
    }

function isColliding(rect1, rect2) {
      return !(rect1.right < rect2.left ||
        rect1.left > rect2.right ||
        rect1.bottom < rect2.top ||
        rect1.top > rect2.bottom);
    }

function gameOver() {
      isGameOver = true;
      alert('Game Over!');
    }

window.addEventListener('devicemotion', moveWood, false);
    requestAnimationFrame(checkCollision);
  </script>
</body>
</html>
```

If the ball collides with any hole, a "Game Over!" alert will be displayed.

You can customize the game further by modifying the CSS styles or adding more holes. Have fun playing!