Mini Arras

by FrozenPanda96

198 lines3.6 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Arras</title>
<style>
body{margin:0;overflow:hidden;background:#ddd}
canvas{display:block}
</style>
</head>
<body>
<canvas id="game"></canvas>

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

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

const player={
x:400,y:300,r:25,
speed:4,
hp:100,maxHp:100,
xp:0,level:1
};

const keys={};
const bullets=[];
const shapes=[];

document.addEventListener("keydown",e=>keys[e.key.toLowerCase()]=true);
document.addEventListener("keyup",e=>keys[e.key.toLowerCase()]=false);

canvas.addEventListener("click",e=>{
let dx=e.clientX-player.x;
let dy=e.clientY-player.y;
let d=Math.hypot(dx,dy);
bullets.push({
x:player.x,
y:player.y,
vx:dx/d*8,
vy:dy/d*8
});
});

function makeShape(){
const types=["square","triangle","pentagon"];
const type=types[Math.floor(Math.random()*types.length)];

shapes.push({
x:Math.random()*2000-1000,
y:Math.random()*2000-1000,
type:type,
hp:type==="square"?20:type==="triangle"?40:80,
maxHp:type==="square"?20:type==="triangle"?40:80,
xp:type==="square"?10:type==="triangle"?25:50
});
}

for(let i=0;i<30;i++) makeShape();

function update(){

if(keys["w"]) player.y-=player.speed;
if(keys["s"]) player.y+=player.speed;
if(keys["a"]) player.x-=player.speed;
if(keys["d"]) player.x+=player.speed;

bullets.forEach(b=>{
b.x+=b.vx;
b.y+=b.vy;
});

for(let i=bullets.length-1;i>=0;i--){
for(let j=shapes.length-1;j>=0;j--){

let dx=bullets[i].x-shapes[j].x;
let dy=bullets[i].y-shapes[j].y;

if(Math.hypot(dx,dy)<30){
shapes[j].hp-=10;
bullets.splice(i,1);

if(shapes[j].hp<=0){
player.xp+=shapes[j].xp;

if(player.xp>=player.level*100){
player.level++;
player.maxHp+=20;
player.hp=player.maxHp;
}

shapes.splice(j,1);
makeShape();
}
break;
}
}
}
}

function drawShape(s){

ctx.save();
ctx.translate(s.x-player.x+canvas.width/2,
s.y-player.y+canvas.height/2);

ctx.fillStyle="#8bc34a";

if(s.type==="square"){
ctx.fillRect(-15,-15,30,30);
}

if(s.type==="triangle"){
ctx.beginPath();
ctx.moveTo(0,-20);
ctx.lineTo(20,20);
ctx.lineTo(-20,20);
ctx.closePath();
ctx.fill();
}

if(s.type==="pentagon"){
ctx.beginPath();
for(let i=0;i<5;i++){
let a=i*Math.PI*2/5-Math.PI/2;
let x=Math.cos(a)*20;
let y=Math.sin(a)*20;
if(i===0) ctx.moveTo(x,y);
else ctx.lineTo(x,y);
}
ctx.closePath();
ctx.fill();
}

ctx.fillStyle="red";
ctx.fillRect(-20,-30,40,5);

ctx.fillStyle="lime";
ctx.fillRect(-20,-30,40*(s.hp/s.maxHp),5);

ctx.restore();
}

function draw(){

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

for(const s of shapes) drawShape(s);

for(const b of bullets){
ctx.beginPath();
ctx.arc(
b.x-player.x+canvas.width/2,
b.y-player.y+canvas.height/2,
4,0,Math.PI*2);
ctx.fillStyle="black";
ctx.fill();
}

ctx.beginPath();
ctx.arc(canvas.width/2,canvas.height/2,player.r,0,Math.PI*2);
ctx.fillStyle="#66bb6a";
ctx.fill();

ctx.fillStyle="red";
ctx.fillRect(20,20,200,20);

ctx.fillStyle="lime";
ctx.fillRect(20,20,200*(player.hp/player.maxHp),20);

ctx.strokeRect(20,20,200,20);

ctx.fillStyle="black";
ctx.font="20px Arial";
ctx.fillText("Level: "+player.level,20,70);

ctx.fillStyle="orange";
ctx.fillRect(20,80,(player.xp%(player.level*100))/(player.level*100)*200,15);

ctx.strokeRect(20,80,200,15);
}

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

loop();
</script>
</body>
</html>

Game Source: Mini Arras

Creator: FrozenPanda96

Libraries: none

Complexity: moderate (198 lines, 3.6 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: mini-arras-frozenpanda96" to link back to the original. Then publish at arcadelab.ai/publish.