シューティングゲーム's game

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

No:30646

←

Prev Next

→

シューティングゲーム
Developer User14903｜Date and time 23/12/23 14:34:20
Build time 24.81 sec｜Game capacity 4.587KB｜

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>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// キーボードの入力状態を管理するオブジェクト
      const keyboardState = {}

// キーの押下状態を記録するイベントリスナー
      document.addEventListener('keydown', function(e) {
        keyboardState[e.key] = true
      })

// キーの解放状態を記録するイベントリスナー
      document.addEventListener('keyup', function(e) {
        keyboardState[e.key] = false
      })

// 弾を作成する関数
      function createBullet(x, y) {
        return {
          x,
          y,
          width: 10,
          height: 10,
          speed: 10
        }
      }

// 敵を作成する関数
      function createEnemy(x, y) {
        return {
          x,
          y,
          width: 30,
          height: 30,
          speed: 3
        }
      }

// 弾と敵の衝突判定を行う関数
      function handleCollisions() {
        for (let i = 0; i < gameState.bullets.length; i++) {
          const bullet = gameState.bullets[i]
          for (let j = 0; j < gameState.enemies.length; j++) {
            const enemy = gameState.enemies[j]
            if (
              bullet.x < enemy.x + enemy.width &&
              bullet.x + bullet.width > enemy.x &&
              bullet.y < enemy.y + enemy.height &&
              bullet.y + bullet.height > enemy.y
            ) {
              gameState.bullets.splice(i, 1)
              gameState.enemies.splice(j, 1)
              gameState.score += 1
              break
            }
          }
        }
      }

// ゲームの状態を更新する関数
      function update() {
        if (keyboardState['ArrowLeft'] && gameState.player.x > 0) {
          gameState.player.x -= gameState.player.speed
        }
        if (keyboardState['ArrowRight'] && gameState.player.x + gameState.player.width < 400) {
          gameState.player.x += gameState.player.speed
        }
        if (keyboardState[' '] && gameState.bullets.length < 5) {
          gameState.bullets.push(createBullet(gameState.player.x + 15, gameState.player.y))
        }
        gameState.bullets.forEach(bullet => {
          bullet.y -= bullet.speed
        })
        gameState.enemies.forEach(enemy => {
          enemy.y += enemy.speed
        })
        handleCollisions()
      }

// ゲームの状態を描画する関数
      function render() {
        const canvas = document.getElementById('gameCanvas')
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, canvas.width, canvas.height)

ctx.fillStyle = 'blue'
        ctx.fillRect(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height)

ctx.fillStyle = 'red'
        gameState.bullets.forEach(bullet => {
          ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height)
        })

ctx.fillStyle = 'green'
        gameState.enemies.forEach(enemy => {
          ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height)
        })

ctx.fillStyle = 'black'
        ctx.font = '24px sans-serif'
        ctx.fillText(`Score: ${gameState.score}`, 10, 30)
      }

// ゲームループを実行する関数
      function gameLoop() {
        update()
        render()
        requestAnimationFrame(gameLoop)
      }

// 敵をランダムに生成する関数
      function spawnEnemy() {
        const x = Math.floor(Math.random() * 350)
        gameState.enemies.push(createEnemy(x, -30))
        setTimeout(spawnEnemy, 1000)
      }

// ゲームを開始する関数
      function startGame() {
        spawnEnemy()
        gameLoop()
      }

// ゲームを開始する
      startGame()
    </script>
  </body>
</html>
```