Create a platformer game's game

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

No:50326

←

Prev Next

→

Create a platformer game
Developer User21273｜Date and time 24/3/8 12:05:21
Build time 8.252 sec｜Game capacity 2.559KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platformer Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        background-color: skyblue;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
        x: 50,
        y: canvas.height - 100,
        width: 50,
        height: 50,
        speed: 5,
        jumping: false,
        jumpStrength: 10
    };
    
    const gravity = 1;
    
    const obstacle = {
        x: canvas.width - 100,
        y: canvas.height - 100,
        width: 50,
        height: 50,
        speed: 5
    };
    
    function drawPlayer() {
        ctx.fillStyle = 'green';
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }
    
    function drawObstacle() {
        ctx.fillStyle = 'red';
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }
    
    function update() {
        obstacle.x -= obstacle.speed;
        
        if (obstacle.x + obstacle.width < 0) {
            obstacle.x = canvas.width;
        }
        
        if (player.jumping) {
            player.y -= player.jumpStrength;
            player.jumpStrength -= gravity;
            if (player.jumpStrength < 0) {
                player.jumping = false;
            }
        } else {
            player.y += gravity;
        }
        
        if (player.y > canvas.height - player.height) {
            player.y = canvas.height - player.height;
            player.jumpStrength = 10;
        }
        
        if (player.x < obstacle.x + obstacle.width &&
            player.x + player.width > obstacle.x &&
            player.y < obstacle.y + obstacle.height &&
            player.y + player.height > obstacle.y) {
            alert('Game Over!');
            window.location.reload();
        }
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawObstacle();
    }
    
    function jump() {
        player.jumping = true;
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.code === 'Space') {
            jump();
        }
    });
    
    setInterval(update, 1000/60);
</script>
</body>
</html>