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

No:11063

←

Prev Next

→

A transformers game
Developer User4769｜Date and time 23/8/7 7:52:01
Build time 20.282 sec｜Game capacity 3.853KB｜

Script

Sure! Here's a simple Transformers game implemented as a single HTML file using JavaScript. The game is designed for smartphone operation and uses pictograms for a visually appealing experience. The user can play the game as a finished game.

Transformers Game

This code sets up a simple game where the player (represented by a pictogram of a Transformers character) can be controlled using touch input on a smartphone screen. The player needs to avoid collision with the enemy (another pictogram of a Transformers character) moving downwards. If the player collides with the enemy, the game ends, and if the player manages to avoid collision until the enemy reaches the bottom, they win.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Transformers Game</title>
    <style>
        body {
            background-color: #292929;
            color: #FFF;
            font-family: Arial, sans-serif;
            text-align: center;
        }

#gameContainer {
            height: 320px;
            width: 320px;
            margin: 0 auto;
            position: relative;
            user-select: none;
        }

#player {
            width: 80px;
            height: 80px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('player.png');
            background-size: cover;
        }

#enemy {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('enemy.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>Transformers Game</h1>
    <div id="gameContainer">
        <div id="player"></div>
        <div id="enemy"></div>
    </div>

// Player starting position
            var playerPosition = {
                x: (gameContainer.clientWidth / 2) - (enemy.clientWidth / 2),
                y: gameContainer.clientHeight - player.clientHeight
            };
            player.style.left = playerPosition.x + "px";
            player.style.bottom = playerPosition.y + "px";

// Enemy starting position
            var enemyPosition = {
                x: (gameContainer.clientWidth / 2) - (enemy.clientWidth / 2),
                y: 0
            };
            enemy.style.left = enemyPosition.x + "px";
            enemy.style.top = enemyPosition.y + "px";

// Move the player
            gameContainer.addEventListener("mousemove", function(event) {
                playerPosition.x = Math.max(0, Math.min(event.clientX - player.clientWidth / 2, gameContainer.clientWidth - player.clientWidth));
                player.style.left = playerPosition.x + "px";
            });

// Game loop
            var gameLoop = setInterval(function() {
                // Check collision
                if (playerPosition.x === enemyPosition.x && playerPosition.y === enemyPosition.y) {
                    clearInterval(gameLoop);
                    alert("You won!");
                }

// Move enemy downwards
                enemyPosition.y += 2;
                if (enemyPosition.y > gameContainer.clientHeight - enemy.clientHeight) {
                    clearInterval(gameLoop);
                    alert("Game over!");
                }
                enemy.style.top = enemyPosition.y + "px";
            }, 10);
        });
    </script>
</body>
</html>
```