AI game creator

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

No:14538

←

Prev Next

→

パックマン
Developer User6281｜Date and time 23/9/3 2:39:09
Build time 17.875 sec｜Game capacity 2.023KB｜

Script

了解です。以下にパックマンのゲームを実装したHTMLファイルを示します。

このHTMLファイルをブラウザで開くと、パックマンが画面内を動き回るアニメーションが表示されます。パックマンは画面の端に当たると反転して進行方向を変えます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下にパックマンのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pac-Man</title>
    <style>
      #game {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }
      .pacman {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: yellow;
        transform-origin: center;
        animation: movePacman 1s linear infinite;
      }
      @keyframes movePacman {
        0% { transform: rotate(45deg) }
        100% { transform: rotate(405deg) }
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div class="pacman"></div>
    </div>

// 初期位置と速度
        let x = 0;
        let y = 0;
        let dx = 10;
        let dy = 0;

function movePacman() {
          // 移動
          x += dx;
          y += dy;

// 壁に当たった時の処理
          if (x < 0 || x >= gameContainer.clientWidth - pacman.clientWidth) {
            dx = -dx;
          }
          if (y < 0 || y >= gameContainer.clientHeight - pacman.clientHeight) {
            dy = -dy;
          }

// 座標更新
          pacman.style.left = x + 'px';
          pacman.style.top = y + 'px';

// 次のフレームで再度movePacmanを呼び出す
          requestAnimationFrame(movePacman);
        }

// ゲームの開始
        movePacman();
      });
    </script>
  </body>
</html>
```