AI game creator

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

No:3953

1317

←

Prev Next

→

Divers Strike Back
Developer User3589｜Date and time 23/6/27 0:38:42
Build time 31.279 sec｜Game capacity 2.886KB｜

Script

HTMLファイルとJavaScriptコードは以下の通りです。このゲームはスマホでも遊べます。

このゲームでは、プレイヤーが🐬として移動し、上から落ちてくる🦈を避けなければいけません。🐬をタップし、スワイプして移動します。🦈に当たるとゲームオーバーになり、スコアが表示されます。スコアは1秒ごとに加算されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

HTMLファイルとJavaScriptコードは以下の通りです。このゲームはスマホでも遊べます。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ダイバーの逆襲</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #3db7e4;
    }

#player {
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 40px;
      color: #fff;
    }

.enemy {
      position: absolute;
      top: -50px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #f00;
      animation: falling 3s linear infinite;
    }

@keyframes falling {
      0% {
        top: -50px;
      }
      100% {
        top: 100%;
      }
    }
  </style>
</head>
<body>
  <div id="player">🐬</div>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

const player = {
      x: canvas.width / 2,
      y: canvas.height - 100,
      size: 50,
      image: '🐬'
    };

const enemies = [];

function spawnEnemy() {
      const enemy = {
        x: Math.random() * canvas.width,
        y: -player.size,
        size: player.size,
        image: '🦈'
      };
      enemies.push(enemy);
    }

let lastSpawn = Date.now();
    let score = 0;

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

const now = Date.now();
      if (now - lastSpawn > 1000) {
        spawnEnemy();
        lastSpawn = now;
      }

for (const enemy of enemies) {
        enemy.y += 5;
        ctx.fillStyle = '#f00';
        ctx.beginPath();
        ctx.arc(enemy.x, enemy.y, enemy.size / 2, 0, Math.PI * 2);
        ctx.fill();

const dist = Math.sqrt(Math.pow(enemy.x - player.x, 2) + Math.pow(enemy.y - player.y, 2));
        if (dist <= (enemy.size + player.size) / 2) {
          alert(`Game over! Your score: ${score}`);
          location.reload();
        }
      }

ctx.font = '40px Arial';
      ctx.textAlign = 'center';
      ctx.fillStyle = '#fff';
      ctx.fillText(player.image, player.x, player.y);

requestAnimationFrame(update);
    }

update();

function handleTouch(event) {
      player.x = event.touches[0].clientX;
    }

canvas.addEventListener('touchmove', handleTouch);

setInterval(() => {
      score++;
    }, 1000);
  </script>
</body>
</html>
```