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

No:40136

←

Prev Next

→

パックマン
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:21:52
Build time 8.865 sec｜Game capacity 2.367KB｜

Script

了解です。以下にプログラムの例を示します。

Pacman Game

😀

このプログラムは、スマートフォンで操作した時にPacmanを指定した方向に移動させる簡単なゲームです。Pacmanの位置はcssのleftとtopプロパティで制御しています。また、キー操作のイベントリスナーを追加してキーコードに応じてPacmanの移動方向を変更しています。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にプログラムの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pacman Game</title>
    <style>
        #board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .pacman {
            position: absolute;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Pacman Game</h1>
    <div id="board">
        <div id="pacman" class="pacman">😀</div>
    </div>

// Pacmanの座標と移動方向を保持する変数
        var pacmanX = 0;
        var pacmanY = 0;
        var pacmanDirection = '';

// Pacmanを移動させる関数
        function movePacman(keyCode) {
            var pacmanElement = document.getElementById('pacman');

// 移動方向をキー操作に応じて変更
            if (keyCode === 37) {
                pacmanDirection = 'left';
            } else if (keyCode === 38) {
                pacmanDirection = 'up';
            } else if (keyCode === 39) {
                pacmanDirection = 'right';
            } else if (keyCode === 40) {
                pacmanDirection = 'down';
            }

// Pacmanの座標を変更し、表示位置を更新
            if (pacmanDirection === 'left') {
                pacmanX -= 20;
            } else if (pacmanDirection === 'up') {
                pacmanY -= 20;
            } else if (pacmanDirection === 'right') {
                pacmanX += 20;
            } else if (pacmanDirection === 'down') {
                pacmanY += 20;
            }

pacmanElement.style.left = pacmanX + 'px';
            pacmanElement.style.top = pacmanY + 'px';
        }
    </script>
</body>
</html>
```