Webleb - UI Elements - Dread head parkour

HTML

CSS

JS

const canvas = document.getElementById('parkourCanvas');
const ctx = canvas.getContext('2d');
const coinUI = document.getElementById('coin-count');

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

// Game Config
const GRAVITY = 0.6;
let score = 0;
let gameSpeed = 5;
let gameOver = false;

// Controller States
const keys = { jump: false, slide: false };

// Player Object
const player = {
    x: 100,
    y: 0,
    width: 40,
    height: 60,
    defaultHeight: 60,
    slideHeight: 30,
    vy: 0,
    isGrounded: false,
    isSliding: false,
    rotation: 0, // Used for flips
    dreadlocks: [], // Trailing physics particle array

init() {
        this.y = canvas.height - 150 - this.height;
    },

update() {
        // Handle Slidings
        if (keys.slide && this.isGrounded) {
            this.isSliding = true;
            this.height = this.slideHeight;
        } else {
            if (this.isSliding) {
                this.y -= (this.defaultHeight - this.slideHeight); // Unfurl upwards
                this.isSliding = false;
            }
            this.height = this.defaultHeight;
        }

// Handle Jumps & Flips
        if (keys.jump && this.isGrounded && !this.isSliding) {
            this.vy = -14;
            this.isGrounded = false;
        }

// Physics Application
        this.vy += GRAVITY;
        this.y += this.vy;

const groundLevel = canvas.height - 100;
        if (this.y + this.height >= groundLevel) {
            this.y = groundLevel - this.height;
            this.vy = 0;
            this.isGrounded = true;
            this.rotation = 0;
        } else {
            // Mid-air flip animation
            this.rotation += 0.12;
        }

// Update trailing Dreadlocks engine
        if (Math.random() < 0.7) {
            this.dreadlocks.push({
                x: this.x + (this.isSliding ? 5 : 10),
                y: this.y + 10,
                vx: -(gameSpeed * 0.5) - Math.random() * 2,
                vy: (Math.random() - 0.5) * 3,
                life: 25
            });
        }

this.dreadlocks.forEach((dread, index) => {
            dread.x += dread.vx;
            dread.y += dread.vy;
            dread.life--;
            if (dread.life <= 0) this.dreadlocks.splice(index, 1);
        });
    },

draw() {
        // Render Dreadlock trailing system
        ctx.fillStyle = '#ffcc00'; 
        this.dreadlocks.forEach(dread => {
            ctx.beginPath();
            ctx.arc(dread.x, dread.y, 4, 0, Math.PI * 2);
            ctx.fill();
        });

// Main Player Body Layout
        ctx.save();
        ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
        if (!this.isGrounded && !this.isSliding) {
            ctx.rotate(this.rotation);
        }
        
        // Character Core Outfit
        ctx.fillStyle = '#ff4500'; // Dreadhead Red Outfit
        ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
        
        // Head / Skin box
        ctx.fillStyle = '#8B4513'; 
        ctx.fillRect(-this.width / 2 + 5, -this.height / 2 - 5, this.width - 10, 20);

ctx.restore();
    }
};

// Map Obstacles and Collectibles Arrays
let entities = [];

function spawnEntity() {
    if (gameOver) return;
    const typeRand = Math.random();
    const groundLevel = canvas.height - 100;

if (typeRand < 0.4) {
        // High Spinning Spike Barrier (Must slide under)
        entities.push({ type: 'spike_high', x: canvas.width, y: groundLevel - 80, width: 30, height: 35, color: '#e74c3c' });
    } else if (typeRand < 0.7) {
        // Ground Spikes (Must Jump over)
        entities.push({ type: 'spike_low', x: canvas.width, y: groundLevel - 30, width: 40, height: 30, color: '#95a5a6' });
    } else {
        // Floating Gold Coin
        entities.push({ type: 'coin', x: canvas.width, y: groundLevel - (Math.random() * 80 + 40), radius: 12, collected: false });
    }

// Algorithmic layout scaling
    setTimeout(spawnEntity, Math.random() * 1500 + 1000);
}

function updateEntities() {
    entities.forEach((ent, index) => {
        ent.x -= gameSpeed;

// Visual Box Boundaries cleanup
        if (ent.x + (ent.width || ent.radius) < 0) {
            entities.splice(index, 1);
            return;
        }

// Collision Framework Matrices
        if (ent.type === 'coin' && !ent.collected) {
            let dist = Math.hypot((player.x + player.width/2) - ent.x, (player.y + player.height/2) - ent.y);
            if (dist < player.width/2 + ent.radius) {
                ent.collected = true;
                score++;
                coinUI.innerText = score;
                entities.splice(index, 1);
            }
        } else if (ent.type !== 'coin') {
            if (player.x < ent.x + ent.width &&
                player.x + player.width > ent.x &&
                player.y < ent.y + ent.height &&
                player.y + player.height > ent.y) {
                gameOver = true;
            }
        }
    });
}

// Input Listeners
window.addEventListener('keydown', (e) => {
    if (e.key === 'w' || e.key === 'ArrowUp') keys.jump = true;
    if (e.key === 's' || e.key === 'ArrowDown') keys.slide = true;
    if (gameOver && e.key === 'r') restartGame();
});

window.addEventListener('keyup', (e) => {
    if (e.key === 'w' || e.key === 'ArrowUp') keys.jump = false;
    if (e.key === 's' || e.key === 'ArrowDown') keys.slide = false;
});

function restartGame() {
    score = 0;
    coinUI.innerText = score;
    entities = [];
    gameOver = false;
    player.init();
    loop();
}

// Global Core Loop Engine
function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// City Ground Asset
    ctx.fillStyle = '#2c3e50';
    ctx.fillRect(0, canvas.height - 100, canvas.width, 100);

player.update();
    player.draw();

updateEntities();
    drawEntities();

if (!gameOver) {
        requestAnimationFrame(loop);
    } else {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#fff';
        ctx.font = '2.5rem Arial';
        ctx.textAlign = 'center';
        ctx.fillText('CRASHED! Press "R" to Run Again', canvas.width / 2, canvas.height / 2);
    }
}

// Initialize Runtime Setup
player.init();
spawnEntity();
loop();

Dread head parkour

Recommended