Lightning Strike Game! Avoid lightning rods and hit people with lightning!'s game

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

No:5159

3966

←

Prev Next

→

Lightning Strike Game! Avoid lightning rods and hi..ALL
Developer User3589｜Date and time 23/6/29 19:50:00
Build time 24.031 sec｜Game capacity 2.624KB｜

Script

了解しました！以下は、落雷ゲームの実装例です。スマートフォンで操作可能で、絵文字を使用しています。

⚡

このコードをHTMLファイルに保存し、スマートフォンで開くと、落雷ゲームが遊べます。画面をタップすると避雷針が動き、画面上から落ちてくる雷に当たるとゲームオーバーです。

←

Prev　Next

→ 　

Back　

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

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

了解しました！以下は、落雷ゲームの実装例です。スマートフォンで操作可能で、絵文字を使用しています。

```html
<!DOCTYPE html>
<html>

<head>
  <title>落雷ゲーム</title>
  <style>
    body {
      overflow: hidden;
    }

#player {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
    }

#lightning {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: yellow;
      animation: lightning 1s infinite;
    }

@keyframes lightning {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div id="player">⚡</div>
  <div id="lightning"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var player = document.getElementById('player');
      var gameArea = document.body.clientHeight;
      var playerPosition = 50;
      var isHit = false;
      
      document.addEventListener('touchstart', function (event) {
        event.preventDefault();
        isHit = true;
      });
      
      document.addEventListener('touchend', function (event) {
        event.preventDefault();
        isHit = false;
      });
      
      document.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var touch = event.touches[0];
        playerPosition = touch.clientX * 100 / window.innerWidth;
        player.style.left = playerPosition + '%';
      });
      
      function detectCollision() {
        var playerLeft = player.offsetLeft;
        var playerWidth = player.offsetWidth;
        var lightning = document.getElementById('lightning');
        var lightningTop = lightning.offsetTop;
        var lightningHeight = lightning.offsetHeight;
        var playerBottom = gameArea - player.offsetTop;
        
        if (playerLeft + playerWidth >= 0 && playerLeft <= playerWidth &&
            isHit && lightningTop + lightningHeight >= playerBottom) {
          alert('ゲームオーバー！ 避雷針に当たりました！');
        } else {
          requestAnimationFrame(detectCollision);
        }
      }
      
      requestAnimationFrame(detectCollision);
    });
  </script>
</body>

</html>
```