Platformer with gravity and physics and collisions and levels and a title screen's game

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

No:42945

←

Prev Next

→

Platformer with gravity and physics and collisions..ALL
Developer User19028｜Date and time 24/2/13 15:13:11
Build time 24.843 sec｜Game capacity 8.427KB｜

Script

This is a single HTML file that implements a simple platformer game with gravity, physics, collisions, multiple levels, and a title screen. The game is designed for smartphone operation and uses pictograms to represent platforms. The game starts with a title screen prompting the player to start the game. Once the game starts, the player controls a square character and must navigate through different platforms to reach the goal at the top. Gravity is applied to the character, and collisions with platforms are detected to allow the character to stand on them. There are multiple levels, and the game is over if the character falls to the bottom. When a level is completed, a level complete screen is displayed before moving to the next level.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #gameCanvas {
            width: 100%;
            height: 550px;
            border: 2px solid white;
        }
        #titleScreen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 550px;
            font-family: Arial, sans-serif;
        }
        #startButton {
            padding: 10px 20px;
            font-size: 24px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameCanvas"></div>

var player;
        var gravity = 0.5;
        var platforms = [];
        var numLevels = 3;
        var currentLevel = 1;

// Platform Class
        function Platform(x, y, width, color) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.color = color;

this.draw = function() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, 10);
                ctx.closePath();
            };
        }

// Player Class
        function Player(x, y) {
            this.x = x;
            this.y = y;
            this.width = 25;
            this.height = 25;
            this.dy = 0;
            this.jumpForce = 10;

this.update = function() {
                this.dy += gravity;
                this.y += this.dy;
                
                // Check if the player is colliding with any platform
                for (var i = 0; i < platforms.length; i++) {
                    var p = platforms[i];

if (
                        this.y + this.height > p.y &&
                        this.y < p.y + 10 &&
                        this.x + this.width > p.x &&
                        this.x < p.x + p.width
                    ) {
                        this.y = p.y - this.height;
                        this.dy = 0;
                    }
                }

// Check if the player has reached the bottom
                if (this.y + this.height > height) {
                    gameOver();
                }

// Check if the player has reached the goal (top platform)
                if (
                    this.y + this.height > platforms[0].y &&
                    this.y < platforms[0].y + 10 &&
                    this.x + this.width > platforms[0].x &&
                    this.x < platforms[0].x + platforms[0].width
                ) {
                    levelComplete();
                }
            };

this.jump = function() {
                if (this.dy === 0) {
                    this.dy -= this.jumpForce;
                }
            };

this.draw = function() {
                ctx.beginPath();
                ctx.fillStyle = "#F44336";
                ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.closePath();
            };
        }

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            width = canvas.width;
            height = canvas.height;

player = new Player(width / 2, height - 50);

platforms.push(new Platform(0, height - 10, width, "#009688"));
            platforms.push(new Platform(0, height - 100, 200, "#009688"));
            platforms.push(new Platform(width - 200, height - 200, 200, "#009688"));
            platforms.push(new Platform(200, height - 250, 200, "#009688"));
            generateLevel();

document.addEventListener("keydown", handleKeyDown);
            setInterval(updateGame, 20);
        }

// Event listener for keydown events
        function handleKeyDown(event) {
            var keyCode = event.keyCode;

// Space key or Up arrow key for jumping
            if (keyCode === 32 || keyCode === 38) {
                player.jump();
            }
        }

// Update the game (main game loop)
        function updateGame() {
            ctx.clearRect(0, 0, width, height);

for (var i = 0; i < platforms.length; i++) {
                platforms[i].draw();
            }

player.update();
            player.draw();
        }

// Load the next level
        function nextLevel() {
            currentLevel++;
            if (currentLevel > numLevels) {
                gameOver();
            } else {
                generateLevel();
            }
        }

// Generate a new level
        function generateLevel() {
            // Clear existing platforms
            platforms.splice(1, platforms.length - 1);

// Generate new platforms for the level
            for (var i = 0; i < currentLevel + 3; i++) {
                var x = Math.random() * (width - 200);
                var y = Math.random() * (height - 400) + 50;
                var width = Math.random() * 100 + 50;
                var color = getRandomColor();
                platforms.push(new Platform(x, y, width, color));
            }
        }

// Get a random color
        function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Game Over
        function gameOver() {
            platforms = [];

// Display game over screen
            ctx.fillStyle = "#000000";
            ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "#FFFFFF";
            ctx.font = "48px Arial";
            ctx.fillText("Game Over", width / 2 - 110, height / 2 - 20);
        }

// Level Complete
        function levelComplete() {
            platforms = [];

// Display level complete screen
            ctx.fillStyle = "#000000";
            ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "#FFFFFF";
            ctx.font = "48px Arial";
            ctx.fillText("Level Complete!", width / 2 - 150, height / 2 - 20);

setTimeout(function() {
                nextLevel();
            }, 2000);
        }

// Display Title Screen
        function displayTitleScreen() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            width = canvas.width;
            height = canvas.height;

ctx.fillStyle = "#000000";
            ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "#FFFFFF";
            ctx.font = "48px Arial";
            ctx.fillText("Platformer Game", width / 2 - 200, height / 2 - 50);

var startButton = document.createElement("button");
            startButton.setAttribute("id", "startButton");
            startButton.innerText = "Start Game";
            startButton.onclick = startGame;
            document.getElementById("titleScreen").appendChild(startButton);
        }

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