🎮ArcadeLab

Zombie Game Weapon Shop

by QuantumDolphin87
355 lines6.7 KB
▶ Play
<!DOCTYPE html>
<html>
<head>
  <title>Zombie Game Weapon Shop</title>
  <style>
    body { margin:0; overflow:hidden; background:#0b0b0b; touch-action:none; }
    canvas { display:block; background:#0b0b0b; }

    #hud {
      position: fixed;
      top: 10px;
      left: 10px;
      color: white;
      font-family: Arial;
      z-index: 10;
    }

    #healthBar {
      position: fixed;
      top: 40px;
      left: 10px;
      width: 200px;
      height: 15px;
      background: red;
      z-index: 10;
    }

    #healthFill {
      width: 100%;
      height: 100%;
      background: lime;
    }

    #shopBtn {
      position: fixed;
      top: 10px;
      right: 10px;
      padding: 10px;
      background: orange;
      color: black;
      font-family: Arial;
      border-radius: 8px;
      z-index: 20;
    }

    #shop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      color: white;
      font-family: Arial;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 999;
    }

    #shop button {
      padding: 10px;
      margin: 5px;
    }

    #death {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.95);
      display: none;
      color: white;
      font-family: Arial;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 999;
    }

    /* JOYSTICK */
    #base {
      position: fixed;
      bottom: 80px;
      left: 70px;
      width: 120px;
      height: 120px;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
    }

    #stick {
      position: fixed;
      width: 50px;
      height: 50px;
      background: cyan;
      border-radius: 50%;
      pointer-events: none;
    }

    #shootBtn {
      position: fixed;
      bottom: 80px;
      right: 80px;
      width: 80px;
      height: 80px;
      background: rgba(255,0,0,0.4);
      border-radius: 50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      color:white;
      user-select:none;
      touch-action:none;
    }
  </style>
</head>
<body>

<div id="hud">Coins: 0 | Weapon: Pistol</div>
<div id="healthBar"><div id="healthFill"></div></div>

<div id="shopBtn">🛒 SHOP</div>

<div id="shop">
  <h2>Weapon Shop</h2>
  <button onclick="buy('pistol')">Pistol (Free)</button>
  <button onclick="buy('smg')">SMG (10 coins)</button>
  <button onclick="buy('shotgun')">Shotgun (20 coins)</button>
  <button onclick="toggleShop()">Close</button>
</div>

<div id="death">
  <h1>💀 YOU DIED</h1>
  <button onclick="restart()">Restart</button>
</div>

<div id="base"></div>
<div id="stick"></div>
<div id="shootBtn">🔫</div>

<canvas id="c"></canvas>

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

c.width=window.innerWidth;
c.height=window.innerHeight;

let player,zombies=[],bullets=[];
let coins=0;
let gameOver=false;

let weapon="pistol";

/* RESET */
function reset(){
  player={x:c.width/2,y:c.height/2,vx:0,vy:0,health:100};
  zombies=[];
  bullets=[];
  coins=0;
  weapon="pistol";
  gameOver=false;
  document.getElementById("death").style.display="none";
}
reset();

/* SHOP */
function toggleShop(){
  let s=document.getElementById("shop");
  s.style.display=s.style.display==="flex"?"none":"flex";
  s.style.flexDirection="column";
}

document.getElementById("shopBtn").onclick=toggleShop;

function buy(w){
  if(w==="smg" && coins>=10){
    weapon="smg"; coins-=10;
  }
  if(w==="shotgun" && coins>=20){
    weapon="shotgun"; coins-=20;
  }
  if(w==="pistol"){
    weapon="pistol";
  }
  toggleShop();
}

/* SPAWN */
setInterval(()=>{
  if(gameOver)return;

  let side=Math.floor(Math.random()*4);
  let z={x:0,y:0,hp:2};

  if(side===0){z.x=-50;z.y=Math.random()*c.height;}
  if(side===1){z.x=c.width+50;z.y=Math.random()*c.height;}
  if(side===2){z.x=Math.random()*c.width;z.y=-50;}
  if(side===3){z.x=Math.random()*c.width;z.y=c.height+50;}

  zombies.push(z);
},1200);

/* JOYSTICK */
let joy={x:0,y:0},active=false;
const base=document.getElementById("base");
const stick=document.getElementById("stick");
let center={x:0,y:0};

function updateCenter(){
  const r=base.getBoundingClientRect();
  center.x=r.left+60;
  center.y=r.top+60;
}
window.onload=updateCenter;

base.addEventListener("pointerdown",(e)=>{
  active=true;
  updateCenter();
  e.stopPropagation();
});

document.addEventListener("pointermove",(e)=>{
  if(!active||gameOver)return;

  let dx=e.clientX-center.x;
  let dy=e.clientY-center.y;

  let dist=Math.sqrt(dx*dx+dy*dy);
  let max=40;

  if(dist>max){
    dx=dx/dist*max;
    dy=dy/dist*max;
  }

  joy.x=dx;
  joy.y=dy;

  stick.style.left=(center.x+dx-25)+"px";
  stick.style.top=(center.y+dy-25)+"px";
});

document.addEventListener("pointerup",()=>{
  active=false;
  joy.x=0;joy.y=0;
});

/* 🔫 SHOOT */
document.getElementById("shootBtn").addEventListener("pointerdown",(e)=>{
  e.stopPropagation();
  if(gameOver)return;

  if(weapon==="pistol"){
    bullets.push({x:player.x,y:player.y,vx:0,vy:-8});
  }

  if(weapon==="smg"){
    bullets.push({x:player.x,y:player.y,vx:0,vy:-10});
  }

  if(weapon==="shotgun"){
    bullets.push({x:player.x,y:player.y,vx:-2,vy:-8});
    bullets.push({x:player.x,y:player.y,vx:0,vy:-8});
    bullets.push({x:player.x,y:player.y,vx:2,vy:-8});
  }
});

/* 💀 DEATH */
function die(){
  gameOver=true;
  document.getElementById("death").style.display="flex";
}

function restart(){ reset(); }

/* UPDATE */
function update(){
  if(gameOver)return;

  player.vx+=joy.x*0.01;
  player.vy+=joy.y*0.01;

  player.vx*=0.9;
  player.vy*=0.9;

  player.x+=player.vx;
  player.y+=player.vy;

  bullets.forEach((b,i)=>{
    b.x+=b.vx;
    b.y+=b.vy;
    if(b.y<0) bullets.splice(i,1);
  });

  zombies.forEach((z,zi)=>{

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

    z.x+=dx/dist*1.2;
    z.y+=dy/dist*1.2;

    if(dist<25){
      player.health-=1;
      if(player.health<=0) die();
    }

    bullets.forEach((b,bi)=>{
      if(Math.abs(b.x-z.x)<20&&Math.abs(b.y-z.y)<20){
        z.hp--;
        bullets.splice(bi,1);

        if(z.hp<=0){
          zombies.splice(zi,1);
          coins++;
        }
      }
    });
  });

  document.getElementById("healthFill").style.width=player.health+"%";
  document.getElementById("hud").innerText=
    "Coins: "+coins+" | Weapon: "+weapon;
}

/* DRAW */
function draw(){
  ctx.clearRect(0,0,c.width,c.height);

  ctx.fillStyle="cyan";
  ctx.fillRect(player.x,player.y,20,20);

  ctx.fillStyle="green";
  zombies.forEach(z=>{
    ctx.fillRect(z.x,z.y,25,25);
  });

  ctx.fillStyle="yellow";
  bullets.forEach(b=>{
    ctx.fillRect(b.x,b.y,5,5);
  });
}

/* LOOP */
function loop(){
  update();
  draw();
  requestAnimationFrame(loop);
}
loop();
</script>

</body>
</html>

Game Source: Zombie Game Weapon Shop

Creator: QuantumDolphin87

Libraries: none

Complexity: complex (355 lines, 6.7 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: zombie-game-weapon-shop-quantumdolphin87" to link back to the original. Then publish at arcadelab.ai/publish.