Jungle Battle Ground

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Jungle Battle Ground</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07120d;color:white;font-family:Arial,sans-serif;touch-action:none}
#gameWrap{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:#07120d}
canvas{display:block;width:100%;height:100%;object-fit:fill}
#hud{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap;pointer-events:none}
.stat{background:#07140ee8;border:1px solid #7bdb8a;padding:7px 10px;border-radius:9px;font-weight:bold;font-size:clamp(11px,2vw,15px)}
button{border:2px solid #c9ffb3;border-radius:10px;background:#207d35;color:white;font-size:15px;font-weight:bold;padding:11px 15px;cursor:pointer;touch-action:manipulation}
#pauseBtn,#fullBtn{position:absolute;right:9px;padding:8px 10px;font-size:13px}
#pauseBtn{top:53px}#fullBtn{top:96px}
#menu{position:absolute;inset:0;background:#020b08dd;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;overflow:auto}
#menu h1{font-size:clamp(25px,5vw,45px);margin:5px;color:#b8ff8b;text-shadow:0 0 15px #44ff52}
#menu p{max-width:550px;line-height:1.5}
#nextBtn,#restartBtn{display:none}
#message{position:absolute;top:20%;width:100%;text-align:center;font-size:clamp(20px,5vw,38px);font-weight:bold;text-shadow:0 2px 7px black;pointer-events:none}
#controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:space-between;align-items:end;padding:0 12px;pointer-events:none}
.group{display:flex;gap:7px;pointer-events:auto}
.ctrl{width:clamp(45px,9vw,65px);height:clamp(45px,9vw,65px);padding:0;border-radius:50%;background:#142a22df;border:2px solid #b6ffae;color:white;font-size:22px;user-select:none;-webkit-user-select:none}
@media(orientation:portrait){#controls{padding:0 8px}.ctrl{width:48px;height:48px}}
</style>
</head>
<body>
<div id="gameWrap">
<canvas id="game"></canvas>
<div id="hud">
 <div class="stat" id="levelText">LEVEL 1</div>
 <div class="stat" id="lengthText">LENGTH: 1×</div>
 <div class="stat" id="scoreText">SCORE: 0</div>
 <div class="stat" id="coinText">COINS: 0</div>
 <div class="stat" id="hpText">HP: ♥♥♥</div>
</div>
<button id="pauseBtn">Ⅱ PAUSE</button>
<button id="fullBtn">⛶ FULL</button>
<div id="message"></div>
<div id="controls">
 <div class="group">
  <button class="ctrl" data-key="left">◀</button>
  <button class="ctrl" data-key="right">▶</button>
  <button class="ctrl" data-key="down">▼</button>
 </div>
 <div class="group">
  <button class="ctrl" data-key="attack">⚔</button>
  <button class="ctrl" data-key="jump">⬆</button>
 </div>
</div>
<div id="menu">
 <h1 id="menuTitle">🌴 JUNGLE BATTLE GROUND</h1>
 <p id="menuText">Har level pichhle level se double length ka hoga!<br>Level 3: Deep water 🌊<br>Level 6: Dangerous lava 🔥</p>
 <button id="startBtn">START GAME</button>
 <button id="nextBtn">YES — NEXT LEVEL ➜</button>
 <button id="restartBtn">PLAY AGAIN</button>
</div>
</div>
<script>
const canvas=document.getElementById("game"),ctx=canvas.getContext("2d");
const W=960,H=540;
let dpr=1;
function resizeCanvas(){
 dpr=Math.min(window.devicePixelRatio||1,2);
 canvas.width=Math.round(W*dpr);canvas.height=Math.round(H*dpr);
 ctx.setTransform(dpr,0,0,dpr,0,0);
}
addEventListener("resize",resizeCanvas);resizeCanvas();

const $=id=>document.getElementById(id);
const menu=$("menu"),message=$("message");
const keys={left:false,right:false,down:false,jump:false,attack:false};
let level=1,score=0,coins=0,hp=3,running=false,paused=false,won=false;
let camera=0,worldWidth=2800,frame=0;
let platforms=[],pits=[],coinItems=[],enemies=[],particles=[];
let invulnerable=0,lastJump=false,lastAttack=false,finishLock=false;
const player={x:60,y:300,w:32,h:48,vx:0,vy:0,onGround:false,face:1,attackTime:0};

// Length doubles every level: 1x, 2x, 4x, 8x, etc.
// Capped at 16x to avoid excessive memory/performance use on phones.
function levelMultiplier(){return Math.pow(2,Math.min(level-1,4))}
function hazardType(){if(level>=6)return "lava";if(level>=3)return "water";return "pit"}

function makeLevel(){
 const mult=levelMultiplier();
 worldWidth=2800*mult;
 platforms=[];pits=[];coinItems=[];enemies=[];particles=[];
 camera=0;finishLock=false;
 const groundY=440,type=hazardType();
 let x=0;
 const finalSafeStart=worldWidth-500;
 let hazardIndex=0;

 while(x<finalSafeStart){
  const safeLength=Math.min(230+Math.random()*55,finalSafeStart-x);
  if(safeLength>0)platforms.push({x,y:groundY,w:safeLength,h:100,floating:false});
  x+=safeLength;
  if(x>=finalSafeStart)break;

  const pitW=Math.min(75+Math.min(level,10)*4+Math.random()*18,125);
  pits.push({x,y:groundY,w:pitW,type,phase:Math.random()*6});
  x+=pitW;

  // Stepping platform across each pit
  platforms.push({x:x-pitW+6,y:groundY-72,w:pitW+65,h:16,floating:true});
  if(level>=4){
   platforms.push({x:x-pitW+pitW*.25,y:groundY-125,w:55,h:14,floating:true});
  }

  // Safe landing area after each pit
  platforms.push({x:x+5,y:groundY,w:100,h:100,floating:false});
  x+=100;
  hazardIndex++;
 }

 // Guaranteed safe final section after all hazards
 platforms.push({x:finalSafeStart,y:groundY,w:worldWidth-finalSafeStart+200,h:100,floating:false});
 platforms.sort((a,b)=>a.x-b.x);

 // Coin placement scales with world length
 const coinStep=Math.max(105,130-Math.min(level,8)*2);
 for(let cx=145;cx<worldWidth-140;cx+=coinStep){
  coinItems.push({x:cx,y:330+Math.random()*55,r:10,taken:false});
 }

 // More enemies in longer levels, with a cap for performance
 const enemyCount=Math.min(3+level*2,100);
 for(let i=0;i<enemyCount;i++){
  const ex=350+i*((worldWidth-750)/Math.max(1,enemyCount));
  enemies.push({
   x:ex,y:390,w:30,h:40,
   vx:(Math.random()<.5?-1:1)*(1+Math.min(level*.12,2)),
   minX:Math.max(10,ex-45),maxX:Math.min(worldWidth-100,ex+45),alive:true
  });
 }

 player.x=60;player.y=groundY-player.h;player.vx=0;player.vy=0;
 player.onGround=true;player.h=48;player.attackTime=0;
 invulnerable=70;lastJump=false;lastAttack=false;
 updateHud();
}

function updateHud(){
 $("levelText").textContent="LEVEL "+level;
 $("lengthText").textContent="LENGTH: "+levelMultiplier()+"×";
 $("scoreText").textContent="SCORE: "+score;
 $("coinText").textContent="COINS: "+coins;
 $("hpText").textContent="HP: "+("♥".repeat(Math.max(0,hp)))+("♡".repeat(Math.max(0,3-hp)));
}
function showMenu(title,text,buttons){
 $("menuTitle").textContent=title;$("menuText").innerHTML=text;
 menu.style.display="flex";
 $("startBtn").style.display=buttons.start?"inline-block":"none";
 $("nextBtn").style.display=buttons.next?"inline-block":"none";
 $("restartBtn").style.display=buttons.restart?"inline-block":"none";
}
function startGame(){
 level=1;score=0;coins=0;hp=3;won=false;paused=false;
 makeLevel();running=true;menu.style.display="none";message.textContent="";
}
function nextLevel(){
 if(!won)return;
 level++;won=false;paused=false;makeLevel();running=true;menu.style.display="none";
 message.textContent="LEVEL "+level+" — "+levelMultiplier()+"× LENGTH";
 setTimeout(()=>{if(running&&!paused)message.textContent=""},1400);
}
function finishLevel(){
 if(finishLock||!running)return;
 finishLock=true;running=false;won=true;message.textContent="";
 showMenu("🏆 LEVEL "+level+" COMPLETE!",
 "Level "+level+" complete ho gaya!<br>Agla level "+levelMultiplier()*2+"× length ka hoga.<br>Kya aap next level khelna chahte hain?",
 {start:false,next:true,restart:false});
}
function endGame(){
 running=false;won=false;
 showMenu("💀 GAME OVER","Aap Level "+level+" tak pohnche!<br>Score: "+score+" | Coins: "+coins,
 {start:false,next:false,restart:true});
}
$("startBtn").onclick=startGame;
$("restartBtn").onclick=startGame;
$("nextBtn").onclick=nextLevel;
$("pauseBtn").onclick=()=>{
 if(!running)return;paused=!paused;message.textContent=paused?"PAUSED":"";
 $("pauseBtn").textContent=paused?"▶ RESUME":"Ⅱ PAUSE";
};
$("fullBtn").onclick=async()=>{
 try{
  if(!document.fullscreenElement)await $("gameWrap").requestFullscreen();
  else await document.exitFullscreen();
 }catch(e){message.textContent="Browser menu se full screen try karein";setTimeout(()=>message.textContent="",1800)}
};

document.addEventListener("keydown",e=>{
 if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"," "].includes(e.key))e.preventDefault();
 if(e.key==="ArrowLeft"||e.key.toLowerCase()==="a")keys.left=true;
 if(e.key==="ArrowRight"||e.key.toLowerCase()==="d")keys.right=true;
 if(e.key==="ArrowDown"||e.key.toLowerCase()==="s")keys.down=true;
 if(e.key==="ArrowUp"||e.key===" ")keys.jump=true;
 if(e.key.toLowerCase()==="j")keys.attack=true;
});
document.addEventListener("keyup",e=>{
 if(e.key==="ArrowLeft"||e.key.toLowerCase()==="a")keys.left=false;
 if(e.key==="ArrowRight"||e.key.toLowerCase()==="d")keys.right=false;
 if(e.key==="ArrowDown"||e.key.toLowerCase()==="s")keys.down=false;
 if(e.key==="ArrowUp"||e.key===" ")keys.jump=false;
 if(e.key.toLowerCase()==="j")keys.attack=false;
});
document.querySelectorAll(".ctrl").forEach(btn=>{
 const k=btn.dataset.key;
 const press=e=>{e.preventDefault();keys[k]=true};
 const release=e=>{e.preventDefault();keys[k]=false};
 btn.addEventListener("pointerdown",press);
 btn.addEventListener("pointerup",release);
 btn.addEventListener("pointercancel",release);
 btn.addEventListener("lostpointercapture",release);
 btn.addEventListener("contextmenu",e=>e.preventDefault());
});

function overlaps(a,b){return a.x<b.x+b.w&&a.x+a.w>b.x&&a.y<b.y+b.h&&a.y+a.h>b.y}
function addParticles(x,y,color,n=8){
 for(let i=0;i<n;i++)particles.push({x,y,vx:(Math.random()-.5)*5,vy:(Math.random()-.8)*5,life:25+Math.random()*18,color});
}
function hurt(){
 if(invulnerable>0||!running)return;
 hp--;invulnerable=90;player.vx=-player.face*2;player.vy=-4;
 updateHud();if(hp<=0)endGame();
}
function checkHazards(){
 const foot=player.y+player.h;
 for(const pit of pits){
  if(player.x+player.w>pit.x+4&&player.x<pit.x+pit.w-4&&foot>pit.y+3){
   addParticles(player.x+player.w/2,pit.y,pit.type==="lava"?"#ff5511":pit.type==="water"?"#72eaff":"#b7a58b",10);
   hurt();
   if(running){
    player.x=Math.max(5,pit.x-player.w-12);
    player.y=440-player.h;player.vy=0;player.vx=0;player.onGround=true;
   }
   return true;
  }
 }
 return false;
}

function update(){
 if(!running||paused)return;
 frame++;
 const speed=3.2+Math.min(level*.12,2.4);
 player.vx=0;
 if(keys.left){player.vx=-speed;player.face=-1}
 if(keys.right){player.vx=speed;player.face=1}
 player.h=keys.down&&player.onGround?32:48;
 if(keys.jump&&!lastJump&&player.onGround){player.vy=-11.5;player.onGround=false}
 lastJump=keys.jump;

 if(keys.attack&&!lastAttack){
  player.attackTime=12;
  const box={x:player.face===1?player.x+player.w:player.x-35,y:player.y+5,w:36,h:35};
  for(const en of enemies)if(en.alive&&overlaps(box,en)){
   en.alive=false;score+=20;addParticles(en.x,en.y,"#ffcc4d",12);
  }
 }
 lastAttack=keys.attack;
 if(player.attackTime>0)player.attackTime--;

 const previousBottom=player.y+player.h;
 player.x=Math.max(0,Math.min(worldWidth-player.w,player.x+player.vx));
 player.vy=Math.min(player.vy+.52,13);
 player.y+=player.vy;player.onGround=false;

 for(const p of platforms){
  if(player.x+player.w>p.x&&player.x<p.x+p.w&&previousBottom<=p.y+5&&player.y+player.h>=p.y&&player.vy>=0){
   player.y=p.y-player.h;player.vy=0;player.onGround=true;
  }
 }
 if(checkHazards())return;

 if(player.y>H+60){
  hurt();
  if(running){player.x=Math.max(5,player.x-120);player.y=440-player.h;player.vy=0;player.onGround=true}
 }
 for(const c of coinItems){
  if(!c.taken&&Math.abs(player.x+player.w/2-c.x)<24&&Math.abs(player.y+player.h/2-c.y)<30){
   c.taken=true;coins++;score+=10;addParticles(c.x,c.y,"#ffe96b",6);
  }
 }
 for(const en of enemies){
  if(!en.alive)continue;
  en.x+=en.vx;
  if(en.x<en.minX||en.x>en.maxX)en.vx*=-1;
  if(overlaps(player,en)){
   if(player.vy>1&&player.y+player.h<en.y+24){
    en.alive=false;player.vy=-7;score+=20;addParticles(en.x,en.y,"#ffae53",10);
   }else hurt();
  }
 }
 if(invulnerable>0)invulnerable--;
 for(const p of particles){p.x+=p.vx;p.y+=p.vy;p.vy+=.12;p.life--}
 particles=particles.filter(p=>p.life>0);
 camera=Math.max(0,Math.min(worldWidth-W,player.x-W*.34));
 if(player.x+player.w>=worldWidth-90)finishLevel();
 updateHud();
}

function drawBackground(){
 let g=ctx.createLinearGradient(0,0,0,H);
 g.addColorStop(0,"#092d4a");g.addColorStop(.5,"#167b78");g.addColorStop(1,"#a3c66b");
 ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
 let sun=ctx.createRadialGradient(760,95,5,760,95,125);
 sun.addColorStop(0,"#fff8bb");sun.addColorStop(.35,"#ffdc7c88");sun.addColorStop(1,"#ffdf7000");
 ctx.fillStyle=sun;ctx.fillRect(600,0,320,240);
 ctx.fillStyle="#fff3a5";ctx.beginPath();ctx.arc(760,95,27,0,Math.PI*2);ctx.fill();
 for(let layer=0;layer<3;layer++){
  ctx.beginPath();ctx.moveTo(0,H);
  for(let x=-20;x<=W+40;x+=40)ctx.lineTo(x,220+layer*55+Math.sin((x+camera*.12+layer*90)*.012)*32+Math.sin(x*.035)*12);
  ctx.lineTo(W,H);ctx.closePath();ctx.fillStyle=["#346b65","#24564a","#183f32"][layer];ctx.fill();
 }
 for(let i=0;i<24;i++){
  const x=((i*97-camera*.22)%(W+120)+W+120)%(W+120)-60,h=90+(i*37%100);
  ctx.fillStyle=i%2?"#123e2b":"#0d3325";ctx.fillRect(x,350-h*.25,12,h);
  for(let j=0;j<4;j++){ctx.beginPath();ctx.ellipse(x+6,350-h*.25+j*17,27-j*3,30-j*3,0,0,Math.PI*2);ctx.fill()}
 }
}
function drawPit(p){
 const x=p.x-camera;if(x+p.w<0||x>W)return;
 ctx.fillStyle="#07110e";ctx.fillRect(x,p.y,p.w,H-p.y);
 if(p.type==="water"){
  let g=ctx.createLinearGradient(0,p.y,0,H);g.addColorStop(0,"#45e6ff");g.addColorStop(.35,"#087ec3");g.addColorStop(1,"#031b54");
  ctx.fillStyle=g;ctx.fillRect(x,p.y,p.w,H-p.y);
  for(let i=0;i<4;i++){ctx.beginPath();ctx.ellipse(x+p.w/2+Math.sin(frame*.045+i)*p.w*.2,p.y+12+i*30,p.w*.3,3,0,0,Math.PI*2);ctx.strokeStyle="#b9fbff99";ctx.lineWidth=2;ctx.stroke()}
 }else if(p.type==="lava"){
  let g=ctx.createLinearGradient(0,p.y,0,H);g.addColorStop(0,"#ffec4a");g.addColorStop(.22,"#ff6a00");g.addColorStop(1,"#9b0800");
  ctx.fillStyle=g;ctx.fillRect(x,p.y,p.w,H-p.y);
  for(let i=0;i<7;i++){ctx.fillStyle=i%2?"#fff176":"#ff3c00";ctx.beginPath();ctx.ellipse(x+((i*37+frame*1.5)%(p.w+20))-10,p.y+8+Math.abs(Math.sin(frame*.06+i))*40,5,3,0,0,Math.PI*2);ctx.fill()}
  ctx.fillStyle="#fff27b";ctx.fillRect(x,p.y,p.w,4);
 }
}
function drawPlatform(p){
 const x=p.x-camera;if(x+p.w<0||x>W)return;
 if(p.floating){
  ctx.fillStyle="#432a17";ctx.fillRect(x,p.y,p.w,p.h);
  ctx.fillStyle="#76c63f";ctx.fillRect(x,p.y,p.w,5);
  ctx.fillStyle="#b5e979";ctx.fillRect(x,p.y,p.w,2);return;
 }
 let g=ctx.createLinearGradient(0,p.y,0,p.y+p.h);
 g.addColorStop(0,"#76502a");g.addColorStop(.18,"#4b321f");g.addColorStop(1,"#1b2519");
 ctx.fillStyle=g;ctx.fillRect(x,p.y,p.w,p.h);
 ctx.fillStyle="#58a832";ctx.fillRect(x,p.y,p.w,10);
 ctx.fillStyle="#b3e96b";ctx.fillRect(x,p.y,p.w,3);
 for(let i=0;i<p.w;i+=13){
  ctx.fillStyle=i%2?"#397f29":"#8acb44";
  ctx.beginPath();ctx.moveTo(x+i,p.y+7);ctx.lineTo(x+i+3,p.y-3-(i%4));ctx.lineTo(x+i+5,p.y+7);ctx.fill();
 }
}
function drawPlayer(){
 const x=player.x-camera,y=player.y;
 if(invulnerable>0&&Math.floor(frame/5)%2===0)return;
 ctx.save();
 ctx.fillStyle="#06130b99";ctx.beginPath();ctx.ellipse(x+16,y+player.h+3,19,5,0,0,Math.PI*2);ctx.fill();
 ctx.fillStyle="#252f3c";ctx.fillRect(x+5,y+player.h-14,9,14);ctx.fillRect(x+19,y+player.h-14,9,14);
 ctx.fillStyle="#151b23";ctx.fillRect(x+3,y+player.h-5,12,5);ctx.fillRect(x+18,y+player.h-5,13,5);
 let g=ctx.createLinearGradient(x,y,x+player.w,y);g.addColorStop(0,"#166b45");g.addColorStop(.5,"#39bd6c");g.addColorStop(1,"#125638");
 ctx.fillStyle=g;ctx.fillRect(x+3,y+15,26,player.h-28);
 ctx.fillStyle="#dca66f";ctx.fillRect(x,y+19,7,19);ctx.fillRect(x+25,y+19,7,19);ctx.fillRect(x+6,y+1,21,20);
 ctx.fillStyle="#1d2924";ctx.fillRect(x+3,y,27,7);ctx.fillStyle="#0a1712";ctx.fillRect(x+7,y-3,19,5);
 ctx.fillStyle="#fff";ctx.fillRect(x+(player.face===1?20:8),y+8,5,4);
 ctx.fillStyle="#111";ctx.fillRect(x+(player.face===1?23:9),y+9,2,3);
 ctx.fillStyle="#e2d49a";ctx.fillRect(x+4,y+player.h-17,24,4);
 if(player.attackTime>0){ctx.strokeStyle="#e7f6ff";ctx.lineWidth=5;ctx.beginPath();ctx.moveTo(x+16,y+27);ctx.lineTo(x+16+player.face*40,y+8);ctx.stroke()}
 ctx.restore();
}
function drawCoin(c){
 const x=c.x-camera;if(c.taken||x<-20||x>W+20)return;
 let g=ctx.createRadialGradient(x,c.y,2,x,c.y,24);g.addColorStop(0,"#fffbc9");g.addColorStop(.3,"#ffdf32aa");g.addColorStop(1,"#ffdf3200");
 ctx.fillStyle=g;ctx.beginPath();ctx.arc(x,c.y,24,0,Math.PI*2);ctx.fill();
 ctx.fillStyle="#ffcf16";ctx.beginPath();ctx.ellipse(x,c.y,8,11,0,0,Math.PI*2);ctx.fill();
 ctx.strokeStyle="#fff29b";ctx.lineWidth=2;ctx.stroke();
}
function drawEnemy(e){
 if(!e.alive)return;const x=e.x-camera,y=e.y;if(x<-40||x>W+40)return;
 ctx.fillStyle="#111c13";ctx.fillRect(x+3,y+12,25,26);
 ctx.fillStyle="#8c342b";ctx.fillRect(x+2,y+6,27,20);
 ctx.fillStyle="#b9533d";ctx.fillRect(x+5,y+1,20,15);
 ctx.fillStyle="#ffe3aa";ctx.fillRect(x+6,y+8,5,4);ctx.fillRect(x+18,y+8,5,4);
 ctx.fillStyle="#25251e";ctx.fillRect(x+3,y+35,10,5);ctx.fillRect(x+18,y+35,10,5);
}
function drawFinish(){
 const x=worldWidth-90-camera;if(x<-80||x>W+80)return;
 ctx.fillStyle="#d8e6d8";ctx.fillRect(x,310,8,130);ctx.fillRect(x+70,310,8,130);ctx.fillRect(x,310,78,8);
 for(let r=0;r<5;r++)for(let c=0;c<3;c++){ctx.fillStyle=(r+c)%2?"#f6f6e5":"#18221b";ctx.fillRect(x+8+c*21,322+r*22,21,22)}
 ctx.fillStyle="#fff";ctx.font="bold 16px Arial";ctx.fillText("FINISH",x-2,300);
}
function drawParticles(){
 for(const p of particles){ctx.globalAlpha=Math.max(0,p.life/40);ctx.fillStyle=p.color;ctx.beginPath();ctx.arc(p.x-camera,p.y,3,0,Math.PI*2);ctx.fill()}
 ctx.globalAlpha=1;
}
function draw(){
 drawBackground();
 for(const p of pits)drawPit(p);
 for(const p of platforms)drawPlatform(p);
 for(const p of pits){
  const x=p.x-camera;if(x+p.w<0||x>W)continue;
  if(p.type==="water"||p.type==="lava"){
   ctx.fillStyle="#fff";ctx.font="bold 12px Arial";ctx.textAlign="center";
   ctx.fillText(p.type==="water"?"DEEP WATER":"HOT LAVA",x+p.w/2,Math.min(H-20,p.y+45));
   ctx.textAlign="start";
  }
 }
 coinItems.forEach(drawCoin);enemies.forEach(drawEnemy);drawFinish();drawPlayer();drawParticles();
 ctx.fillStyle="#07150d99";ctx.fillRect(W/2-120,10,240,7);
 ctx.fillStyle="#baff78";ctx.fillRect(W/2-120,10,240*Math.min(1,player.x/(worldWidth-90)),7);
}
function loop(){update();draw();requestAnimationFrame(loop)}
makeLevel();draw();loop();
</script>
</body>
</html>