Hop Hoops

by CyberGalaxy34

155 lines2.8 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hop Hoops</title>
<style>
body{
    margin:0;
    overflow:hidden;
    background:#222;
    font-family:Arial;
}
canvas{
    display:block;
    margin:auto;
    background:skyblue;
}
#info{
    position:absolute;
    top:10px;
    left:10px;
    color:white;
    font-size:24px;
}
</style>
</head>
<body>

<div id="info">Score: 0</div>
<canvas id="game" width="900" height="500"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let score = 0;

const player = {
    x:120,
    y:250,
    r:18,
    vy:0
};

const gravity = 0.5;
const jumpPower = -9;

let hoops = [];

function makeHoop(){
    let gapY = 100 + Math.random()*250;

    hoops.push({
        x:900,
        y:gapY,
        radius:60,
        passed:false
    });
}

setInterval(makeHoop,1800);

document.addEventListener("keydown",e=>{
    if(e.code==="Space"){
        player.vy = jumpPower;
    }
});

document.addEventListener("mousedown",()=>{
    player.vy = jumpPower;
});

function update(){

    player.vy += gravity;
    player.y += player.vy;

    if(player.y > canvas.height-player.r){
        player.y = canvas.height-player.r;
        player.vy = 0;
    }

    if(player.y < player.r){
        player.y = player.r;
        player.vy = 0;
    }

    for(let i=hoops.length-1;i>=0;i--){

        let h = hoops[i];
        h.x -= 4;

        let dx = player.x - h.x;
        let dy = player.y - h.y;
        let dist = Math.sqrt(dx*dx+dy*dy);

        if(!h.passed && h.x < player.x){
            h.passed = true;

            if(dist < h.radius){
                score++;
                document.getElementById("info").textContent =
                "Score: " + score;
            }else{
                alert("Game Over!\nScore: "+score);
                location.reload();
            }
        }

        if(h.x < -100){
            hoops.splice(i,1);
        }
    }
}

function draw(){

    ctx.clearRect(0,0,canvas.width,canvas.height);

    // Ground
    ctx.fillStyle="green";
    ctx.fillRect(0,470,900,30);

    // Player
    ctx.beginPath();
    ctx.arc(player.x,player.y,player.r,0,Math.PI*2);
    ctx.fillStyle="orange";
    ctx.fill();

    // Hoops
    hoops.forEach(h=>{
        ctx.beginPath();
        ctx.lineWidth=10;
        ctx.strokeStyle="gold";
        ctx.arc(h.x,h.y,h.radius,0,Math.PI*2);
        ctx.stroke();
    });

    ctx.fillStyle="black";
    ctx.font="18px Arial";
    ctx.fillText("Press SPACE or Click to Hop",250,30);
}

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

makeHoop();
loop();
</script>

</body>
</html>

Game Source: Hop Hoops

Creator: CyberGalaxy34

Libraries: none

Complexity: moderate (155 lines, 2.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: hop-hoops-cybergalaxy34" to link back to the original. Then publish at arcadelab.ai/publish.