AI game creator

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

No:44647

130

←

Prev Next

→

Pac-Man
Developer User19444｜Date and time 24/2/18 22:26:00
Build time 8.552 sec｜Game capacity 2.299KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Pac-Man Game</title>
<style>
#game-board {
  width: 300px;
  height: 300px;
  background-color: black;
  position: relative;
}

.pacman {
  width: 20px;
  height: 20px;
  background-color: yellow;
  border-radius: 50%;
  position: absolute;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}

</style>
</head>
<body>
<div id="game-board">
</div>

// Initialize Pac-Man
let pacman = document.createElement('div');
pacman.className = 'pacman';
pacman.style.left = '140px';
pacman.style.top = '140px';
board.appendChild(pacman);

// Generate dots on the board
for (let i = 0; i < 100; i++) {
  let dot = document.createElement('div');
  dot.className = 'dot';
  dot.style.left = Math.floor(Math.random() * 290) + 'px';
  dot.style.top = Math.floor(Math.random() * 290) + 'px';
  board.appendChild(dot);
  dots++;
}

// Move Pac-Man
document.addEventListener('keydown', function(event) {
  let pacmanRect = pacman.getBoundingClientRect();
    
  if (event.key === 'ArrowUp') {
    if (pacmanRect.top > 0) {
      pacman.style.top = pacmanRect.top - 10 + 'px';
    }
  } else if (event.key === 'ArrowDown') {
    if (pacmanRect.bottom < board.clientHeight) {
      pacman.style.top = pacmanRect.top + 10 + 'px';
    }
  } else if (event.key === 'ArrowLeft') {
    if (pacmanRect.left > 0) {
      pacman.style.left = pacmanRect.left - 10 + 'px';
    }
  } else if (event.key === 'ArrowRight') {
    if (pacmanRect.right < board.clientWidth) {
      pacman.style.left = pacmanRect.left + 10 + 'px';
    }
  }
  
  checkCollision(pacman);
});

// Check collision with dots
function checkCollision(pacman) {
  let pacmanRect = pacman.getBoundingClientRect();
  let dotsList = document.getElementsByClassName('dot');
  
  for (let dot of dotsList) {
    let dotRect = dot.getBoundingClientRect();
    
    if (pacmanRect.top < dotRect.bottom &&
        pacmanRect.bottom > dotRect.top &&
        pacmanRect.left < dotRect.right &&
        pacmanRect.right > dotRect.left) {
      dot.parentNode.removeChild(dot);
      dots--;
      
      if (dots === 0) {
        alert('You won!');
      }
    }
  }
}
</script>

</body>
</html>