Three seconds to trace..!'s game | AI game creator

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

No:7835

2428

Three seconds to trace..!
Developer User3788｜Date and time 23/7/10 0:48:59
Build time 13.096 sec｜Game capacity 3.316KB｜

了解いたしました。以下にスマホで遊べる迷路ゲームのサンプルコードをご提供いたします。このゲームは1枚のHTMLファイルで実装されており、JavaScriptはscriptタグ内に含まれています。

このゲームでは、３つのマス目の迷路が表示されます。プレイヤーはスタート地点からクリックをすることで移動できます。移動先に壁がなければ移動可能で、ゴールに到達すればゲームクリアとなります。スマホでプレイすることを前提にして、マス目の表示は`vw`（ビューポートの幅の割合）で指定しており、画面サイズに応じて自動的に調整されます。絵文字を使用してさらに楽しさを追加することも可能ですが、ご希望の絵文字の具体的な使用方法やゲームの詳細な仕様については、ご質問の内容では明示されていなかったため、ここには含めておりません。希望があれば具体的な要件をお伝えいただければ、それに基づいてアレンジすることもできますので、お知らせください。

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

了解いたしました。以下にスマホで遊べる迷路ゲームのサンプルコードをご提供いたします。このゲームは1枚のHTMLファイルで実装されており、JavaScriptはscriptタグ内に含まれています。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷路ゲーム</title>
<style>
  .maze {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 2px;
    width: 90vw;
    height: 90vw;
    margin: 5vw;
  }

.cell {
    background-color: white;
    text-align: center;
    font-size: 5vw;
    cursor: pointer;
  }

.cell.start {
    background-color: lime;
  }

.cell.goal {
    background-color: red;
  }

.cell.wall {
    background-color: black;
  }
</style>
</head>
<body>
<div class="maze"></div>
<script>
  const maze = [
    [0, 1, 0],
    [0, 1, 0],
    [0, 0, 0]
  ];
  const mazeSize = 3;
  let playerPosition = [0, 0];

function createMaze() {
    const mazeElement = document.querySelector('.maze');
    mazeElement.innerHTML = '';

for (let i = 0; i < mazeSize; i++) {
      for (let j = 0; j < mazeSize; j++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        if (maze[i][j] === 0) {
          cell.classList.add('wall');
        } else if (i === 0 && j === 0) {
          cell.classList.add('start');
        } else if (i === mazeSize - 1 && j === mazeSize - 1) {
          cell.classList.add('goal');
        }
        cell.addEventListener('click', movePlayer);
        mazeElement.appendChild(cell);
      }
    }
  }

function movePlayer(event) {
    const clickedCell = event.target;
    const clickedCellIndex = Array.from(clickedCell.parentNode.children).indexOf(clickedCell);
    const row = Math.floor(clickedCellIndex / mazeSize);
    const col = clickedCellIndex % mazeSize;

if (canMove(row, col)) {
      playerPosition = [row, col];
      createMaze();
      checkWin();
    }
  }

function canMove(row, col) {
    if (row < 0 || row >= mazeSize || col < 0 || col >= mazeSize || maze[row][col] === 0) {
      return false;
    }
    return true;
  }

function checkWin() {
    if (playerPosition[0] === mazeSize - 1 && playerPosition[1] === mazeSize - 1) {
      alert("ゲームクリア！");
    }
  }

createMaze();
</script>
</body>
</html>
```

このゲームでは、３つのマス目の迷路が表示されます。プレイヤーはスタート地点からクリックをすることで移動できます。移動先に壁がなければ移動可能で、ゴールに到達すればゲームクリアとなります。

スマホでプレイすることを前提にして、マス目の表示は`vw`（ビューポートの幅の割合）で指定しており、画面サイズに応じて自動的に調整されます。

絵文字を使用してさらに楽しさを追加することも可能ですが、ご希望の絵文字の具体的な使用方法やゲームの詳細な仕様については、ご質問の内容では明示されていなかったため、ここには含めておりません。希望があれば具体的な要件をお伝えいただければ、それに基づいてアレンジすることもできますので、お知らせください。