弾幕ショッター's game

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

No:40029

←

Prev Next

→

弾幕ショッター
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 18:44:43
Build time 17.187 sec｜Game capacity 3.307KB｜

Script

了解しました。以下にスマホで遊べる弾幕シューティングゲームのサンプルコードを示します。

このコードをコピーして、1枚のHTMLファイルとして保存し、スマホのブラウザで開くと、弾幕シューティングゲームが遊べるようになります。プレイヤーは画面下部に固定され、左右に移動できます。画面下から弾幕が降りてくるので、プレイヤーが弾幕を避けながら上に向かって弾を撃ちます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下にスマホで遊べる弾幕シューティングゲームのサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>弾幕シューティングゲーム</title>
  <style>
    canvas {
      background-color: black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// プレイヤーの初期設定
    const playerSize = 20;
    let playerX = screenWidth / 2;
    let playerY = screenHeight - playerSize - 10;
    let playerSpeed = 5;

// 弾幕の初期設定
    const bulletSize = 10;
    const bulletSpeed = 5;
    let bullets = [];

// ゲームループ
    function gameLoop() {
      ctx.clearRect(0, 0, screenWidth, screenHeight);

// プレイヤーの描画
      ctx.fillStyle = 'white';
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// 弾幕の描画
      ctx.fillStyle = 'red';
      for (let i = 0; i < bullets.length; i++) {
        ctx.fillRect(bullets[i].x, bullets[i].y, bulletSize, bulletSize);
        bullets[i].y += bulletSpeed;
        if (bullets[i].y > screenHeight) {
          bullets.splice(i, 1);
          i--;
        }
      }

requestAnimationFrame(gameLoop);
    }

// プレイヤー移動処理
    function movePlayer(direction) {
      if (direction === 'left') {
        playerX -= playerSpeed;
        if (playerX < 0) playerX = 0;
      }
      if (direction === 'right') {
        playerX += playerSpeed;
        if (playerX > screenWidth - playerSize) playerX = screenWidth - playerSize;
      }
    }

// 弾幕発射処理
    function fireBullet() {
      bullets.push({
        x: playerX + playerSize / 2 - bulletSize / 2,
        y: playerY - bulletSize
      });
    }

// スマホのタッチイベントリスナーを設定
    canvas.addEventListener('touchstart', function(event) {
      event.preventDefault();
      fireBullet();
    });

canvas.addEventListener('touchmove', function(event) {
      event.preventDefault();
      const touchX = event.touches[0].clientX;
      if (touchX < screenWidth / 2) {
        movePlayer('left');
      } else {
        movePlayer('right');
      }
    });

// キーボードのキーイベントリスナーを設定
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        movePlayer('left');
      }
      if (event.key === 'ArrowRight') {
        movePlayer('right');
      }
      if (event.key === ' ') {
        fireBullet();
      }
    });

// ゲーム開始
    gameLoop();
  </script>
</body>
</html>
```