Create a platforming game's game

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

No:33383

←

Prev Next

→

Create a platforming game
Developer User15755｜Date and time 24/1/4 0:36:55
Build time 29.997 sec｜Game capacity 3.576KB｜

Script

Sure! Here's a simple platforming game implemented in a single HTML file using JavaScript:

This simple platforming game allows the player to control a blue square using arrow keys/left-right buttons and jump using the space bar. The objective is to land on the green platform without falling off. The game uses basic physics to simulate gravity and platform collision.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple platforming game implemented in a single HTML file using JavaScript:

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

var playerX = 50;
    var playerY = 250;
    var playerJumping = false;
    var playerVelocityY = 0;

var gravity = 0.5;

var platformY = 200;
    var platformWidth = 70;
    var platformHeight = 20;

// Keyboard input
    var leftPressed = false;
    var rightPressed = false;
    var spacePressed = false;

function initialize() {
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

// Register event listeners for keyboard input
        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('keyup', handleKeyUp);

// Start game loop
        setInterval(update, 1000 / 60);
    }

function update() {
        movePlayer();
        applyGravity();
        checkPlatformCollision();
        draw();
    }

function movePlayer() {
        if (leftPressed) {
            playerX -= 5;
        } else if (rightPressed) {
            playerX += 5;
        }

if (spacePressed && !playerJumping) {
            playerVelocityY = -12;
            playerJumping = true;
        }

playerY += playerVelocityY;
        playerVelocityY += gravity;
    }

function applyGravity() {
        if (playerY > canvas.height - platformY - platformHeight) {
            playerY = canvas.height - platformY - platformHeight;
            playerVelocityY = 0;
            playerJumping = false;
        }
    }

function checkPlatformCollision() {
        if (playerY + 30 >= canvas.height - platformY - platformHeight &&
            playerY + 30 <= canvas.height - platformY &&
            playerX + 30 >= canvas.width / 2 - platformWidth / 2 &&
            playerX <= canvas.width / 2 + platformWidth / 2) {
            playerY = canvas.height - platformY - platformHeight - 30;
            playerVelocityY = 0;
            playerJumping = false;
        }
    }

function draw() {
        // Clear canvas
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
        canvasContext.fillStyle = 'blue';
        canvasContext.fillRect(playerX, playerY, 30, 30);

// Draw platform
        canvasContext.fillStyle = 'green';
        canvasContext.fillRect(canvas.width / 2 - platformWidth / 2, canvas.height - platformY - platformHeight, platformWidth, platformHeight);
    }

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