Make a platformer game with levels,coins, and enemys.'s game

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

No:27684

104

←

Prev Next

→

Make a platformer game with levels,coins, and enem..ALL
Developer User12467｜Date and time 23/12/8 5:55:46
Build time 36.24 sec｜Game capacity 3.316KB｜

Script

Sure! Here's a simple platformer game using JavaScript, HTML, and CSS:

This code creates a simple platformer game with a player character (red square) that can be controlled using the left and right arrow keys. The player needs to collect the coins (yellow squares) while avoiding the enemies (purple squares). If the player collides with an enemy, a game over alert is shown, and the game restarts.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple platformer game using JavaScript, HTML, and CSS:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Platformer Game</title>
    <style>
        body {
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
        }
        
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            top: 0;
            left: 0;
        }
        
        .coin {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: yellow;
        }
        
        .enemy {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="player"></div>
    <div class="coin" style="top: 100px; left: 200px;"></div>
    <div class="coin" style="top: 200px; left: 400px;"></div>
    <div class="enemy" style="top: 300px; left: 600px;"></div>
    
    <script>
        // Game variables
        var player = document.getElementById("player");
        var coins = document.getElementsByClassName("coin");
        var enemies = document.getElementsByClassName("enemy");
        
        // Player movement
        function movePlayer(event) {
            var key = event.keyCode;
            
            // Left arrow key
            if (key === 37) {
                player.style.left = parseInt(player.style.left) - 10 + "px";
            }
            
            // Right arrow key
            else if (key === 39) {
                player.style.left = parseInt(player.style.left) + 10 + "px";
            }
        }
        
        // Collision detection
        function checkCollisions() {
            for (var i = 0; i < coins.length; i++) {
                if (isColliding(player, coins[i])) {
                    coins[i].style.display = "none"; // Hide collided coin
                }
            }
            
            for (var j = 0; j < enemies.length; j++) {
                if (isColliding(player, enemies[j])) {
                    alert("Game Over!"); // Show game over message
                    location.reload(); // Refresh the page to restart the game
                }
            }
        }
        
        // Helper function to check collision between two elements
        function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
        
        // Add event listener for player movement
        window.addEventListener("keydown", movePlayer);
        
        // Game loop
        setInterval(checkCollisions, 100);
    </script>
</body>
</html>
```