A platformer game with a functional hook, and a basic level's game

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

No:30606

←

Prev Next

→

A platformer game with a functional hook, and a ba..ALL
Developer User14891｜Date and time 23/12/23 10:42:50
Build time 15.081 sec｜Game capacity 2.852KB｜

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>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="game" width="800" height="400"></canvas>
    <script>
        // Constants
        const WIDTH = 800;
        const HEIGHT = 400;
        const PLAYER_WIDTH = 50;
        const PLAYER_HEIGHT = 50;
        const HOOK_LENGTH = 100;

// Game Variables
        let canvas;
        let ctx;
        let playerX;
        let playerY;
        let hooked;
        let hookX;
        let hookY;

// Event Listeners
        window.addEventListener('keydown', handleKeydown);
        window.addEventListener('keyup', handleKeyup);

// Initialize the game
        function initGame() {
            canvas = document.getElementById('game');
            ctx = canvas.getContext('2d');
            playerX = WIDTH / 2;
            playerY = HEIGHT - PLAYER_HEIGHT;
            hooked = false;
            hookX = playerX + (PLAYER_WIDTH / 2);
            hookY = playerY + PLAYER_HEIGHT;
        }

// Update the game state
        function updateGame() {
            if (hooked) {
                playerY -= 5;
                hookY -= 5;
                if (hookY < 0) {
                    winner();
                }
            }
        }

// Render the game
        function renderGame() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx.fillRect(playerX, playerY, PLAYER_WIDTH, PLAYER_HEIGHT);
            ctx.beginPath();
            ctx.moveTo(playerX + (PLAYER_WIDTH / 2), playerY + PLAYER_HEIGHT);
            ctx.lineTo(hookX, hookY);
            ctx.stroke();
        }

// Handle key down events
        function handleKeydown(event) {
            if (event.key === ' ') { // Spacebar
                if (!hooked) {
                    hookX = playerX + (PLAYER_WIDTH / 2);
                    hookY = playerY + PLAYER_HEIGHT;
                    hooked = true;
                }
            }
        }

// Handle key up events
        function handleKeyup(event) {
            if (event.key === ' ') { // Spacebar
                if (hooked) {
                    hooked = false;
                }
            }
        }

// Game loop
        function gameLoop() {
            updateGame();
            renderGame();
            requestAnimationFrame(gameLoop);
        }

// Function to call when the player wins
        function winner() {
            // Add your winning logic here
            console.log("¡Has ganado!");
        }

// Start the game
        function startGame() {
            initGame();
            gameLoop();
        }

// Start the game when the page finishes loading
        window.onload = startGame;
    </script>
</body>
</html>