AI game creator

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

No:34491

←

Prev Next

→

パックマン
Developer User16261｜Date and time 24/1/10 22:22:17
Build time 15.668 sec｜Game capacity 2.814KB｜

Script

了解しました。以下にパックマンのゲームを実装したサンプルコードを示します。

👻

上記のコードは、キーボードの矢印キーでパックマンを操作することができます。パックマンは画面内を往復しながら動き続けます。画面端に到達した場合は反対側から再び現れます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下にパックマンのゲームを実装したサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pacman</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

#game {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background-color: black;
    }

#pacman {
      font-size: 48px;
      color: yellow;
    }
  </style>
</head>
<body>
  <div id="game">
    <span id="pacman">👻</span>
  </div>

let pacmanLeft = 0;
      let pacmanTop = 0;
      let pacmanDirection = 'right';

function movePacman() {
        switch (pacmanDirection) {
          case 'right':
            pacmanLeft = pacmanLeft + 10;
            break;
          case 'left':
            pacmanLeft = pacmanLeft - 10;
            break;
          case 'up':
            pacmanTop = pacmanTop - 10;
            break;
          case 'down':
            pacmanTop = pacmanTop + 10;
            break;
        }

pacman.style.left = pacmanLeft + 'px';
        pacman.style.top = pacmanTop + 'px';
      }

function changeDirection(event) {
        switch (event.key) {
          case 'ArrowRight':
            pacmanDirection = 'right';
            pacman.textContent = '👉';
            break;
          case 'ArrowLeft':
            pacmanDirection = 'left';
            pacman.textContent = '👈';
            break;
          case 'ArrowUp':
            pacmanDirection = 'up';
            pacman.textContent = '👆';
            break;
          case 'ArrowDown':
            pacmanDirection = 'down';
            pacman.textContent = '👇';
            break;
        }
      }

document.addEventListener('keydown', changeDirection);

function animate() {
        movePacman();

if (pacmanLeft >= game.offsetWidth) {
          pacmanLeft = -pacman.offsetWidth;
        } else if (pacmanLeft + pacman.offsetWidth <= 0) {
          pacmanLeft = game.offsetWidth;
        }

if (pacmanTop >= game.offsetHeight) {
          pacmanTop = -pacman.offsetHeight;
        } else if (pacmanTop + pacman.offsetHeight <= 0) {
          pacmanTop = game.offsetHeight;
        }

setTimeout(animate, 200);
      }

animate();
    });
  </script>
</body>
</html>
```