メタルギアソリッドのような、潜入するゲーム's game

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

No:22535

←

Prev Next

→

メタルギアソリッドのような、潜入するゲーム
Developer User10397｜Date and time 23/10/23 2:44:12
Build time 86.372 sec｜Game capacity 5.284KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>潜入ゲーム</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #000;
      font-family: Arial, sans-serif;
    }

#game {
      width: 400px;
      height: 400px;
      border: 1px solid #fff;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// ゲームオブジェクト
    const game = {
      player: null,   // プレイヤーオブジェクト
      enemies: [],    // 敵オブジェクトの配列
      score: 0,       // スコア
      isRunning: false,  // ゲームが実行中かどうか

// ゲームの初期化
      init: function() {
        this.player = {
          x: gameConfig.width / 2 - gameConfig.playerSize / 2,
          y: gameConfig.height / 2 - gameConfig.playerSize / 2
        };

this.enemies = [];
        for(let i = 0; i < 5; i++) {
          this.enemies.push({
            x: Math.random() * (gameConfig.width - gameConfig.enemySize),
            y: Math.random() * (gameConfig.height - gameConfig.enemySize)
          });
        }

this.score = 0;
        this.isRunning = true;
      },

// ゲームの描画
      render: function() {
        const gameDiv = document.getElementById('game');
        gameDiv.innerHTML = '';

// プレイヤーを描画
        const playerDiv = document.createElement('div');
        playerDiv.style.width = gameConfig.playerSize + 'px';
        playerDiv.style.height = gameConfig.playerSize + 'px';
        playerDiv.style.position = 'absolute';
        playerDiv.style.left = this.player.x + 'px';
        playerDiv.style.top = this.player.y + 'px';
        playerDiv.style.backgroundColor = '#0f0';
        gameDiv.appendChild(playerDiv);

// 敵を描画
        for(let i = 0; i < this.enemies.length; i++) {
          const enemy = this.enemies[i];
          const enemyDiv = document.createElement('div');
          enemyDiv.style.width = gameConfig.enemySize + 'px';
          enemyDiv.style.height = gameConfig.enemySize + 'px';
          enemyDiv.style.position = 'absolute';
          enemyDiv.style.left = enemy.x + 'px';
          enemyDiv.style.top = enemy.y + 'px';
          enemyDiv.style.backgroundColor = '#f00';
          gameDiv.appendChild(enemyDiv);
        }

// スコアを描画
        const scoreDiv = document.createElement('div');
        scoreDiv.style.position = 'absolute';
        scoreDiv.style.left = '10px';
        scoreDiv.style.top = '10px';
        scoreDiv.style.color = '#fff';
        scoreDiv.innerText = 'Score: ' + this.score;
        gameDiv.appendChild(scoreDiv);
      },

// ゲームのロジック
      update: function() {
        if(this.isRunning) {
          // プレイヤーの移動
          if(keyState.KeyW === true && this.player.y > 0) {
            this.player.y -= gameConfig.playerSpeed;
          }
          if(keyState.KeyS === true && this.player.y < gameConfig.height - gameConfig.playerSize) {
            this.player.y += gameConfig.playerSpeed;
          }
          if(keyState.KeyA === true && this.player.x > 0) {
            this.player.x -= gameConfig.playerSpeed;
          }
          if(keyState.KeyD === true && this.player.x < gameConfig.width - gameConfig.playerSize) {
            this.player.x += gameConfig.playerSpeed;
          }

// 敵との当たり判定
          for(let i = 0; i < this.enemies.length; i++) {
            const enemy = this.enemies[i];
            if(this.player.x < enemy.x + gameConfig.enemySize &&
               this.player.x + gameConfig.playerSize > enemy.x &&
               this.player.y < enemy.y + gameConfig.enemySize &&
               this.player.y + gameConfig.playerSize > enemy.y) {
              this.isRunning = false;
              alert('ゲームオーバー！スコア: ' + this.score);
              break;
            }
          }

// スコアの加算
          this.score++;

// ゲームの終了判定
          if(this.score >= gameConfig.targetScore) {
            this.isRunning = false;
            alert('クリア！スコア: ' + this.score);
          }

this.render();
        }
      }
    };

// キーボードの状態を保持するオブジェクト
    const keyState = {};

// キーボードの状態を更新する関数
    function onKeydown(e) {
      keyState[e.code] = true;
    }

function onKeyup(e) {
      keyState[e.code] = false;
    }

// キーボードイベントのリスナーを登録
    document.addEventListener('keydown', onKeydown);
    document.addEventListener('keyup', onKeyup);

// ゲームを開始
    game.init();
    setInterval(function() {
      game.update();
    }, 16);
  </script>
</body>
</html>