A game of rock-paper-scissors with a maze. The maze places an Othello frame and the player can choose a pictograph's game

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

No:1514

124

←

Prev Next

→

A game of rock-paper-scissors with a maze. The maz..ALL
Developer User3181｜Date and time 23/6/18 17:55:44
Build time 56.051 sec｜Game capacity 5.554KB｜

Script

😀

START

✊

✋

✌️

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>迷路とじゃんけんゲーム</title>
    <style>
      #maze {
        margin: 0 auto;
        width: 80vw;
        height: 80vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: space-evenly;
      }

.maze-cell {
        width: 8vw;
        height: 8vh;
        background-color: #ccc;
        border: 2px solid #333;
      }

#player {
        font-size: 6vw;
        text-align: center;
        margin: 2vw auto;
        cursor: pointer;
      }

#result {
        font-size: 6vw;
        text-align: center;
        margin: 2vw auto;
      }

#buttons {
        margin: 5vw auto;
        text-align: center;
      }

.button {
        width: 40vw;
        height: 10vw;
        font-size: 5vw;
        margin: 2vw;
        cursor: pointer;
        border-radius: 10vw;
        background-color: #00aaff;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="maze"></div>
    <div id="player">😀</div>
    <div id="result"></div>
    <div id="buttons">
      <div class="button" onclick="start()">START</div>
      <div class="button" onclick="rock()">✊</div>
      <div class="button" onclick="paper()">✋</div>
      <div class="button" onclick="scissors()">✌️</div>
    </div>
    <script>
      const MAZE_SIZE = 10;
      const PLAYER_START = [0, 0];
      const GOAL = [MAZE_SIZE - 1, MAZE_SIZE - 1];
      const MAZE = [];
      const PLAYER = document.getElementById("player");
      const RESULT = document.getElementById("result");

let playerPos = PLAYER_START.slice();

// initialize maze
      for (let i = 0; i < MAZE_SIZE; i++) {
        MAZE[i] = [];
        for (let j = 0; j < MAZE_SIZE; j++) {
          MAZE[i][j] = false;
        }
      }
      MAZE[2][3] = true;
      MAZE[3][5] = true;
      MAZE[4][2] = true;
      MAZE[6][7] = true;
      MAZE[7][1] = true;
      MAZE[8][6] = true;

// draw maze
      const mazeDiv = document.getElementById("maze");
      for (let i = 0; i < MAZE_SIZE; i++) {
        for (let j = 0; j < MAZE_SIZE; j++) {
          const cell = document.createElement("div");
          cell.className = "maze-cell";
          if (MAZE[i][j]) {
            cell.innerHTML = "⚫️";
          }
          mazeDiv.appendChild(cell);
        }
      }

// move player
      function movePlayer(dx, dy) {
        const newPos = [playerPos[0] + dx, playerPos[1] + dy];
        // check if new position is valid
        if (newPos[0] >= 0 && newPos[0] < MAZE_SIZE && newPos[1] >= 0 && newPos[1] < MAZE_SIZE && !MAZE[newPos[0]][newPos[1]]) {
          playerPos = newPos;
          PLAYER.style.top = 10 + 80 / MAZE_SIZE * playerPos[0] + "vh";
          PLAYER.style.left = 10 + 80 / MAZE_SIZE * playerPos[1] + "vw";
          // check if player reached the goal
          if (playerPos[0] === GOAL[0] && playerPos[1] === GOAL[1]) {
            RESULT.innerHTML = "GOAL!!!";
          }
        }
      }

// start game
      function start() {
        playerPos = PLAYER_START.slice();
        PLAYER.style.top = 10 + 80 / MAZE_SIZE * playerPos[0] + "vh";
        PLAYER.style.left = 10 + 80 / MAZE_SIZE * playerPos[1] + "vw";
        RESULT.innerHTML = "";
      }

// rock paper scissors
      function rock() {
        const ai = Math.floor(Math.random() * 3);
        if (ai === 0) {
          RESULT.innerHTML = "AI: ✊ DRAW!";
        } else if (ai === 1) {
          RESULT.innerHTML = "AI: ✋ YOU LOSE!";
        } else {
          RESULT.innerHTML = "AI: ✌️ YOU WIN!";
        }
      }

// keyboard controls
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowUp") {
          movePlayer(-1, 0);
        } else if (event.key === "ArrowDown") {
          movePlayer(1, 0);
        } else if (event.key === "ArrowLeft") {
          movePlayer(0, -1);
        } else if (event.key === "ArrowRight") {
          movePlayer(0, 1);
        }
      });

// touch controls
      let touchStartPos;
      let touchEndPos;
      document.addEventListener("touchstart", (event) => {
        touchStartPos = [event.touches[0].clientX, event.touches[0].clientY];
      });
      document.addEventListener("touchend", (event) => {
        touchEndPos = [event.changedTouches[0].clientX, event.changedTouches[0].clientY];
        const dx = touchEndPos[0] - touchStartPos[0];
        const dy = touchEndPos[1] - touchStartPos[1];
        if (dx > 50 && Math.abs(dy) < dx) {
          movePlayer(0, 1);
        } else if (dx < -50 && Math.abs(dy) < -dx) {
          movePlayer(0, -1);
        } else if (dy > 50 && Math.abs(dx) < dy) {
          movePlayer(1, 0);
        } else if (dy < -50 && Math.abs(dx) < -dy) {
          movePlayer(-1, 0);
        }
      });
    </script>
  </body>
</html>