Pac-Man The player controls Pac-Man. Eating the bait on the screen earns you a score, but the game is over when you hit the ghosts.'s game

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

No:8422

12485

←

Prev Next

→

Pac-Man The player controls Pac-Man. Eating the ba..ALL
Developer anonymous｜Date and time 70/1/1 10:11:37
Build time unknown sec｜Game capacity 4.297KB｜

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>パックマン</title>
  <style>
    #pacman {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
    }
    .dot {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: yellow;
      border-radius: 50%;
    }
    .enemy {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="pacman">🙂</div>

let score = 0;
    const pacman = document.getElementById('pacman');

function movePacman(event) {
      const key = event.key;
      const topPos = pacman.offsetTop;
      const leftPos = pacman.offsetLeft;

if (key === 'ArrowUp') {
        pacman.style.top = topPos - 10 + 'px';
      } else if (key === 'ArrowDown') {
        pacman.style.top = topPos + 10 + 'px';
      } else if (key === 'ArrowLeft') {
        pacman.style.left = leftPos - 10 + 'px';
      } else if (key === 'ArrowRight') {
        pacman.style.left = leftPos + 10 + 'px';
      }

checkCollision();
      checkWin();
    }

function checkCollision() {
      const dots = document.getElementsByClassName('dot');
      const enemies = document.getElementsByClassName('enemy');
      const pacmanRect = pacman.getBoundingClientRect();

for (let i = 0; i < dots.length; i++) {
        const dotRect = dots[i].getBoundingClientRect();
        if (isCollided(pacmanRect, dotRect)) {
          dots[i].remove();
          score += 10;
          break;
        }
      }

for (let i = 0; i < enemies.length; i++) {
        const enemyRect = enemies[i].getBoundingClientRect();
        if (isCollided(pacmanRect, enemyRect)) {
          gameOver();
          break;
        }
      }
    }

function isCollided(rect1, rect2) {
      return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
      );
    }

function gameOver() {
      alert(`ゲームオーバー！ スコア: ${score}`);
      resetGame();
    }

function resetGame() {
      score = 0;
      const dots = document.getElementsByClassName('dot');
      const enemies = document.getElementsByClassName('enemy');

while (dots.length > 0) {
        dots[0].remove();
      }

while (enemies.length > 0) {
        enemies[0].remove();
      }

const pacman = document.getElementById('pacman');
      pacman.style.top = '50%';
      pacman.style.left = '50%';
    }

// ランダムにエサを生成
    for (let i = 0; i < 20; i++) {
      const dot = document.createElement('div');
      dot.classList.add('dot');
      dot.style.top = Math.floor(Math.random() * 90) + '%';
      dot.style.left = Math.floor(Math.random() * 90) + '%';
      document.body.appendChild(dot);
    }

// ランダムにお化けを生成
    for (let i = 0; i < 3; i++) {
      const enemy = document.createElement('div');
      enemy.classList.add('enemy');
      enemy.style.top = Math.floor(Math.random() * 90) + '%';
      enemy.style.left = Math.floor(Math.random() * 90) + '%';
      document.body.appendChild(enemy);
    }
  </script>
</body>
</html>
```

この例では、矢印キーでパックマンを操作し、画面上のエサを食べることでスコアを獲得します。パックマンがお化けに当たるとゲームオーバーとなり、エサを全て食べるとゲームクリアです。また、エサとお化けはランダムに生成されます。

ただし、この実装例はスマートフォンでの操作には対応していませんが、パソコンのブラウザ上で動作します。スマートフォンでの操作に対応するためには、タッチイベントを追加する必要があります。