AI game creator

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

No:7420

9969

←

Prev Next

→

shooting game
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 4.565KB｜

Script

了解です。以下にシューティングゲームの実装例を示します。

この実装では、画面内を移動するプレイヤーがいるシューティングゲームです。プレイヤーは左矢印キーと右矢印キーで左右に移動し、クリックで弾を発射します。敵キャラクターが上から降ってくるので、プレイヤーは弾を当てながら敵を避けることが目標です。敵キャラクターに弾が当たるとスコアが上がりますが、敵キャラクターに当たるとゲームオーバーとなります。ゲームオーバー時にはアラートダイアログでスコアが表示されます。絵文字などの具体的なデザインは省略していますが、機能的な部分は実装されています。

←

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>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // ゲームの初期設定
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');
    const playerSize = 20;
    const bulletSize = 10;
    const enemySize = 20;
    const playerSpeed = 5;
    const bulletSpeed = 8;
    const enemySpeed = 2;
    const enemyGap = 400;
    
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height - playerSize;
    let bullets = [];
    let enemies = [];
    let score = 0;
    
    // イベントリスナーの設定
    document.addEventListener('keydown', movePlayer);
    canvas.addEventListener('click', shoot);
    
    // プレイヤーの移動処理
    function movePlayer(event) {
      switch (event.key) {
        case 'ArrowLeft':
          playerX -= playerSpeed;
          break;
        case 'ArrowRight':
          playerX += playerSpeed;
          break;
      }
    }
    
    // 弾の発射処理
    function shoot(event) {
      const bulletX = playerX + playerSize / 2 - bulletSize / 2;
      const bulletY = playerY;
      bullets.push({ x: bulletX, y: bulletY });
    }
    
    // 敵の生成処理
    function createEnemy() {
      const enemyX = Math.random() * (canvas.width - enemySize);
      const enemyY = 0;
      enemies.push({ x: enemyX, y: enemyY });
    }
    
    // 当たり判定処理
    function checkCollision() {
      for (let i = 0; i < bullets.length; i++) {
        for (let j = 0; j < enemies.length; j++) {
          if (
            bullets[i].x < enemies[j].x + enemySize &&
            bullets[i].x + bulletSize > enemies[j].x &&
            bullets[i].y < enemies[j].y + enemySize &&
            bullets[i].y + bulletSize > enemies[j].y
          ) {
            score++;
            bullets.splice(i, 1);
            enemies.splice(j, 1);
            break;
          }
        }
      }
      for (let i = 0; i < enemies.length; i++) {
        if (
          playerX < enemies[i].x + enemySize &&
          playerX + playerSize > enemies[i].x &&
          playerY < enemies[i].y + enemySize &&
          playerY + playerSize > enemies[i].y
        ) {
          gameOver();
          break;
        }
      }
    }
    
    // ゲームオーバー処理
    function gameOver() {
      clearInterval(gameLoop);
      alert('ゲームオーバー！ スコア：' + score);
    }
    
    // ゲームループ
    let gameLoop = setInterval(function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // プレイヤーの描画
      context.fillStyle = 'blue';
      context.fillRect(playerX, playerY, playerSize, playerSize);
      
      // 弾の描画と移動
      context.fillStyle = 'red';
      for (let i = 0; i < bullets.length; i++) {
        context.fillRect(bullets[i].x, bullets[i].y, bulletSize, bulletSize);
        bullets[i].y -= bulletSpeed;
        if (bullets[i].y < 0) {
          bullets.splice(i, 1);
          i--;
        }
      }
      
      // 敵の生成と描画
      context.fillStyle = 'green';
      if (score % enemyGap === 0) {
        createEnemy();
      }
      for (let i = 0; i < enemies.length; i++) {
        context.fillRect(enemies[i].x, enemies[i].y, enemySize, enemySize);
        enemies[i].y += enemySpeed;
        if (enemies[i].y > canvas.height) {
          gameOver();
          break;
        }
      }
      
      checkCollision();
    }, 10);
  </script>
</body>
</html>
```