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

No:22829

←

Prev Next

→

鏡の向きを変えてLASERを誘導するゲーム
Developer バファリンヌ｜Date and time 23/10/25 20:02:35
Build time 82.585 sec｜Game capacity 3.652KB｜

Script

鏡ゲーム

LASERをゴールまで誘導してください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>

<body>
  <h1>鏡ゲーム</h1>
  <p id="message">LASERをゴールまで誘導してください！</p>
  <div id="gameBoard">
    <div id="mirror"></div>
  </div>

// ゲーム盤のサイズ
    const boardSize = 6;

// ゲーム盤の要素を表すクラス
    class BoardElement {
      constructor(x, y, value) {
        this.x = x;
        this.y = y;
        this.value = value;
      }
    }

// ゲーム盤
    const board = [];

// LASERの位置と向き
    let laserPosition = [...startPosition];
    let laserDirection = -1;

// ゲームの状態を表す変数
    let gameOver = false;

// ゲーム盤の初期化
    function initializeBoard() {
      for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
          if (i === goalPosition[0] && j === goalPosition[1]) {
            board[i][j] = new BoardElement(i, j, "🚀");
          } else if (i === laserPosition[0] && j === laserPosition[1]) {
            board[i][j] = new BoardElement(i, j, "🔫");
          } else {
            board[i][j] = new BoardElement(i, j, "⬛");
          }
        }
      }
    }

// ゲーム盤の表示
    function renderBoard() {
      const gameBoard = document.getElementById("gameBoard");
      gameBoard.innerHTML = "";

for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const element = document.createElement("div");
          element.textContent = board[i][j].value;
          element.classList.add("board-element");
          gameBoard.appendChild(element);
        }
      }
    }
    
    // LASERの移動
    function moveLaser() {
      if (gameOver) {
        return;
      }
      
      const newPosX = laserPosition[0] + Math.floor(laserDirection / 2);
      const newPosY = laserPosition[1] + Math.floor((laserDirection + 1) / 2);
      
      if ((newPosX >= 0 && newPosX < boardSize) && (newPosY >= 0 && newPosY < boardSize)) {
        laserPosition[0] = newPosX;
        laserPosition[1] = newPosY;
        
        if (laserPosition[0] === goalPosition[0] && laserPosition[1] === goalPosition[1]) {
          gameOver = true;
          setMessage("ゲームクリア！");
        }
        
        renderBoard();
      } else {
        gameOver = true;
        setMessage("ゲームオーバー");
      }
    }
    
    // メッセージの表示
    function setMessage(message) {
      document.getElementById("message").textContent = message;
    }
    
    // 初期化の実行
    initializeBoard();
    renderBoard();

// スマホ操作に対応
    document.addEventListener("keydown", function (event) {
      switch (event.key) {
        case "ArrowUp":
          laserDirection = 0;
          break;
        case "ArrowDown":
          laserDirection = 1;
          break;
        case "ArrowLeft":
          laserDirection = 2;
          break;
        case "ArrowRight":
          laserDirection = 3;
          break;
      }
      moveLaser();
    });
  </script>
  
  <style>
    #gameBoard {
      display: flex;
      flex-wrap: wrap;
      width: fit-content;
      margin-top: 20px;
    }

.board-element {
      width: 30px;
      height: 30px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</body>

</html>