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

No:6622

106

Xinhai Search
Developer User3898｜Date and time 23/7/3 0:21:01
Build time 39.083 sec｜Game capacity 3.569KB｜

了解です！新海探検というゲームを作成してみます。以下が実装例です。HTMLファイル内にJavaScriptコードを含め、scriptタグで囲んでいます。

新海探検

新海君をゴールまで導いてください！

⭐

🏁

これは、3x3のブロックをもつゲームボード上で、プレイヤー(⭐)を操作してゴール(🏁)に導くというゲームです。プレイヤーブロックをクリックすることで上下左右に移動することができます。ゴールに到達すると「ゴール！おめでとう！」と表示されます。また、実装に絵文字を使用しています。ゲームボードのブロックには「cell」というクラスが付けられ、プレイヤー位置には「player」クラスが、ゴール位置には「goal」クラスが付けられます。ゲームボードのスタイルはCSSで指定しています。スマートフォンでも操作可能なレスポンシブな仕様となっていますので、スマホで遊ぶことができます。

→ 　

1　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

了解です！新海探検というゲームを作成してみます。

以下が実装例です。HTMLファイル内にJavaScriptコードを含め、scriptタグで囲んでいます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>新海探検</title>
</head>
<body>
  <h1>新海探検</h1>
  <p id="message">新海君をゴールまで導いてください！</p>
  <div id="gameBoard">
    <div class="cell" onclick="move(0, -1)"></div>
    <div class="cell" onclick="move(0, 1)"></div>
    <div class="cell" onclick="move(-1, 0)"></div>
    <div class="cell" onclick="move(1, 0)"></div>
    <div id="player" class="cell">⭐</div>
    <div id="goal" class="cell">🏁</div>
  </div>

<script>
    let playerPosition = { x: 0, y: 0 };
    const goalPosition = { x: 2, y: 2 };
    const gameBoard = document.getElementById('gameBoard');

function move(dx, dy) {
      const newPosX = playerPosition.x + dx;
      const newPosY = playerPosition.y + dy;
      
      // ゴールに到達したか確認
      if (newPosX === goalPosition.x && newPosY === goalPosition.y) {
        showWinMessage();
        return;
      }
      
      // 移動できるか確認
      if (newPosX >= 0 && newPosX <= 2 && newPosY >= 0 && newPosY <= 2) {
        const newCell = gameBoard.children[newPosY * 3 + newPosX];
        if (newCell && !newCell.classList.contains('obstacle')) {
          const playerCell = document.getElementById('player');
          playerCell.classList.remove('player');
          playerPosition.x = newPosX;
          playerPosition.y = newPosY;
          playerCell.style.left = (playerPosition.x * 100) + 'px';
          playerCell.style.top = (playerPosition.y * 100) + 'px';
          playerCell.classList.add('player');
          return;
        }
      }
      
      showInvalidMoveMessage();
    }

function showWinMessage() {
      const message = document.getElementById('message');
      message.textContent = 'ゴール！おめでとう！';
    }

function showInvalidMoveMessage() {
      const message = document.getElementById('message');
      message.textContent = 'そこには進めません';
    }
  </script>
  
  <style>
    #gameBoard {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      border: 1px solid black;
      width: 300px;
      height: 300px;
    }

.cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      border: 1px solid black;
    }

.player {
      background-color: DodgerBlue;
      color: white;
    }

.obstacle {
      background-color: gray;
    }
  </style>
</body>
</html>
```

これは、3x3のブロックをもつゲームボード上で、プレイヤー(⭐)を操作してゴール(🏁)に導くというゲームです。プレイヤーブロックをクリックすることで上下左右に移動することができます。ゴールに到達すると「ゴール！おめでとう！」と表示されます。

また、実装に絵文字を使用しています。ゲームボードのブロックには「cell」というクラスが付けられ、プレイヤー位置には「player」クラスが、ゴール位置には「goal」クラスが付けられます。ゲームボードのスタイルはCSSで指定しています。

スマートフォンでも操作可能なレスポンシブな仕様となっていますので、スマホで遊ぶことができます。