AI game creator

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

No:42618

←

Prev Next

→

マイクラ
Developer User10436｜Date and time 24/2/12 9:29:35
Build time 15.731 sec｜Game capacity 4.077KB｜

Script

了解しました。以下に、スマホで遊べる簡単なマインクラフト風のゲームの実装例を示します。

このゲームでは、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>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #333;
    }
    #game-board {
      width: 300px;
      height: 300px;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      border: 1px solid #ccc;
      background-color: #fff;
    }
    .block {
      background-color: gray;
      border-radius: 50%;
    }
    #player {
      background-color: yellow;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// プレイヤーの初期位置
    let playerRow = 0;
    let playerCol = 0;

// フラグを初期化
    let isGameOver = false;

// ゲームボードの要素を取得
    const board = document.getElementById('game-board');

// ゲームボードを初期化する関数
    function initializeBoard() {
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const block = document.createElement('div');
          block.className = 'block';
          block.setAttribute('id', `block-${r}-${c}`);
          board.appendChild(block);
        }
      }

const player = document.createElement('div');
      player.className = 'block';
      player.setAttribute('id', 'player');
      board.appendChild(player);
    }

// キーボードのイベントリスナを追加
    document.addEventListener('keydown', (event) => {
      if (isGameOver) {
        return;
      }

// 上矢印キー: 38
      // 下矢印キー: 40
      // 左矢印キー: 37
      // 右矢印キー: 39
      switch (event.keyCode) {
        case 38: // 上矢印キー
          movePlayer(playerRow - 1, playerCol);
          break;
        case 40: // 下矢印キー
          movePlayer(playerRow + 1, playerCol);
          break;
        case 37: // 左矢印キー
          movePlayer(playerRow, playerCol - 1);
          break;
        case 39: // 右矢印キー
          movePlayer(playerRow, playerCol + 1);
          break;
      }
    });

// プレイヤーの移動処理
    function movePlayer(newRow, newCol) {
      if (newRow < 0 || newCol < 0 || newRow >= rows || newCol >= cols) {
        return; // 壁に当たっている場合は移動しない
      }

const currentBlock = document.getElementById(`block-${playerRow}-${playerCol}`);
      currentBlock.style.background = 'gray'; // 前の位置のブロックを元の色に戻す
      currentBlock.style.borderRadius = '50%'; // 前の位置のブロックを元の形に戻す

const newBlock = document.getElementById(`block-${newRow}-${newCol}`);
      newBlock.style.background = 'yellow'; // 新しい位置のブロックをプレイヤーの色にする
      newBlock.style.borderRadius = '50%'; // 新しい位置のブロックをプレイヤーの形にする

// プレイヤーの位置を更新
      playerRow = newRow;
      playerCol = newCol;

checkGameOver(); // ゲーム終了条件のチェック
    }

// ゲーム終了条件のチェック
    function checkGameOver() {
      if (playerRow === rows - 1 && playerCol === cols - 1) {
        isGameOver = true;
        alert('ゲームクリア！');
      }
    }

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

このゲームでは、HTMLの表示上でプレイヤーを移動させることができます。矢印キーを押すことで上下左右に移動し、最後のマスにたどり着くと「ゲームクリア！」と表示されます。

ご自身のプロジェクトに合わせてカスタマイズしていただければと思います。