A monster platformer with some coins's game

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

No:14652

←

Prev Next

→

A monster platformer with some coins
Developer User6338｜Date and time 23/9/4 0:27:51
Build time 44.896 sec｜Game capacity 5.058KB｜

Script

Sure, here's an example of a monster platformer game with coins implemented as a single HTML file using JavaScript:

This HTML file creates a simple platformer game where the player can control a character using the left and right arrow keys. The goal is to collect all the coins on the screen. The player can jump using the spacebar. Once all the coins are collected, a game over message will be displayed. The game is designed to be playable on a smartphone. The game logic is implemented in JavaScript using the `
` tags. The canvas element is used to draw the platforms, coins, and player character. The player's movements, collisions with platforms and coins, and game over conditions are all handled within the game loop function. The game loop continuously updates the game state and redraws the canvas using the `requestAnimationFrame` method. I hope this example helps you in creating your own monster platformer game with coins!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure, here's an example of a monster platformer game with coins implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monster Platformer</title>
    <style>
        #gameCanvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="gameCanvas"></div>

// Game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

player.dy += 0.5;
            player.y += player.dy;
            player.x += player.dx;

if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
                player.dy = 0;
                player.jumping = false;
            }

if (player.x < 0) {
                player.x = 0;
            } else if (player.x + player.width > canvas.width) {
                player.x = canvas.width - player.width;
            }

platforms.forEach(function(platform) {
                ctx.fillStyle = "#000000";
                ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
            });

coins.forEach(function(coin) {
                if (!coin.collected) {
                    ctx.fillStyle = "#FFD700";
                    ctx.fillRect(coin.x, coin.y, 10, 10);
                }
            });

ctx.fillStyle = "#FF0000";
            ctx.fillRect(player.x, player.y, player.width, player.height);

// Handle player movement
            document.addEventListener("keydown", function(event) {
                if (event.keyCode === 37) {
                    player.dx = -2; // move left
                } else if (event.keyCode === 39) {
                    player.dx = 2; // move right
                } else if (event.keyCode === 32 && !player.jumping) {
                    player.dy = -10; // jump
                    player.jumping = true;
                }
            });

document.addEventListener("keyup", function(event) {
                if (event.keyCode === 37 || event.keyCode === 39) {
                    player.dx = 0; // stop moving horizontally
                }
            });

// Check for collision with platforms
            platforms.forEach(function(platform) {
                if (player.y + player.height >= platform.y && player.y + player.height <= platform.y + platform.height &&
                    player.x + player.width >= platform.x && player.x <= platform.x + platform.width) {
                    player.y = platform.y - player.height;
                    player.dy = 0;
                    player.jumping = false;
                }
            });

// Check for collision with coins
            coins.forEach(function(coin) {
                if (!coin.collected && player.y < coin.y + 10 && player.y + player.height > coin.y &&
                    player.x < coin.x + 10 && player.x + player.width > coin.x) {
                    coin.collected = true;
                }
            });

// Check if all coins are collected
            var allCoinsCollected = coins.every(function(coin) {
                return coin.collected;
            });

if (allCoinsCollected) {
                alert("You collected all the coins! Game over.");
                document.removeEventListener("keydown", null);
                document.removeEventListener("keyup", null);
            } else {
                requestAnimationFrame(gameLoop);
            }
        }

gameLoop();
    </script>
</body>
</html>
```

The game logic is implemented in JavaScript using the `<script>` tags. The canvas element is used to draw the platforms, coins, and player character. The player's movements, collisions with platforms and coins, and game over conditions are all handled within the game loop function. The game loop continuously updates the game state and redraws the canvas using the `requestAnimationFrame` method.

I hope this example helps you in creating your own monster platformer game with coins!