AI game creator

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

No:49464

←

Prev Next

→

Pac-Man
Developer User21057｜Date and time 24/3/5 3:58:30
Build time 8.122 sec｜Game capacity 1.471KB｜

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</title>
<style>
#gameBoard {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.coin {
  background-color: yellow;
  border-radius: 50%;
}

.pacman {
  background-color: yellow;
  border-radius: 50%;
}

.ghost {
  background-color: red;
  border-radius: 50%;
}

</style>
</head>
<body>

// Create game board
for (let i = 0; i < 100; i++) {
  const cell = document.createElement('div');
  cell.classList.add('coin');
  cells.push(cell);
  board.appendChild(cell);
}

// Add Pac-Man
let pacmanPosition = 0;
cells[pacmanPosition].classList.add('pacman');

// Move Pac-Man
document.addEventListener('keydown', function(event) {
  cells[pacmanPosition].classList.remove('pacman');
  switch(event.key) {
    case 'ArrowUp':
      pacmanPosition -= 10;
      break;
    case 'ArrowDown':
      pacmanPosition += 10;
      break;
    case 'ArrowLeft':
      if (pacmanPosition % 10 !== 0) {
        pacmanPosition -= 1;
      }
      break;
    case 'ArrowRight':
      if (pacmanPosition % 10 !== 9) {
        pacmanPosition += 1;
      }
      break;
  }
  
  if (cells[pacmanPosition].classList.contains('coin')) {
    cells[pacmanPosition].classList.remove('coin');
  }

cells[pacmanPosition].classList.add('pacman');
});
</script>

</body>
</html>