Windows98に入っていたスクリーンセーバー（OpenGL迷路）'s game

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

No:20727

←

Prev Next

→

Windows98に入っていたスクリーンセーバー（OpenGL迷路）
Developer User9126｜Date and time 23/10/10 20:26:21
Build time 38.43 sec｜Game capacity 4.87KB｜

Script

は以下のようなHTMLファイルを作成し、その中にJavaScriptコードを記述してプログラムを実装することができます。

このHTMLファイルをブラウザで開くと、迷路ゲームが遊べるようになっています。スマートフォンのタッチ操作に対応しており、タッチ方向に応じてキャラクターが移動します。ゴールに到達するとアラートが表示されます。なお、このプログラムは迷路の情報をJavaScriptの配列（`mazeData`）で表しています。`1`は壁、`0`は通路、`2`はゴールを表しており、迷路の形状を変更する場合は配列の値を変更してください。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

は以下のようなHTMLファイルを作成し、その中にJavaScriptコードを記述してプログラムを実装することができます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>迷路ゲーム</title>
  <style>
    /* 迷路のスタイル */
    .maze {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      width: 90vw;
      height: 90vh;
      margin: 5vh auto;
      border: 1px solid black;
    }

.cell {
      background-color: white;
      border: 1px solid black;
    }

/* キャラクターのスタイル */
    .character {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="maze"></div>

const mazeElement = document.querySelector('.maze');
      let currentPosition = { x: 0, y: 0 };

// 迷路を描画する関数
      function drawMaze() {
        mazeElement.innerHTML = '';
        for (let y = 0; y < mazeData.length; y++) {
          for (let x = 0; x < mazeData[y].length; x++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            // スタート位置のセルにはキャラクターを配置
            if (x === currentPosition.x && y === currentPosition.y) {
              cell.innerHTML = '🚶';
              cell.classList.add('character');
            } else if (mazeData[y][x] === 1) {
              cell.innerHTML = '🔳';
            }
            mazeElement.appendChild(cell);
          }
        }
      }

// マウスまたはタッチイベントでキャラクターを移動する関数
      function handleMove(direction) {
        let newX = currentPosition.x;
        let newY = currentPosition.y;

if (direction === 'up') {
          newY--;
        } else if (direction === 'down') {
          newY++;
        } else if (direction === 'left') {
          newX--;
        } else if (direction === 'right') {
          newX++;
        }

// 移動先が迷路内の範囲かつ壁ではない場合に移動
        if (
          newX >= 0 &&
          newY >= 0 &&
          newX < mazeData[0].length &&
          newY < mazeData.length &&
          mazeData[newY][newX] !== 1
        ) {
          currentPosition.x = newX;
          currentPosition.y = newY;
          drawMaze();
          // ゴールに到達した場合にメッセージを表示
          if (mazeData[newY][newX] === 2) {
            alert('ゴールに到着しました！');
          }
        }
      }

// スマホのタッチ操作を検出する処理
      let touchstartX = 0;
      let touchstartY = 0;
      let touchendX = 0;
      let touchendY = 0;

mazeElement.addEventListener('touchend', function(event) {
        touchendX = event.changedTouches[0].screenX;
        touchendY = event.changedTouches[0].screenY;
        handleGesture();
      }, false);

drawMaze();
    });
  </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、迷路ゲームが遊べるようになっています。スマートフォンのタッチ操作に対応しており、タッチ方向に応じてキャラクターが移動します。ゴールに到達するとアラートが表示されます。

なお、このプログラムは迷路の情報をJavaScriptの配列（`mazeData`）で表しています。`1`は壁、`0`は通路、`2`はゴールを表しており、迷路の形状を変更する場合は配列の値を変更してください。