make a game like a platformer with a block and there are arrows that control the block depending on where you look the up button makes you jump to the block but it has to have a floor below the block's game

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

No:35402

134

←

Prev Next

→

make a game like a platformer with a block and the..ALL
Developer User16538｜Date and time 24/1/14 11:22:56
Build time 8.355 sec｜Game capacity 2.759KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Plataformer Game</title>
</head>
<body>
    <canvas id="game" width="640" height="480"></canvas>
    <script>
        // Game Setup
        const canvas = document.getElementById("game");
        const context = canvas.getContext("2d");

const blockWidth = 50;
        const blockHeight = 50;
        let blockX = canvas.width / 2 - blockWidth / 2;
        let blockY = canvas.height - blockHeight;

const floorWidth = canvas.width;
        const floorHeight = 20;
        const floorY = canvas.height - floorHeight;

let arrows = {
            left: false,
            right: false,
            up: false
        };

let isJumping = false;
        let jumpSpeed = 10;
        let fallSpeed = 0;
        let maxFallSpeed = 10;

// Game Loop
        function update() {
            // Controls
            document.addEventListener("keydown", (event) => {
                if (event.key === "ArrowLeft") {
                    arrows.left = true;
                } else if (event.key === "ArrowRight") {
                    arrows.right = true;
                } else if (event.key === "ArrowUp" && !isJumping) {
                    arrows.up = true;
                    isJumping = true;
                    fallSpeed = -jumpSpeed;
                }
            });

// Block Movement
            if (arrows.left && blockX > 0) {
                blockX -= 5;
            }

if (arrows.right && blockX < canvas.width - blockWidth) {
                blockX += 5;
            }

// Block Jump
            if (isJumping) {
                blockY += fallSpeed;
                fallSpeed += 0.5;

if (blockY > floorY - blockHeight) {
                    blockY = floorY - blockHeight;
                    isJumping = false;
                    fallSpeed = 0;
                }

}

// Rendering
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Block
            context.fillStyle = "blue";
            context.fillRect(blockX, blockY, blockWidth, blockHeight);

// Draw Floor
            context.fillStyle = "grey";
            context.fillRect(0, floorY, floorWidth, floorHeight);

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>