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

No:14935

←

Prev Next

→

Superman vs superheroes
Developer User6435｜Date and time 23/9/5 1:33:33
Build time 36.095 sec｜Game capacity 4.633KB｜

Script

Superman vs Superheroes

Game Over

This is a simple game called "Superman vs Superheroes". The objective of the game is to control Batman (represented by the Superman icon in the game) using the device's orientation. The goal is to avoid colliding with the other superheroes (represented by the Superhero icons) that move randomly on the screen. If Batman collides with any of the superheroes, the game is over. To play the game, open the HTML file in a web browser on your smartphone. Tilt your phone to control Superman's movement and try to avoid the other superheroes. The game will automatically restart after game over. Note: The game assumes that you have two image files named "emozi_all/game.png" and "emozi_all/superhero.png" located in the same directory as the HTML file. Replace these images with appropriate pictograms of your choice.

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }

#game-container {
            display: flex;
            width: 300px;
            justify-content: space-between;
            margin-top: 20px;
        }

.character {
            width: 80px;
            height: 80px;
            background-size: contain;
            background-repeat: no-repeat;
        }

#superman {
            background-image: url('superman.png');
        }

.superhero {
            background-image: url('superhero.png');
        }

.game-over {
            display: none;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Superman vs Superheroes</h1>
    <div id="game-container">
        <div id="superman" class="character"></div>
        <div id="superhero1" class="character superhero"></div>
        <div id="superhero2" class="character superhero"></div>
        <div id="superhero3" class="character superhero"></div>
    </div>
    <div id="game-over" class="game-over">Game Over</div>

// Game functions
        function getRandomPosition() {
            var maxWidth = window.innerWidth - 80;
            var maxHeight = window.innerHeight - 80;
            var xPos = Math.floor(Math.random() * maxWidth);
            var yPos = Math.floor(Math.random() * maxHeight);
            return { x: xPos, y: yPos };
        }

function moveSuperheroes() {
            superheroElements.forEach(function (superheroElement) {
                var position = getRandomPosition();
                superheroElement.style.left = position.x + 'px';
                superheroElement.style.top = position.y + 'px';
            });
        }

function checkCollision() {
            superheroElements.forEach(function (superheroElement) {
                if (isColliding(supermanElement, superheroElement)) {
                    gameOver();
                }
            });
        }

function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            return (
                rect1.top < rect2.bottom &&
                rect1.bottom > rect2.top &&
                rect1.left < rect2.right &&
                rect1.right > rect2.left
            );
        }

function gameOver() {
            isGameOver = true;
            clearInterval(gameInterval);
            gameOverElement.style.display = 'block';
        }

// Event Listeners
        window.addEventListener('deviceorientation', function (event) {
            if (!isGameOver) {
                var xPos = (event.gamma + 90) / 180 * (window.innerWidth - 80);
                var yPos = (event.beta + 90) / 180 * (window.innerHeight - 80);
                superman.style.left = xPos + 'px';
                superman.style.top = yPos + 'px';

checkCollision();
            }
        });

// Game starting point
        function startGame() {
            moveSuperheroes();
            gameInterval = setInterval(moveSuperheroes, 2000);
        }
        startGame();
    </script>
</body>
</html>
```

To play the game, open the HTML file in a web browser on your smartphone. Tilt your phone to control Superman's movement and try to avoid the other superheroes. The game will automatically restart after game over.

Note: The game assumes that you have two image files named "superman.png" and "superhero.png" located in the same directory as the HTML file. Replace these images with appropriate pictograms of your choice.