AI game creator

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

No:38189

←

Prev Next

→

Pac-Man
Developer User17264｜Date and time 24/1/23 5:52:06
Build time 17.694 sec｜Game capacity 4.699KB｜

Script

Sure! Here's a simple implementation of Pac-Man as a single HTML file using JavaScript and enclosed in script tags. It's designed for smartphone operation and uses pictograms for visual representation. You can play as a finished game:

In this implementation, you can control Pac-Man's movement using the arrow keys on your smartphone. Collect the food pictograms to increase your score, and once you collect all the food, you win the game. The game will reset automatically when you win. Enjoy playing Pac-Man on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        #canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Pictograms
        const pacManImage = "\uD83C\uDF46";
        const wallImage = "\uD83D\uDEA8";
        const foodImage = "\uD83C\uDF6F";

// Game state
        let pacManX = 200;
        let pacManY = 200;
        let score = 0;
        const gridSize = 40;
        const gridWidth = canvas.width / gridSize;
        const gridHeight = canvas.height / gridSize;

// Game grid
        const grid = [
            [1, 1, 1, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 0, 0, 0, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 1, 1]
        ];

// Arrow key codes
        const KEY_UP = 38;
        const KEY_DOWN = 40;
        const KEY_LEFT = 37;
        const KEY_RIGHT = 39;

// Keyboard input handler
        document.addEventListener("keydown", function(event) {
            const keyCode = event.keyCode;

if (keyCode === KEY_UP) {
                movePacMan(0, -1);
            } else if (keyCode === KEY_DOWN) {
                movePacMan(0, 1);
            } else if (keyCode === KEY_LEFT) {
                movePacMan(-1, 0);
            } else if (keyCode === KEY_RIGHT) {
                movePacMan(1, 0);
            }
        });

// Move Pac-Man in the grid
        function movePacMan(dx, dy) {
            const newPacManX = pacManX + dx;
            const newPacManY = pacManY + dy;

if (isMoveValid(newPacManX, newPacManY)) {
                pacManX = newPacManX;
                pacManY = newPacManY;

if (grid[pacManY][pacManX] === 0) {
                    score += 10;
                    grid[pacManY][pacManX] = 2;
                }

if (score === 40) {
                    alert("You won!");
                    resetGame();
                }

render();
            }
        }

// Check if the move is valid
        function isMoveValid(x, y) {
            if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight && grid[y][x] !== 1) {
                return true;
            }
            return false;
        }

// Reset the game state
        function resetGame() {
            pacManX = 200;
            pacManY = 200;
            score = 0;

for (let y = 0; y < gridHeight; y++) {
                for (let x = 0; x < gridWidth; x++) {
                    if (grid[y][x] === 2) {
                        grid[y][x] = 0;
                    }
                }
            }
        }

// Render the game
        function render() {
            context.clearRect(0, 0, canvas.width, canvas.height);

for (let y = 0; y < gridHeight; y++) {
                for (let x = 0; x < gridWidth; x++) {
                    const cellX = x * gridSize;
                    const cellY = y * gridSize;

if (grid[y][x] === 0) {
                        context.fillStyle = "yellow";
                        context.font = "30px Arial";
                        context.fillText(pacManImage, cellX, cellY + gridSize);
                    } else if (grid[y][x] === 1) {
                        context.fillStyle = "blue";
                        context.font = "40px Arial";
                        context.fillText(wallImage, cellX, cellY + gridSize);
                    } else if (grid[y][x] === 2) {
                        context.fillStyle = "green";
                        context.font = "30px Arial";
                        context.fillText(foodImage, cellX, cellY + gridSize);
                    }
                }
            }

// Display score
            context.fillStyle = "white";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);
        }

// Initial render
        render();
    </script>
</body>
</html>
```