Pac-Man tornado for all devices's game | AI game creator

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

No:17195

175

Pac-Man tornado for all devices
Developer User7570｜Date and time 23/9/22 9:55:49
Build time 24.801 sec｜Game capacity 3.654KB｜

In the provided code snippet, we have implemented a basic Pac-Man game with a tornado using HTML, CSS, and JavaScript. The game is enclosed within `
` tags and can be saved as a single HTML file for easy execution. To make the game responsive for smartphone operation, the game board has a width and height of 400px, which can be adjusted based on the screen size of the smartphone. The Pac-Man and tornado images are displayed as background images using CSS classes. These images can be replaced with pictograms if desired. The game starts with the Pac-Man positioned at the top left corner of the game board and the tornado at the center. The player can control Pac-Man's movement using the arrow keys. The game checks for collisions between Pac-Man and the tornado, and if they collide, a game over message is displayed using `alertHisa()`. Note: The images "emozi_all/pacman.png" and "emozi_all/tornado.png" should be placed in the same directory as the HTML file for them to be displayed correctly.

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Tornado</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }

.pacman {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url("pacman.png");
            background-size: cover;
        }

.tornado {
            width: 80px;
            height: 80px;
            position: absolute;
            background-image: url("tornado.png");
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="pacman" class="pacman"></div>
        <div id="tornado" class="tornado"></div>
    </div>

<script>
        var pacman = document.getElementById('pacman');
        var tornado = document.getElementById('tornado');

var pacmanPosition = {
            top: 0,
            left: 0
        };

var tornadoPosition = {
            top: 200,
            left: 200
        };

function move(event) {
            switch (event.keyCode) {
                case 37: // left
                    if (pacmanPosition.left >= 10) {
                        pacmanPosition.left -= 10;
                    }
                    break;
                case 38: // up
                    if (pacmanPosition.top >= 10) {
                        pacmanPosition.top -= 10;
                    }
                    break;
                case 39: // right
                    if (pacmanPosition.left <= 350) {
                        pacmanPosition.left += 10;
                    }
                    break;
                case 40: // down
                    if (pacmanPosition.top <= 350) {
                        pacmanPosition.top += 10;
                    }
                    break;
            }

pacman.style.top = pacmanPosition.top + 'px';
            pacman.style.left = pacmanPosition.left + 'px';

checkCollision();
        }

function checkCollision() {
            var pacmanRect = pacman.getBoundingClientRect();
            var tornadoRect = tornado.getBoundingClientRect();

if (
                pacmanRect.top < tornadoRect.bottom &&
                pacmanRect.bottom > tornadoRect.top &&
                pacmanRect.left < tornadoRect.right &&
                pacmanRect.right > tornadoRect.left
            ) {
                alert('Game Over! Pac-Man got caught in the tornado.');
            }
        }

window.addEventListener('keydown', move);
    </script>
</body>
</html>
```

In the provided code snippet, we have implemented a basic Pac-Man game with a tornado using HTML, CSS, and JavaScript. The game is enclosed within `<script>` tags and can be saved as a single HTML file for easy execution.

To make the game responsive for smartphone operation, the game board has a width and height of 400px, which can be adjusted based on the screen size of the smartphone. The Pac-Man and tornado images are displayed as background images using CSS classes. These images can be replaced with pictograms if desired.

The game starts with the Pac-Man positioned at the top left corner of the game board and the tornado at the center. The player can control Pac-Man's movement using the arrow keys. The game checks for collisions between Pac-Man and the tornado, and if they collide, a game over message is displayed using `alert()`.

Note: The images "pacman.png" and "tornado.png" should be placed in the same directory as the HTML file for them to be displayed correctly.