AI game creator

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

No:4472

992

←

Prev Next

→

GameWatch
Developer User1006｜Date and time 23/6/28 1:58:12
Build time 44.544 sec｜Game capacity 4.466KB｜

Script

のような単純なシューティングゲームを作成しました。以下は実際のプログラムになります。

このプログラムはスマホで操作することが前提で、加速度センサーを使用してプレイヤーを動かすことができます。また、タップすることで弾を発射することができます。敵とプレイヤーが衝突したときはゲームオーバーとなり、スコアが表示されます。また、弾と敵が衝突したときは敵が消え、スコアが加算されます。絵文字は使用しませんでしたが、単純なゲームとして作成しました。

←

Prev　Next

→ 　

Back　

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

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

のような単純なシューティングゲームを作成しました。以下は実際のプログラムになります。

<!DOCTYPE html>
<html>
  <head>
    <title>シューティングゲーム</title>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// プレイヤーの情報を設定
      const player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speed: 10,
        score: 0
      };

// 弾の情報を設定
      const bullet = {
        x: player.x,
        y: player.y,
        radius: 5,
        speed: 15,
        isFired: false
      };

// エネミーの情報を設定
      let enemies = [];

function spawnEnemy() {
        const enemy = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: 10,
          speed: 8
        };
        enemies.push(enemy);
      }

setInterval(spawnEnemy, 1000);

function drawPlayer() {
        ctx.beginPath();
        ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
      }

function drawBullet() {
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();
      }

function drawEnemy() {
        enemies.forEach(enemy => {
          ctx.beginPath();
          ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
          ctx.fillStyle = 'green';
          ctx.fill();
          ctx.closePath();
        });
      }

function movePlayer() {
        window.addEventListener('deviceorientation', event => {
          const gamma = event.gamma;
          const beta = event.beta;
          player.x += gamma * player.speed;
          player.y += beta * player.speed;
        });
      }

function moveEnemy() {
        enemies.forEach(enemy => {
          const dx = player.x - enemy.x;
          const dy = player.y - enemy.y;

const distance = Math.sqrt(dx * dx + dy * dy);
          const moveX = dx / distance * enemy.speed;
          const moveY = dy / distance * enemy.speed;

enemy.x += moveX;
          enemy.y += moveY;

// プレイヤーと敵が衝突したときはゲームオーバー
          if (distance < player.radius + enemy.radius) {
            alert('ゲームオーバー！スコアは' + player.score + 'です');
            location.reload();
          }

// 弾と敵が衝突したときは敵を消す
          const bulletDistance = Math.sqrt((bullet.x - enemy.x) ** 2 + (bullet.y - enemy.y) ** 2);
          if (bulletDistance < bullet.radius + enemy.radius) {
            bullet.isFired = false;
            bullet.x = player.x;
            bullet.y = player.y;
            player.score += 1;
            enemies = enemies.filter(e => e !== enemy);
          }
        });
      }

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

drawPlayer();
        drawBullet();
        drawEnemy();

movePlayer();
        moveBullet();
        moveEnemy();

requestAnimationFrame(gameLoop);
      }

canvas.addEventListener('click', event => {
        bullet.isFired = true;
      });

gameLoop();
    </script>
  </body>
</html>