AI game creator

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

No:43182

←

Prev Next

→

Megaman
Developer User19134｜Date and time 24/2/14 20:45:05
Build time 9.646 sec｜Game capacity 3.195KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Megaman Game</title>
    <style>
      #game-container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      #game-board {
        width: 300px;
        height: 300px;
        border: 5px solid black;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
      }
      
      .cell {
        border: 1px solid black;
      }
      
      #megaman {
        background-image: url('path-to-megaman-image');
        width: 30px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="game-board"></div>
    </div>
    
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        const gameBoard = document.getElementById("game-board");
        const megaman = document.createElement("div");
        megaman.id = "megaman";
        gameBoard.appendChild(megaman);
        
        let currentCell = { row: 5, column: 5 };
        render();
        
        function render() {
          const cells = document.getElementsByClassName("cell");
          
          // Clear previous Megaman position
          megaman.style.gridRowStart = "";
          megaman.style.gridColumnStart = "";
          
          // Set Megaman position in the current cell
          const currentCellElement = document.getElementById(`cell-${currentCell.row}-${currentCell.column}`);
          if (currentCellElement) {
            megaman.style.gridRowStart = currentCell.row;
            megaman.style.gridColumnStart = currentCell.column;
          }
          
          // Add event listener to move Megaman
          document.addEventListener("keydown", function(event) {
            switch (event.keyCode) {
              case 37: // Left arrow key
                moveMegaman("left");
                break;
              case 38: // Up arrow key
                moveMegaman("up");
                break;
              case 39: // Right arrow key
                moveMegaman("right");
                break;
              case 40: // Down arrow key
                moveMegaman("down");
                break;
            }
          });
        }
        
        function moveMegaman(direction) {
          switch (direction) {
            case "left":
              if (currentCell.column > 1) {
                currentCell.column--;
              }
              break;
            case "up":
              if (currentCell.row > 1) {
                currentCell.row--;
              }
              break;
            case "right":
              if (currentCell.column < 10) {
                currentCell.column++;
              }
              break;
            case "down":
              if (currentCell.row < 10) {
                currentCell.row++;
              }
              break;
          }
          
          render();
        }
      });
    </script>
  </body>
</html>