HTML

246 0 chambkin000 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tilt-Leap Precision Platformer</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #1a1a1a;
            color: #eee;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        canvas {
            border: 4px solid #444;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            background: #222;
        }
        .ui {
            margin-top: 10px;
            text-align: center;
        }
        .controls {
            font-size: 0.8em;
            color: #888;
        }
    </style>
</head>
<body>

<div class="ui">
    <div id="status">LEVEL 1: THE CLIMB</div>
    <div class="controls">LEFT/RIGHT to Lean | SPACE to Jump | R to Reset</div>
</div>
<canvas id="gameCanvas"></canvas>

canvas.width = 800;
    canvas.height = 600;

// Game Constants
    const GRAVITY = 0.25;
    const JUMP_POWER = 12;
    const LEAN_SPEED = 0.04;
    const BOUNCE_FACTOR = 0.7;
    const FRICTION = 0.99;

// Game State
    let player = {
        x: 100,
        y: 530,
        width: 20,
        height: 20,
        vx: 0,
        vy: 0,
        angle: 0, // In radians
        isGrounded: true,
        color: '#00ffcc'
    };

let keys = {};
    let level = 1;

// Level Objects
    let platforms = [
        { x: 50, y: 550, w: 100, h: 20 }, // Start
        { x: 250, y: 450, w: 60, h: 15 },
        { x: 450, y: 380, w: 50, h: 15 },
        { x: 200, y: 280, w: 40, h: 15 },
        { x: 500, y: 200, w: 60, h: 15 },
        { x: 700, y: 120, w: 80, h: 15 }, // Goal platform
    ];

let winds = [
        { x: 350, y: 0, w: 100, h: 600, forceX: 0.15, forceY: 0 }
    ];

let goal = { x: 740, y: 100, w: 20, h: 20 };

window.addEventListener('keydown', e => {
        keys[e.code] = true;
        if(e.code === 'KeyR') resetPlayer();
    });
    window.addEventListener('keyup', e => keys[e.code] = false);

function resetPlayer() {
        player.x = 60;
        player.y = 530;
        player.vx = 0;
        player.vy = 0;
        player.angle = 0;
        player.isGrounded = false;
    }

function checkCollision(p, plat) {
        return p.x < plat.x + plat.w &&
               p.x + p.width > plat.x &&
               p.y < plat.y + plat.h &&
               p.y + p.height > plat.y;
    }

function update() {
        // 1. Handle Leaning (Only if grounded)
        if (player.isGrounded) {
            if (keys['ArrowLeft']) player.angle -= LEAN_SPEED;
            if (keys['ArrowRight']) player.angle += LEAN_SPEED;
            
            // Clamp angle to 75 degrees either way
            player.angle = Math.max(-Math.PI/2.5, Math.min(Math.PI/2.5, player.angle));

if (keys['Space']) {
                player.vx = Math.sin(player.angle) * JUMP_POWER;
                player.vy = -Math.cos(player.angle) * JUMP_POWER;
                player.isGrounded = false;
            }
        }

// 2. Physics (If in air)
        if (!player.isGrounded) {
            player.vy += GRAVITY;
            player.vx *= FRICTION;
            
            // Apply Wind
            winds.forEach(w => {
                if (player.x < w.x + w.w && player.x + player.width > w.x &&
                    player.y < w.y + w.h && player.y + player.height > w.y) {
                    player.vx += w.forceX;
                }
            });

player.x += player.vx;
            player.y += player.vy;

// Wall Bouncing
            if (player.x <= 0 || player.x + player.width >= canvas.width) {
                player.vx *= -BOUNCE_FACTOR;
                player.x = player.x <= 0 ? 1 : canvas.width - player.width - 1;
            }
        }

// 3. Platform Collisions
        let onAnyPlatform = false;
        platforms.forEach(plat => {
            if (checkCollision(player, plat)) {
                // Check if falling onto top
                if (player.vy > 0 && player.y + player.height - player.vy <= plat.y) {
                    player.y = plat.y - player.height;
                    player.vy = 0;
                    player.vx = 0;
                    player.isGrounded = true;
                    onAnyPlatform = true;
                } else {
                    // Side/Bottom collision (Bounce)
                    if (player.x + player.width - player.vx <= plat.x || player.x - player.vx >= plat.x + plat.w) {
                        player.vx *= -BOUNCE_FACTOR;
                    } else {
                        player.vy *= -BOUNCE_FACTOR;
                    }
                }
            }
        });

if (!onAnyPlatform && player.isGrounded) {
            player.isGrounded = false;
        }

// 4. Goal Detection
        if (checkCollision(player, goal)) {
            alert("COURSE CLEAR! Mastery of momentum achieved.");
            resetPlayer();
        }

// 5. Out of bounds
        if (player.y > canvas.height) resetPlayer();
    }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Wind Zones
        ctx.fillStyle = 'rgba(100, 150, 255, 0.1)';
        winds.forEach(w => {
            ctx.fillRect(w.x, w.y, w.w, w.h);
            // Wind particles effect
            ctx.strokeStyle = 'rgba(100, 150, 255, 0.3)';
            for(let i=0; i<5; i++) {
                let lineY = (Date.now()/10 + i*120) % 600;
                ctx.beginPath();
                ctx.moveTo(w.x, lineY);
                ctx.lineTo(w.x + w.w, lineY + 20);
                ctx.stroke();
            }
        });

// Draw Platforms
        ctx.fillStyle = '#666';
        platforms.forEach(plat => {
            ctx.fillRect(plat.x, plat.y, plat.w, plat.h);
            ctx.strokeStyle = '#888';
            ctx.strokeRect(plat.x, plat.y, plat.w, plat.h);
        });

// Draw Goal
        ctx.fillStyle = '#ffdf00';
        ctx.shadowBlur = 15;
        ctx.shadowColor = '#ffdf00';
        ctx.fillRect(goal.x, goal.y, goal.w, goal.h);
        ctx.shadowBlur = 0;

// Draw Player
        ctx.save();
        ctx.translate(player.x + player.width/2, player.y + player.height/2);
        if (player.isGrounded) {
            ctx.rotate(player.angle);
        }
        ctx.fillStyle = player.color;
        ctx.fillRect(-player.width/2, -player.height/2, player.width, player.height);
        
        // Draw Vector Arrow (Leaning indicator)
        if (player.isGrounded) {
            ctx.beginPath();
            ctx.strokeStyle = '#ff3366';
            ctx.lineWidth = 3;
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -50);
            // Arrow head
            ctx.lineTo(-5, -40);
            ctx.moveTo(0, -50);
            ctx.lineTo(5, -40);
            ctx.stroke();
        }
        ctx.restore();
    }

function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
    }

resetPlayer();
    loop();
</script>
</body>
</html>

CSS

Comments 0

…

HTML

Recommended

Comments 0