AI game creator

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

No:30581

←

Prev Next

→

Pac-Man
Developer User14873｜Date and time 23/12/23 2:36:30
Build time 37.261 sec｜Game capacity 6.807KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const gridSize = 20;
            const gridWidth = canvas.width / gridSize;
            const gridHeight = canvas.height / gridSize;

const pacMan = {
                x: 0,
                y: 0,
                direction: "right"
            };

const ghosts = [
                { x: 10, y: 10 }, // Ghost 1
                { x: 5, y: 10 }, // Ghost 2
                { x: 15, y: 10 } // Ghost 3
            ];

const fruit = { x: 19, y: 19 };

const game = {
                score: 0,
                gameOver: false
            };

const directions = {
                ArrowUp: "up",
                ArrowDown: "down",
                ArrowLeft: "left",
                ArrowRight: "right"
            };

document.addEventListener("keydown", function(event) {
                const key = event.key;
                if (key in directions) {
                    event.preventDefault();
                    pacMan.direction = directions[key];
                }
            });

function drawGrid() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = "black";
                context.fillRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < canvas.width; x += gridSize) {
                    for (let y = 0; y < canvas.height; y += gridSize) {
                        context.strokeStyle = "blue";
                        context.strokeRect(x, y, gridSize, gridSize);
                    }
                }
            }

function drawPacMan() {
                context.beginPath();
                context.arc(
                    pacMan.x * gridSize + gridSize / 2,
                    pacMan.y * gridSize + gridSize / 2,
                    gridSize / 2,
                    (Math.PI / 4) * 2,
                    (Math.PI / -4) * 2,
                    pacMan.direction === "left" || pacMan.direction === "right"
                );
                context.lineTo(
                    pacMan.x * gridSize + gridSize / 2,
                    pacMan.y * gridSize + gridSize / 2
                );
                context.fillStyle = "yellow";
                context.fill();
                context.closePath();
            }

function drawGhosts() {
                context.fillStyle = "red";
          
                ghosts.forEach(ghost => {
                    context.beginPath();
                    context.arc(
                        ghost.x * gridSize + gridSize / 2,
                        ghost.y * gridSize + gridSize / 2,
                        gridSize / 2,
                        0,
                        Math.PI * 2,
                        false
                    );
                    context.fill();
                    context.closePath();
                });
            }

function drawFruit() {
                context.beginPath();
                context.arc(
                    fruit.x * gridSize + gridSize / 2,
                    fruit.y * gridSize + gridSize / 2,
                    gridSize / 2,
                    0,
                    Math.PI * 2,
                    false
                );
                context.fillStyle = "orange";
                context.fill();
                context.closePath();
            }

function updateGame() {
                if (game.gameOver) {
                    context.fillStyle = "white";
                    context.font = "30px Arial";
                    context.fillText("Game Over!", canvas.width / 2 - 80, canvas.height / 2);
                    return;
                }

drawGrid();
                drawPacMan();
                drawGhosts();
                drawFruit();

setTimeout(updateGame, 200);
            }

function movePacMan() {
                switch (pacMan.direction) {
                    case "up":
                        pacMan.y = (pacMan.y + gridHeight - 1) % gridHeight;
                        break;
                    case "down":
                        pacMan.y = (pacMan.y + 1) % gridHeight;
                        break;
                    case "left":
                        pacMan.x = (pacMan.x + gridWidth - 1) % gridWidth;
                        break;
                    case "right":
                        pacMan.x = (pacMan.x + 1) % gridWidth;
                        break;
                }

checkCollisions();
            }

function checkCollisions() {
                ghosts.forEach(ghost => {
                    if (ghost.x === pacMan.x && ghost.y === pacMan.y) {
                        game.gameOver = true;
                    }
                });

if (fruit.x === pacMan.x && fruit.y === pacMan.y) {
                    game.score += 10;
                    fruit.x = Math.floor(Math.random() * gridWidth);
                    fruit.y = Math.floor(Math.random() * gridHeight);
                }
            }

function moveGhosts() {
                ghosts.forEach(ghost => {
                    const possibleMoves = [];

const ghostDirections = [
                        { x: 0, y: -1 }, // up
                        { x: 0, y: 1 }, // down
                        { x: -1, y: 0 }, // left
                        { x: 1, y: 0 } // right
                    ];

ghostDirections.forEach(direction => {
                        const nextX = (ghost.x + direction.x + gridWidth) % gridWidth;
                        const nextY = (ghost.y + direction.y + gridHeight) % gridHeight;

if (nextX !== pacMan.x || nextY !== pacMan.y) {
                            possibleMoves.push({ x: nextX, y: nextY });
                        }
                    });

const randomMove = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
                    ghost.x = randomMove.x;
                    ghost.y = randomMove.y;
                });
            }

updateGame();
            setInterval(movePacMan, 500);
            setInterval(moveGhosts, 500);
        });
    </script>
</body>
</html>