AI game creator

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

No:14338

←

Prev Next

→

Pac-Man
Developer User6136｜Date and time 23/9/1 1:30:12
Build time 22.049 sec｜Game capacity 3.845KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        #game-board {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: black;
            border: 5px solid #333;
        }
        .pac-dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: yellow;
            border-radius: 50%;
        }
        #pac-man {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: yellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pac-man"></div>
        <div class="pac-dot" style="left: 30px; top: 30px;"></div>
        <div class="pac-dot" style="left: 70px; top: 30px;"></div>
        <div class="pac-dot" style="left: 110px; top: 30px;"></div>
        
    </div>

// Initialize game variables
        var gameBoard = document.getElementById('game-board');
        var pacMan = document.getElementById('pac-man');
        var pacDots = document.getElementsByClassName('pac-dot');

var score = 0; // Keep track of score
        var pacManPosition = { x: 30, y: 30 };
        var velocity = { x: 0, y: 0 };

// Event listeners for arrow key presses
        document.addEventListener('keydown', function (event) {
            switch (event.keyCode) {
                case 37: // Left arrow key
                    velocity.x = -10;
                    velocity.y = 0;
                    break;
                case 38: // Up arrow key
                    velocity.x = 0;
                    velocity.y = -10;
                    break;
                case 39: // Right arrow key
                    velocity.x = 10;
                    velocity.y = 0;
                    break;
                case 40: // Down arrow key
                    velocity.x = 0;
                    velocity.y = 10;
                    break;
            }
        });

// Game loop
        function update() {
            // Update Pac-Man's position
            pacManPosition.x += velocity.x;
            pacManPosition.y += velocity.y;

// Check collision with pac-dots
            for (var i = 0; i < pacDots.length; i++) {
                var pacDot = pacDots[i];
                if (isColliding(pacMan, pacDot)) {
                    pacDot.style.display = 'none';
                    score += 10;
                }
            }

// Update score on UI
            document.getElementById('score').innerText = 'Score: ' + score;

// Check collision with game boundaries
            if (pacManPosition.x < 0) pacManPosition.x = 0;
            if (pacManPosition.y < 0) pacManPosition.y = 0;
            if (pacManPosition.x >= 300) pacManPosition.x = 300;
            if (pacManPosition.y >= 300) pacManPosition.y = 300;

// Update Pac-Man's position on UI
            pacMan.style.left = pacManPosition.x + 'px';
            pacMan.style.top = pacManPosition.y + 'px';

// Call update function again after 100ms (10 frames per second)
            setTimeout(update, 100);
        }

// Function to check collision between two elements
        function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }

// Start the game
        update();
    </script>
</body>
</html>