AI game creator

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

No:47200

103

←

Prev Next

→

Snake vs pacman
Developer User18896｜Date and time 24/2/27 18:03:58
Build time 15.626 sec｜Game capacity 3.309KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake vs Pacman</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        const grid = 20;
        let snake = {
            x: 160,
            y: 160,
            dx: grid,
            dy: 0,
            cells: [{x: 160, y: 160}],
            maxCells: 3
        };
        let pacMan = {
            x: 50,
            y: 50
        };
        
        function getRandomPosition() {
            return Math.floor(Math.random() * 20) * grid;
        }
        
        pacMan.x = getRandomPosition();
        pacMan.y = getRandomPosition();
        
        function drawSnake() {
            ctx.fillStyle = 'green';
            snake.cells.forEach(cell => ctx.fillRect(cell.x, cell.y, grid-1, grid-1));
        }
        
        function drawPacMan() {
            ctx.fillStyle = 'yellow';
            ctx.fillRect(pacMan.x, pacMan.y, grid-1, grid-1);
        }
        
        function updateSnake() {
            snake.x += snake.dx;
            snake.y += snake.dy;
            if (snake.x < 0) {
                snake.x = canvas.width - grid;
            }
            if (snake.y < 0) {
                snake.y = canvas.height - grid;
            }
            if (snake.x >= canvas.width) {
                snake.x = 0;
            }
            if (snake.y >= canvas.height) {
                snake.y = 0;
            }
            
            snake.cells.unshift({x: snake.x, y: snake.y});
            if (snake.cells.length > snake.maxCells) {
                snake.cells.pop();
            }
        }
        
        function checkCollision() {
            if (snake.x === pacMan.x && snake.y === pacMan.y) {
                snake.maxCells++;
                pacMan.x = getRandomPosition();
                pacMan.y = getRandomPosition();
            }
        }
        
        function changeDirection(e) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;
        
            if (e.keyCode === LEFT_KEY && snake.dx === 0) {
                snake.dx = -grid;
                snake.dy = 0;
            }
            if (e.keyCode === RIGHT_KEY && snake.dx === 0) {
                snake.dx = grid;
                snake.dy = 0;
            }
            if (e.keyCode === UP_KEY && snake.dy === 0) {
                snake.dy = -grid;
                snake.dx = 0;
            }
            if (e.keyCode === DOWN_KEY && snake.dy === 0) {
                snake.dy = grid;
                snake.dx = 0;
            }
        }
        
        function main() {
            setTimeout(function onTick() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawPacMan();
                drawSnake();
                updateSnake();
                checkCollision();
                main();
            }, 100)
        }
        
        document.addEventListener('keydown', changeDirection);
        main();
    </script>
</body>
</html>
```