Catch the Stars

by CyberGalaxy34

137 lines2.5 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch the Stars</title>
<style>
body{
    margin:0;
    background:#111;
    overflow:hidden;
    font-family:Arial,sans-serif;
}
canvas{
    display:block;
    margin:auto;
    background:linear-gradient(#001,#034);
}
#score{
    position:absolute;
    top:10px;
    left:10px;
    color:white;
    font-size:24px;
}
</style>
</head>
<body>

<div id="score">Score: 0</div>
<canvas id="game" width="800" height="500"></canvas>

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

let score = 0;

const basket = {
    x:350,
    y:450,
    width:100,
    height:20,
    speed:8
};

const keys = {};

document.addEventListener("keydown",e=>{
    keys[e.key]=true;
});

document.addEventListener("keyup",e=>{
    keys[e.key]=false;
});

let stars=[];

function createStar(){
    stars.push({
        x:Math.random()*(canvas.width-20),
        y:-20,
        size:20,
        speed:2+Math.random()*4
    });
}

setInterval(createStar,700);

function update(){

    if(keys["ArrowLeft"] && basket.x>0)
        basket.x-=basket.speed;

    if(keys["ArrowRight"] && basket.x+basket.width<canvas.width)
        basket.x+=basket.speed;

    for(let i=stars.length-1;i>=0;i--){
        stars[i].y+=stars[i].speed;

        if(
            stars[i].x < basket.x+basket.width &&
            stars[i].x+stars[i].size > basket.x &&
            stars[i].y+stars[i].size > basket.y &&
            stars[i].y < basket.y+basket.height
        ){
            score++;
            document.getElementById("score").innerText="Score: "+score;
            stars.splice(i,1);
            continue;
        }

        if(stars[i].y>canvas.height){
            stars.splice(i,1);
        }
    }
}

function draw(){

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

    // Basket
    ctx.fillStyle="gold";
    ctx.fillRect(
        basket.x,
        basket.y,
        basket.width,
        basket.height
    );

    // Stars
    ctx.fillStyle="white";
    stars.forEach(s=>{
        ctx.beginPath();
        ctx.arc(
            s.x+s.size/2,
            s.y+s.size/2,
            s.size/2,
            0,
            Math.PI*2
        );
        ctx.fill();
    });
}

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

gameLoop();
</script>

</body>
</html>

Game Source: Catch the Stars

Creator: CyberGalaxy34

Libraries: none

Complexity: moderate (137 lines, 2.5 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: catch-the-stars-cybergalaxy34" to link back to the original. Then publish at arcadelab.ai/publish.