AI game creator

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

No:9409

126

←

Prev Next

→

Amazing Invader
Developer anonymous｜Date and time 23/7/24 15:01:03
Build time 31.692 sec｜Game capacity 3.228KB｜

Script

了解しました。以下にHTMLファイル内に実装されたJavaScriptを含むシンプルなインベーダーゲームの例を示します。このゲームはスマートフォン上で遊ぶことができます。

👾

💥

このコードでは、シップがスマートフォンのタッチ操作や傾きに合わせて移動し、インベーダーが定期的にランダムな速度で左から右へ移動します。ゲームの開始と終了は自動的に制御されます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>すごいインベーダー</title>
  <style>
    #game-board {
      width: 100vw;
      height: 100vh;
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .invader {
      font-size: 40px;
      color: yellow;
      animation-name: moveInvaders;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    @keyframes moveInvaders {
      from { transform: translateX(0); }
      to { transform: translateX(calc(100vw - 40px)); }
    }
    #ship {
      position: absolute;
      font-size: 40px;
      color: red;
      bottom: 20px;
      left: 50vw;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <div id="game-board">
    👾
    <div id="ship">💥</div>
  </div>

// ゲーム開始時の処理
    function startGame() {
      // インベーダーの移動を開始
      invaderMovement = setInterval(moveInvaders, 4000);
    }

// インベーダーの移動
    function moveInvaders() {
      const invaders = document.getElementsByClassName('invader');
      for(let i = 0; i < invaders.length; i++) {
        invaders[i].style.animationDuration = Math.random() * 4 + 1 + 's';
      }
    }

// ゲーム終了時の処理
    function endGame() {
      // インベーダーの移動を停止
      clearInterval(invaderMovement);
    }

// ゲーム開始時にstartGame関数を呼び出す
    startGame();

// スマートフォン操作によるシップの移動
    document.addEventListener('touchstart', function(e) {
      const ship = document.getElementById('ship');
      ship.style.left = e.touches[0].clientX + 'px';
    });

document.addEventListener('touchmove', function(e) {
      const ship = document.getElementById('ship');
      ship.style.left = e.touches[0].clientX + 'px';
    });

// スマートフォンの傾きによるシップの移動
    window.addEventListener('deviceorientation', function(e) {
      const ship = document.getElementById('ship');
      const shipPosition = ship.getBoundingClientRect();
      const boardWidth = document.body.clientWidth;
      const tilt = e.gamma;
      let movement = boardWidth * tilt / 90 - shipPosition.width / 2;
      
      if (movement < 0) {
        movement = 0;
      } else if (movement > boardWidth - shipPosition.width) {
        movement = boardWidth - shipPosition.width;
      }
      
      ship.style.left = movement + 'px';
    });
  </script>
</body>
</html>
```