A game like Pacman and snake combined's game

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

No:27100

←

Prev Next

→

A game like Pacman and snake combined
Developer User13389｜Date and time 23/12/4 7:44:03
Build time 25.395 sec｜Game capacity 4.759KB｜

Script

Sure! Here's an example of a game that combines elements from Pacman and Snake. Since it needs to be implemented as a single HTML file and enclosed in script tags, you can copy the code below into an HTML file and run it in a web browser.

Please note that you will need to have the `emozi_all/pacman.png` and `emozi_apple.png` images in the same directory as the HTML file for the pictograms to display correctly. These images can be downloaded from online sources.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>PacSnake Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game variables
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var blockSize = 20;
        var widthInBlocks = canvas.width / blockSize;
        var heightInBlocks = canvas.height / blockSize;
        var score = 0;
        var direction;
        var timeout;

// Pictograms
        var pacManImg = new Image();
        pacManImg.src = "pacman.png";
        var foodImg = new Image();
        foodImg.src = "food.png";

// Initial snake
        var snake = [
            { x: 6, y: 4 },
            { x: 5, y: 4 },
            { x: 4, y: 4 },
            { x: 3, y: 4 },
            { x: 2, y: 4 }
        ];

// Randomly place food on the canvas
        var food = {
            x: Math.floor(Math.random() * (widthInBlocks - 1)) + 1,
            y: Math.floor(Math.random() * (heightInBlocks - 1)) + 1
        };

// Event listeners for arrow key press
        document.addEventListener("keydown", function (event) {
            var key = event.keyCode;
            if (key === 37 && direction !== "right") {
                direction = "left";
            } else if (key === 38 && direction !== "down") {
                direction = "up";
            } else if (key === 39 && direction !== "left") {
                direction = "right";
            } else if (key === 40 && direction !== "up") {
                direction = "down";
            }
        });

// Function to draw a block (used by snake and food)
        function drawBlock(x, y) {
            var xPos = x * blockSize;
            var yPos = y * blockSize;
            context.fillRect(xPos, yPos, blockSize, blockSize);
        }

// Draw the snake
        function drawSnake() {
            for (var i = 0; i < snake.length; i++) {
                var block = snake[i];
                drawBlock(block.x, block.y);
            }
        }

// Draw the food
        function drawFood() {
            context.drawImage(foodImg, food.x * blockSize, food.y * blockSize, blockSize, blockSize);
        }

// Update the score
        function updateScore() {
            context.fillStyle = "white";
            context.font = "20px Arial";
            context.fillText("Score: " + score, blockSize, blockSize);
        }

// Clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Game over function
        function gameOver() {
            clearTimeout(timeout);
            context.fillStyle = "white";
            context.font = "40px Arial";
            context.fillText("Game Over", 70, canvas.height / 2);
        }

// Main game loop
        function gameLoop() {
            clearCanvas();
            drawSnake();
            drawFood();
            updateScore();

var head = { x: snake[0].x, y: snake[0].y };
            if (direction === "right") head.x++;
            if (direction === "left") head.x--;
            if (direction === "up") head.y--;
            if (direction === "down") head.y++;

// Game over conditions
            if (head.x < 0 || head.x >= widthInBlocks || head.y < 0 || head.y >= heightInBlocks) {
                gameOver();
                return;
            }
            for (var i = 0; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    gameOver();
                    return;
                }
            }

snake.unshift(head);

// Check if snake eats the food
            if (head.x === food.x && head.y === food.y) {
                score++;
                // Generate new food
                food = {
                    x: Math.floor(Math.random() * (widthInBlocks - 1)) + 1,
                    y: Math.floor(Math.random() * (heightInBlocks - 1)) + 1
                };
            } else {
                snake.pop();
            }

timeout = setTimeout(gameLoop, 100);
        }

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

Please note that you will need to have the `pacman.png` and `food.png` images in the same directory as the HTML file for the pictograms to display correctly. These images can be downloaded from online sources.