AI game creator

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

No:43139

←

Prev Next

→

Pac-Man
Developer User19102｜Date and time 24/2/14 11:30:25
Build time 32.403 sec｜Game capacity 9.113KB｜

Script

Score: 0

←

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>Pac-Man Game</title>
  <style>
      /* CSS styles for the game board */
    #game-board {
        display: flex;
        flex-wrap: wrap;
        width: 420px;
        height: 420px;
        border: 2px solid black;
        margin: 0 auto;
        position: relative;
        background-color: #000;
    }
    
    .tile {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: blue;
        margin: 1px;
    }
    
    .pac-dot {
        background-color: yellow;
    }
    
    .power-pellet {
        background-color: red;
    }
    
    .pacman {
        position: absolute;
        top: 195px;
        left: 195px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: yellow;
        transition: transform 0.2s ease;
    }
    
    .pacman-open {
        transform: rotate(var(--rotation-angle-open));
    }
    
    .ghost {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }
    
    .blinky {
        top: 15px;
        left: 15px;
        background-color: red;
    }
    
    .pinky {
        top: 375px;
        left: 375px;
        background-color: pink;
    }
    
    .inky {
        top: 375px;
        left: 15px;
        background-color: cyan;
    }
    
    .clyde {
        top: 15px;
        left: 375px;
        background-color: orange;
    }
    
    .score {
        margin: 20px auto;
        width: 100px;
        font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <div class="score">Score: <span id="score">0</span></div>
  
  <script>
    // Game variables
    const gameBoard = document.getElementById("game-board");
    const scoreElement = document.getElementById("score");
    const gameSpeed = 100;
    const pacDotScore = 10;
    const powerPelletScore = 50;
    let score = 0;
    
    // Game board layout
    const boardLayout = [
      "+---------+---------+",
      "|. . . . .|. . . . .|",
      "+-+-+-+-+ + +-+-+-+|",
      "|. . . . . . . . . .|",
      "+-+ +-+-+ + +-+ +-+|",
      "|. . . . . . . . . .|",
      "+-+-+ +-+ +-+ +-+-+|",
      "|. . . . . . . . . .|",
      "+ +-+-+ + +-+ +-+-+-+",
      "|. . . . . . . . .|.|",
      "+-+-+-+ +-+-+ +-+-+-+",
      "|. . . . . . . . . .|",
      "+-+-+ +-+ +-+ +-+-+|",
      "|. . . . . . . . . .|",
      "+-+ +-+-+ + +-+ +-+|",
      "|. . . . . . . . . .|",
      "+---------+---------+"
    ];
    
    // Pac-Man direction
    const directions = {
      left: "left",
      right: "right",
      up: "up",
      down: "down"
    };
    let currentDirection = directions.left;
    
    // Pac-Man rotation angles for mouth animation
    const rotationAngles = {
      closed: "0deg",
      open: "45deg"
    };
    let currentRotationAngle = rotationAngles.closed;

// Pac-Man position
    const pacman = {
      x: 7,
      y: 17
    };
    
    // Ghosts
    const ghosts = [
      { name: "blinky", x: 1, y: 1, direction: directions.down },
      { name: "pinky", x: 19, y: 19, direction: directions.up },
      { name: "inky", x: 1, y: 19, direction: directions.up },
      { name: "clyde", x: 19, y: 1, direction: directions.down }
    ];
    
    // Generate game board
    function generateGameBoard() {
      for (let row = 0; row < boardLayout.length; row++) {
        let newRow = document.createElement("div");
        newRow.classList.add("game-board-row");
        for (let col = 0; col < boardLayout[row].length; col++) {
          let newTile = document.createElement("div");
          newTile.classList.add("tile");
    
          switch (boardLayout[row][col]) {
            case ".":
              newTile.classList.add("pac-dot");
              break;
            case "+":
              newTile.classList.add("power-pellet");
              break;
            case "|":
              newTile.style.marginLeft = "4px";
              break;
            default:
              newTile.style.marginRight = "4px";
              break;
          }
    
          newRow.appendChild(newTile);
        }
        gameBoard.appendChild(newRow);
      }
    }
    
    // Move Pac-Man
    function movePacman() {
      const key = event.key;
      let newX = pacman.x;
      let newY = pacman.y;
    
      if (key === "ArrowLeft" || key === "a") {
        currentDirection = directions.left;
        newX = pacman.x - 1;
        updatePacmanRotationAngle(0);
      } else if (key === "ArrowRight" || key === "d") {
        currentDirection = directions.right;
        newX = pacman.x + 1;
        updatePacmanRotationAngle(180);
      } else if (key === "ArrowUp" || key === "w") {
        currentDirection = directions.up;
        newY = pacman.y - 1;
        updatePacmanRotationAngle(90);
      } else if (key === "ArrowDown" || key === "s") {
        currentDirection = directions.down;
        newY = pacman.y + 1;
        updatePacmanRotationAngle(270);
      }
    
      if (isValidMove(newX, newY)) {
        eatPellet(newX, newY);
        updatePacmanPosition(newX, newY);
      }
    }
    
    // Check if the move is valid
    function isValidMove(x, y) {
      if (x < 0 || x >= boardLayout[0].length || y < 0 || y >= boardLayout.length) {
        return false;
      }
    
      const tile = boardLayout[y][x];
      return tile === "." || tile === "+";
    }
    
    // Eat pellet if present
    function eatPellet(x, y) {
      const tile = boardLayout[y][x];
      if (tile === ".") {
        // Pac-Dot
        score += pacDotScore;
        boardLayout[y] = boardLayout[y].substr(0, x) + " " + boardLayout[y].substr(x + 1);
        document.getElementsByClassName("tile")[y * (boardLayout[0].length) + x].classList.remove("pac-dot");
      } else if (tile === "+") {
        // Power Pellet
        score += powerPelletScore;
        boardLayout[y] = boardLayout[y].substr(0, x) + " " + boardLayout[y].substr(x + 1);
        document.getElementsByClassName("tile")[y * (boardLayout[0].length) + x].classList.remove("power-pellet");
      }
    
      scoreElement.innerText = score;
    }
    
    // Update Pac-Man position on the board
    function updatePacmanPosition(x, y) {
      pacman.x = x;
      pacman.y = y;
    }
    
    // Update Pac-Man rotation angle for mouth animation
    function updatePacmanRotationAngle(rotationAngle) {
      gameBoard.querySelector(".pacman").style.setProperty("--rotation-angle-open", rotationAngle + "deg");
    }
    
    // Move the ghosts randomly
    function moveGhosts() {
      for (let i = 0; i < ghosts.length; i++) {
        const ghost = ghosts[i];
        let newX, newY;
    
        if (Math.random() < 0.5) {
          // Move horizontally
          if (ghost.direction === directions.left) {
            newX = ghost.x - 1;
            newY = ghost.y;
          } else {
            newX = ghost.x + 1;
            newY = ghost.y;
          }
        } else {
          // Move vertically
          if (ghost.direction === directions.up) {
            newX = ghost.x;
            newY = ghost.y - 1;
          } else {
            newX = ghost.x;
            newY = ghost.y + 1;
          }
        }
    
        if (isValidMove(newX, newY)) {
          ghost.x = newX;
          ghost.y = newY;
        } else {
          // Change direction randomly
          const directionsArray = [directions.left, directions.right, directions.up, directions.down];
          const randomDirectionIndex = Math.floor(Math.random() * directionsArray.length);
          ghost.direction = directionsArray[randomDirectionIndex];
        }
    
        const ghostElement = document.getElementsByClassName(ghost.name)[0];
        ghostElement.style.top = ghost.y * 30 + "px";
        ghostElement.style.left = ghost.x * 30 + "px";
      }
    }
    
    // Check collision with ghosts
    function checkCollisionWithGhosts() {
      const pacmanElement = document.getElementsByClassName("pacman")[0];
      const pacmanBounds = pacmanElement.getBoundingClientRect();
    
      for (let i = 0; i < ghosts.length; i++) {
        const ghost = ghosts[i];
        const ghostElement = document.getElementsByClassName(ghost.name)[0];
        const ghostBounds = ghostElement.getBoundingClientRect();
    
        if (pacmanBounds.left <= ghostBounds.right && pacmanBounds.right >= ghostBounds.left &&
            pacmanBounds.top <= ghostBounds.bottom && pacmanBounds.bottom >= ghostBounds.top) {
          endGame();
        }
      }
    }
    
    // Game over
    function endGame() {
      clearInterval(gameInterval);
      alert("Game Over!");
      location.reload();
    }
    
    // Start the game
    function startGame() {
      generateGameBoard();
      updatePacmanRotationAngle(0);
      document.addEventListener("keydown", movePacman);
      gameInterval = setInterval(function() {
        moveGhosts();
        checkCollisionWithGhosts();
      }, gameSpeed);
    }
    
    // Initialize game
    startGame();
  </script>
</body>
</html>