Snake vs pacman if snake catches pacman he grows if pacman hits snake he gets smaller's game

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

No:47201

←

Prev Next

→

Snake vs pacman if snake catches pacman he grows i..ALL
Developer User18896｜Date and time 24/2/27 18:05:19
Build time 13.381 sec｜Game capacity 2.893KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake vs Pacman Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

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

let pacman = { x: 200, y: 200, radius: 10, color: "yellow" };
    let snake = { x: 50, y: 50, width: 20, height: 20, color: "green", dx: 0, dy: 0, speed: 1 };
    let snakeSize = 3;

function drawPacman() {
        ctx.beginPath();
        ctx.arc(pacman.x, pacman.y, pacman.radius, 0, Math.PI * 2);
        ctx.fillStyle = pacman.color;
        ctx.fill();
    }

function drawSnake() {
        ctx.fillStyle = snake.color;
        ctx.fillRect(snake.x, snake.y, snake.width, snake.height);
    }

function update() {
        snake.x += snake.dx * snake.speed;
        snake.y += snake.dy * snake.speed;

if (snake.x < 0) {
            snake.x = canvas.width - snake.width;
        }
        if (snake.x + snake.width > canvas.width) {
            snake.x = 0;
        }
        if (snake.y < 0) {
            snake.y = canvas.height - snake.height;
        }
        if (snake.y + snake.height > canvas.height) {
            snake.y = 0;
        }

if (snake.x < pacman.x + pacman.radius &&
            snake.x + snake.width > pacman.x - pacman.radius &&
            snake.y < pacman.y + pacman.radius &&
            snake.y + snake.height > pacman.y - pacman.radius) {

snakeSize++;
            pacman.x = Math.random() * canvas.width;
            pacman.y = Math.random() * canvas.height;
        }

draw();
    }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPacman();
        drawSnake();

if (snakeSize > 1) {
            for (let i = snakeSize - 1; i > 0; i--) {
                snake[i] = { x: snake[i - 1].x, y: snake[i - 1].y };
            }
        }

requestAnimationFrame(update);
    }

document.addEventListener("keydown", (event) => {
        switch (event.key) {
            case "ArrowUp":
                snake.dx = 0;
                snake.dy = -1;
                break;
            case "ArrowDown":
                snake.dx = 0;
                snake.dy = 1;
                break;
            case "ArrowLeft":
                snake.dx = -1;
                snake.dy = 0;
                break;
            case "ArrowRight":
                snake.dx = 1;
                snake.dy = 0;
                break;
        }
    });

update();
</script>
</body>
</html>
```