AI game creator

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

No:6860

195

←

Prev Next

→

Generation Z
Developer User3898｜Date and time 23/7/4 1:01:47
Build time 32.705 sec｜Game capacity 3.169KB｜

Script

了解しました。Z世代向けのスマホゲームを作成します。以下が実装例です（スカイウォーカーゲーム）：

🚀

このゲームでは、プレイヤーの操作でロケットを左右に移動させながら、画面上から強襲されてくる敵の宇宙船を避けることが目標です。敵の宇宙船に当たるとゲームオーバーになります。スマホのタッチ操作でプレイヤーを操作できます。このコードをHTMLファイルとして保存し、ブラウザで開くとゲームが実行されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。Z世代向けのスマホゲームを作成します。

以下が実装例です（スカイウォーカーゲーム）：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>スカイウォーカーゲーム</title>
  <style>
    #game {
      width: 100%;
      height: 100vh;
      background-color: black;
      position: relative;
    }
    
    #player {
      font-size: 50px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .enemy {
      font-size: 50px;
      position: absolute;
      top: -50px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player">🚀</div>
  </div>
  
  <script>
    var game = document.getElementById('game');
    var player = document.getElementById('player');
    var speed = 5;
    var score = 0;

document.addEventListener('DOMContentLoaded', function() {
      game.addEventListener('touchstart', movePlayerLeft);
      game.addEventListener('touchend', movePlayerRight);

setInterval(function() {
        createEnemy();
      }, 1000);

setInterval(function() {
        moveEnemies();
      }, 50);
    });

function movePlayerLeft() {
      var left = parseInt(player.style.left);
      left -= speed;
      player.style.left = left + 'px';
    }

function movePlayerRight() {
      var left = parseInt(player.style.left);
      left += speed;
      player.style.left = left + 'px';
    }

function createEnemy() {
      var enemy = document.createElement('div');
      enemy.classList.add('enemy');
      enemy.innerText = '🛸';
      enemy.style.left = Math.random() * (window.innerWidth - 50) + 'px';
      game.appendChild(enemy);
    }

function moveEnemies() {
      var enemies = document.getElementsByClassName('enemy');

for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        var top = parseInt(enemy.style.top);
        top += speed;
        enemy.style.top = top + 'px';

if (top > window.innerHeight) {
          enemy.parentNode.removeChild(enemy);
          score++;
        }

if (collision(enemy, player)) {
          gameOver();
        }
      }
    }

function collision(enemy, player) {
      var enemyRect = enemy.getBoundingClientRect();
      var playerRect = player.getBoundingClientRect();
      return !(
        enemyRect.top > playerRect.bottom ||
        enemyRect.bottom < playerRect.top ||
        enemyRect.right < playerRect.left ||
        enemyRect.left > playerRect.right
      );
    }

function gameOver() {
      alert('ゲームオーバー！\nスコア：' + score);
      location.reload();
    }
  </script>
</body>
</html>
```

このゲームでは、プレイヤーの操作でロケットを左右に移動させながら、画面上から強襲されてくる敵の宇宙船を避けることが目標です。敵の宇宙船に当たるとゲームオーバーになります。スマホのタッチ操作でプレイヤーを操作できます。

このコードをHTMLファイルとして保存し、ブラウザで開くとゲームが実行されます。