AI game creator

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

No:31466

←

Prev Next

→

Pac-Man
Developer User15147｜Date and time 23/12/27 1:20:27
Build time 40.849 sec｜Game capacity 5.795KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man</title>
    <style>
        #game-board {
            width: 304px;
            height: 648px;
            border: 2px solid black;
            background-color: black;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .pacman {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('pacman.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        .ghost {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('ghost.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        .food {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: yellow;
            border-radius: 50%;
        }
        
        #score {
            font-family: Arial, sans-serif;
            font-size: 20px;
            color: white;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="score"></div>
    </div>
    
    <script>
        // Game configuration
        const boardSize = 15;
        const pacmanSpeed = 200; // in milliseconds
        const ghostSpeed = 300; // in milliseconds
        const foodPoints = 10;
        const ghostPoints = -50;
        
        // Game state variables
        let score = 0;
        let pacmanPosition = { x: 0, y: 0 };
        let ghostPosition = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) };
        let foodPositions = [];
        
        // Function to generate random food positions
        function generateFoodPositions() {
            let positions = [];
            while (positions.length < 5) {
                const x = Math.floor(Math.random() * boardSize);
                const y = Math.floor(Math.random() * boardSize);
                if ((x !== pacmanPosition.x || y !== pacmanPosition.y) && (x !== ghostPosition.x || y !== ghostPosition.y)) {
                    positions.push({ x, y });
                }
            }
            return positions;
        }
        
        // Function to update the game board
        function updateGameBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = ''; // Clear the previous state
            
            // Render pacman
            const pacman = document.createElement('div');
            pacman.className = 'pacman';
            pacman.style.left = pacmanPosition.x * 40 + 'px';
            pacman.style.top = pacmanPosition.y * 40 + 'px';
            gameBoard.appendChild(pacman);
            
            // Render ghost
            const ghost = document.createElement('div');
            ghost.className = 'ghost';
            ghost.style.left = ghostPosition.x * 40 + 'px';
            ghost.style.top = ghostPosition.y * 40 + 'px';
            gameBoard.appendChild(ghost);
            
            // Render food
            for (const position of foodPositions) {
                const food = document.createElement('div');
                food.className = 'food';
                food.style.left = position.x * 40 + 'px';
                food.style.top = position.y * 40 + 'px';
                gameBoard.appendChild(food);
            }
            
            // Update the score
            document.getElementById('score').textContent = 'Score: ' + score;
        }
        
        // Function to handle user input
        function handleUserInput(event) {
            let dx = 0;
            let dy = 0;
            
            switch (event.key) {
                case 'ArrowUp':
                    dy = -1;
                    break;
                case 'ArrowDown':
                    dy = 1;
                    break;
                case 'ArrowLeft':
                    dx = -1;
                    break;
                case 'ArrowRight':
                    dx = 1;
                    break;
            }
            
            // Check for collision with food
            for (let i = 0; i < foodPositions.length; i++) {
                if (foodPositions[i].x === pacmanPosition.x + dx && foodPositions[i].y === pacmanPosition.y + dy) {
                    score += foodPoints;
                    foodPositions.splice(i, 1);
                    break;
                }
            }
            
            // Check for collision with ghost
            if (pacmanPosition.x + dx === ghostPosition.x && pacmanPosition.y + dy === ghostPosition.y) {
                score += ghostPoints;
                ghostPosition = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) };
            }
            
            // Move pacman in the specified direction if valid
            if (
                (pacmanPosition.x + dx >= 0 && pacmanPosition.x + dx < boardSize) &&
                (pacmanPosition.y + dy >= 0 && pacmanPosition.y + dy < boardSize)
            ) {
                pacmanPosition.x += dx;
                pacmanPosition.y += dy;
            }
            
            // Update the game board after the move
            updateGameBoard();
        }
        
        // Start the game
        function startGame() {
            foodPositions = generateFoodPositions();
            updateGameBoard();
            document.addEventListener('keydown', handleUserInput);
        }
        
        // Call the startGame function when the page loads
        window.onload = startGame;
    </script>
</body>
</html>