Robot Shooter

by SonicBear35

114 lines2.0 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Robot Shooter</title>
<style>
body{margin:0;background:#222;overflow:hidden;}
canvas{display:block;background:#87ceeb;}
</style>
</head>
<body>
<canvas id="game"></canvas>

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

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

let player={x:100,y:canvas.height/2,w:40,h:40};
let bullets=[];
let robots=[];
let score=0;

function spawnRobot(){
robots.push({
x:canvas.width+50,
y:Math.random()*(canvas.height-40),
w:40,h:40,
speed:2+Math.random()*2
});
}
setInterval(spawnRobot,1000);

canvas.addEventListener("touchstart",shoot);
canvas.addEventListener("click",shoot);

function shoot(){
bullets.push({
x:player.x+40,
y:player.y+20,
r:5,
speed:8
});
}

addEventListener("mousemove",e=>{
player.y=e.clientY-player.h/2;
});

function update(){
bullets.forEach(b=>b.x+=b.speed);

robots.forEach(r=>r.x-=r.speed);

bullets.forEach((b,bi)=>{
robots.forEach((r,ri)=>{
if(b.x>r.x&&b.x<r.x+r.w&&b.y>r.y&&b.y<r.y+r.h){
bullets.splice(bi,1);
robots.splice(ri,1);
score++;
}
});
});

bullets=bullets.filter(b=>b.x<canvas.width);
robots=robots.filter(r=>r.x>-50);
}

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

ctx.fillStyle="blue";
ctx.fillRect(player.x,player.y,player.w,player.h);

ctx.fillStyle="black";
ctx.fillRect(player.x+35,player.y+15,20,10);

ctx.fillStyle="red";
bullets.forEach(b=>{
ctx.beginPath();
ctx.arc(b.x,b.y,b.r,0,Math.PI*2);
ctx.fill();
});

ctx.fillStyle="gray";
robots.forEach(r=>{
ctx.fillRect(r.x,r.y,r.w,r.h);
ctx.fillStyle="red";
ctx.fillRect(r.x+8,r.y+8,5,5);
ctx.fillRect(r.x+27,r.y+8,5,5);
ctx.fillStyle="gray";
});

ctx.fillStyle="white";
ctx.font="24px Arial";
ctx.fillText("Score: "+score,20,30);
}

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

Game Source: Robot Shooter

Creator: SonicBear35

Libraries: none

Complexity: moderate (114 lines, 2.0 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: robot-shooter-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.