AI game creator

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

No:29964

←

Prev Next

→

Horse Ride Road
Developer User14673｜Date and time 23/12/20 3:21:10
Build time 13.671 sec｜Game capacity 2.838KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Horse Ride Road</title>
    <style>
      #game-board {
        display: flex;
        flex-wrap: wrap;
        max-width: 400px;
        margin: 0 auto;
      }

.cell {
        flex-basis: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
      }

.player {
        background-color: lightblue;
      }

.obstacle {
        background-color: yellow;
      }

.empty {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Define game state
      let playerPosition = { row: 0, col: 0 };
      let obstacles = [
        { row: 1, col: 2 },
        { row: 2, col: 1 },
        { row: 2, col: 3 },
        { row: 3, col: 4 },
      ];

// Generate the game board
      const gameBoardElement = document.getElementById("game-board");

for (let row = 0; row < ROWS; row++) {
        for (let col = 0; col < COLS; col++) {
          const cell = document.createElement("div");
          cell.classList.add("cell");

if (row === playerPosition.row && col === playerPosition.col) {
            cell.classList.add("player");
            cell.innerHTML = "🐴";
          } else if (obstacles.some((obstacle) => obstacle.row === row && obstacle.col === col)) {
            cell.classList.add("obstacle");
            cell.innerHTML = "🚧";
          } else {
            cell.classList.add("empty");
          }

gameBoardElement.appendChild(cell);
        }
      }

// Handle player movement
      document.addEventListener("keydown", handleKeyDown);

function handleKeyDown(event) {
        let newRow = playerPosition.row;
        let newCol = playerPosition.col;

if (event.key === "ArrowUp" && playerPosition.row > 0) {
          newRow--;
        } else if (event.key === "ArrowDown" && playerPosition.row < ROWS - 1) {
          newRow++;
        } else if (event.key === "ArrowLeft" && playerPosition.col > 0) {
          newCol--;
        } else if (event.key === "ArrowRight" && playerPosition.col < COLS - 1) {
          newCol++;
        }

if (!obstacles.some((obstacle) => obstacle.row === newRow && obstacle.col === newCol)) {
          const oldCell = document.getElementsByClassName("player")[0];
          const newCell = document.getElementsByClassName("empty")[newRow * COLS + newCol];

oldCell.classList.remove("player");
          oldCell.innerHTML = "";

newCell.classList.add("player");
          newCell.innerHTML = "🐴";

playerPosition.row = newRow;
          playerPosition.col = newCol;
        }
      }
    </script>
  </body>
</html>