blox brawl

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html>
<head>
    <title>Roblox Battle: Fixed Grab & Slam</title>
    <style>
        body { margin: 0; background: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; font-family: 'Arial Black', sans-serif; }
        canvas { background: #1a1a1a; border: 5px solid #444; }
        #ui { position: absolute; top: 10px; color: #fff; text-align: center; pointer-events: none; }
        #restartBtn { position: absolute; display: none; padding: 15px 30px; font-size: 24px; background: #00e676; color: white; border: none; border-bottom: 5px solid #00c853; border-radius: 8px; cursor: pointer; z-index: 10; }
    </style>
</head>
<body>
    <div id="ui"><h1>SCHOOL BRAWL</h1><p>Z: Grab | C: SLAM | X: Suplex | SPACE: Punch</p></div>
    <button id="restartBtn" onclick="resetGame()">RESTART</button>
    <canvas id="game"></canvas>

let shake = 0; let particles = []; let blood = []; 
    let suplexTimer = 0; let slamTimer = 0; let detentionTimer = 0;
    const gravity = 0.8;

let player = { x: 500, y: 390, w: 40, h: 60, color: "#00a2ff", grabbing: null, angle: 0, dir: 1, punch: 0, vy: 0, jumping: false };
    const colors = ["#ff3e3e", "#ff8c00", "#ffd700", "#44ff44", "#00ffff", "#e81ed2", "#ffffff"];
    let enemies = colors.map((c, i) => ({ x: 100 + (i * 120), y: 390, w: 40, h: 60, color: c, hp: 100, grabbed: false, angle: 0, vy: 0, dead: false }));

function resetGame() {
        blood = []; particles = []; detentionTimer = 0;
        restartBtn.style.display = "none";
        player.x = 500; player.y = 390; player.vy = 0; player.grabbing = null;
        enemies.forEach(en => { en.dead = false; en.hp = 100; en.y = 390; en.grabbed = false; en.angle = 0; });
    }

function update() {
        if (detentionTimer > 0) { detentionTimer--; restartBtn.style.display = "block"; return; }

player.y += player.vy; player.vy += gravity;
        if (player.y >= 390) { player.y = 390; player.vy = 0; player.jumping = false; }

if (slamTimer > 0 && player.grabbing) {
            slamTimer--;
            player.grabbing.y += 20; 
            player.grabbing.angle += 0.5;
            if (slamTimer === 0) {
                shake = 30; player.grabbing.hp -= 40;
                player.grabbing.grabbed = false;
                let victim = player.grabbing; // temp ref to clear
                player.grabbing = null;
                victim.angle = 0;
                if (victim.hp <= 0) victim.dead = true;
            }
        } 
        else if (suplexTimer > 0 && player.grabbing) {
            suplexTimer--;
            player.angle -= 0.15; player.grabbing.angle -= 0.25;
            player.grabbing.x = player.x - (50 * player.dir);
            player.grabbing.y = player.y - 30;
            if (suplexTimer === 0) {
                shake = 25; player.grabbing.hp -= 40;
                player.grabbing.grabbed = false;
                let victim = player.grabbing;
                player.grabbing = null;
                player.angle = 0;
                victim.angle = 0;
                if (victim.hp <= 0) victim.dead = true;
            }
        } else {
            if (keys["ArrowLeft"]) { player.x -= 7; player.dir = -1; }
            if (keys["ArrowRight"]) { player.x += 7; player.dir = 1; }
            enemies.forEach(en => {
                if (en.grabbed) { 
                    en.x = player.x; en.y = player.y - 50; 
                } else {
                    if (en.y < 390) { en.vy += gravity; en.y += en.vy; } else { en.y = 390; en.vy = 0; }
                }
            });
        }
        if (player.punch > 0) player.punch--;
        if (shake > 0) shake *= 0.9;
    }

function drawChar(obj, isP) {
        ctx.save();
        ctx.translate(obj.x + 20, obj.y + 30);
        ctx.rotate(obj.angle || 0);
        ctx.fillStyle = obj.dead ? "#333" : obj.color;
        ctx.fillRect(-20, -15, 40, 45); 
        ctx.beginPath(); ctx.arc(0, -25, 18, 0, Math.PI*2); ctx.fill();
        ctx.fillStyle = "white";
        let lookDir = (isP ? player.dir : (player.x > obj.x ? 1 : -1));
        ctx.fillRect(lookDir === 1 ? 5 : -15, -28, 8, 4);
        ctx.restore();
    }

function loop() { update(); draw(); requestAnimationFrame(loop); }
    loop();
</script>
</body>
</html>

blox brawl

Recommended

Cylinders Grid Background 3D

Text Animation in HTML and CSS

CSS Loading Animation: Pulse & Sparks

HTML

CSS

JS

Recommended

Cylinders Grid Background 3D

Text Animation in HTML and CSS

CSS Loading Animation: Pulse & Sparks

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS