var score, ctx, w, h, ctx2, freeze, fullAuto, fbDisable, faDisable; alert("Those ducking ducks keep ducking under your fireworks. Shoot them all down before they get by!\n\n Use a powerup to freeze the ducks for 5 seconds but use it wisely because it has a cooldown!\n\Use another to enable full auto mode for 5 seconds!") window.onload = () =>{ var c = document.getElementById ("c1"); var c2 = document.getElementById ("c2"); var fb = document.getElementById ("fb"); var fa = document.getElementById ("fa"); ctx = c.getContext("2d"); var dpr = window.devicePixelRatio || 1; c.width = window.innerWidth*dpr; c.height = window.innerHeight*dpr; ctx2 = c2.getContext("2d"); c2.width = window.innerWidth*dpr; c2.height = window.innerHeight*dpr; w = c.width/dpr; h = c.height/dpr; c.style.width = window.innerWidth+"px"; c.style.height = window.innerHeight+"px"; c2.style.width = window.innerWidth+"px"; c2.style.height = window.innerHeight+"px"; ctx.scale(dpr,dpr); ctx2.scale(dpr,dpr); var rect = c.getBoundingClientRect(); var fws = []; var ducks = []; var timer = 2000; var sb = document.getElementById("sb"); score = 0; var ft = false; var fps = 60; var delT, ads; var hits = 0; var start = Date.now(); var go = false; freeze = false; fbDisable = false; fullAuto = false; faDisable = false; var clicked = false; c2.addEventListener("mousedown", (e)=>{ e.preventDefault(); clicked = true; fws.push(new fw(e.clientX-rect.left, e.clientY-rect.top)); }); c2.addEventListener("mouseup", (e)=>{ e.preventDefault(); clicked = false; }); c2.addEventListener("touchstart", (e)=>{ e.preventDefault(); fws.push(new fw(e.touches[0].clientX-rect.left, e.touches[0].clientY-rect.top)); }); c2.addEventListener("touchmove", (e)=>{ e.preventDefault(); if(fullAuto){ fws.push(new fw(e.touches[0].clientX-rect.left, e.touches[0].clientY-rect.top)); } }); c2.addEventListener("mousemove", (e)=>{ e.preventDefault(); if(fullAuto && clicked){ fws.push(new fw(e.clientX-rect.left, e.clientY-rect.top)); } }); fb.addEventListener("click", (e)=>{ e.preventDefault(); if(!fbDisable){ freeze = true; fb.style.background = "pink"; fbDisable = true; setTimeout(()=>{ freeze = false; fb.style.background = "gray"; setTimeout(()=>{ fbDisable = false; fb.style.background = "lightgreen"; },15000); },5000); } }); fa.addEventListener("click", (e)=>{ e.preventDefault(); if(!faDisable){ fullAuto = true; fa.style.background = "pink"; faDisable = true; setTimeout(()=>{ fullAuto = false; fa.style.background = "gray"; setTimeout(()=>{ faDisable = false; fa.style.background = "lightgreen"; },15000); },5000); } }); var fw = function(x, y){ this.x = x; this.y = y; this.ra = 5 + Math.random()*2; this.r = Math.random()*155+100; this.g = Math.random()*155+100; this.b = Math.random()*155+100; this.s = 3*Math.random()+2; this.md = 20*Math.random()+0.1*w; this.d = 0; this.a = 1; this.boom = false; this.cx = w/2; this.cy = h; this.check = ()=>{ for(var i = 0; i0.75*w)?-40:30; text("Perfect! +3",this.x+offsX, this.y+offsY, 10); clearInterval(ducks[i].c); ducks.splice(i,1); timer = (timer-hits < 200)?200:timer-hits; } else if(d<10){ score += 2; hits++; sb.innerHTML = score; ctx.font = "17px Arial"; var offsY = (this.y<0.25*h)?30:-20; var offsX= (this.x>0.75*w)?-40:30; text("Great! +2",this.x+offsX, this.y+offsY,10); clearInterval(ducks[i].c); ducks.splice(i,1); timer = (timer-hits < 200)?200:timer-hits; } else if(d<30){ score += 1; hits++; sb.innerHTML = score; ctx.font = "17px Arial"; var offsY = (this.y<0.25*h)?30:-20; var offsX= (this.x>0.75*w)?-40:30; text("Hit! +1",this.x+offsX, this.y+offsY,10); clearInterval(ducks[i].c); ducks.splice(i,1); timer = (timer-hits < 500)?500:timer-hits; } } } this.draw = ()=>{ ctx.fillStyle = "rgba("+this.r+", "+this.g+", "+this.b+", "+this.a+")"; if(this.boom){ ctx.beginPath(); ctx.arc(this.x-1.5*this.d, this.y, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x+1.5*this.d, this.y, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x, this.y-1.5*this.d, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x, this.y+1.5*this.d, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x+this.d, this.y+this.d, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x-this.d, this.y+this.d, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x+this.d, this.y-this.d, this.ra, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(this.x-this.d, this.y-this.d, this.ra, 0, 2*Math.PI); ctx.fill(); }else{ ctx.beginPath(); ctx.arc(this.cx, this.cy, this.ra, 0, 2*Math.PI); ctx.fill(); } } return this; } function newDuck(){ ducks.push(new duck); setTimeout(()=>{ newDuck(); },timer); } function text(msg,x,y,count){ count--; ctx.fillText(msg,x,y); if(count>0){ setTimeout(()=>{ text(msg,x,y,count); },20); } } newDuck(); function animate(now){ if(ft && now){ delT = now-ft; fps = Math.round(1000/delT); ads = delT/(1000/60); ft = now; } if(!ft && now){ ft = now; } ctx.fillStyle = "rgba(0,0,60,"+0.1*ads+")"; ctx.fillRect(0,0,w,h); ctx2.clearRect(0,0,w,h); for(var i = 0; i h-h*0.1){ ducks[i].y = h-h*0.1; } if(ducks[i].x > w){ clearInterval(ducks[i].c); ducks.splice(i, 1); score -= 3; sb.innerHTML = score; if(score<0){ go = true; } } } for(var i = 0; i< fws.length; i++){ if(fws[i].boom){ fws[i].d += ads*1.25; fws[i].y += (0.75-0.01*(fws[i].md-fws[i].d))*ads; fws[i].a = 1-(fws[i].d/fws[i].md); if(fws[i].d <= fws[i].md){ fws[i].draw(); }else{ fws.splice(i,1); } }else{ var sx = ads*(fws[i].x-fws[i].cx)/10; var sy = ads*(fws[i].y-fws[i].cy)/10; fws[i].cx += sx; fws[i].cy += sy; fws[i].ra -= ads*0.075; if(fws[i].ra <0.5){ fws[i].ra = 0.5; } var d = Math.sqrt((fws[i].cx-fws[i].x)*(fws[i].cx-fws[i].x)+(fws[i].cy-fws[i].y)*(fws[i].cy-fws[i].y)); if(d < 10){ fws[i].boom = true; fws[i].check(); } fws[i].draw(); } } if(!go){ window.requestAnimationFrame(animate); }else{ alert("Oops you got ducked too many times. You lasted "+Math.round((Date.now()-start)/1000)+" seconds."); } } animate(); } var duck = function(){ this.x = 0; this.y = h-0.1*h-Math.random()*(h-0.2*h); this.s = 0.5+Math.random(); this.r = Math.random()*155+100; this.g = Math.random()*155+100; this.b = Math.random()*155+100; this.up = false; this.c = setInterval(()=>{ if(this.up){ this.up = false; }else{ this.up = true; } },250); this.draw = ()=>{ ctx2.fillStyle = "rgb("+this.r+", "+this.g+", "+this.b+")"; var x = this.x-10; var y = this.y-3; ctx2.beginPath(); ctx2.moveTo(x,y); x += 3; y += 3; ctx2.lineTo(x,y); x += 4; y += -1; ctx2.lineTo(x,y); x += 4; y += 1; ctx2.lineTo(x,y); x += 5; y += 0; ctx2.lineTo(x,y); x += 3; y += -5; ctx2.lineTo(x,y); x += 3; y += 6; ctx2.lineTo(x,y); x += 5; y += 1; ctx2.lineTo(x,y); x += -5; y += 1; ctx2.lineTo(x,y); x += -17; y += 10; ctx2.quadraticCurveTo(x,y,this.x-10,this.y-3); ctx2.fill(); if(!this.up){ ctx2.beginPath(); ctx2.moveTo(this.x,y); ctx2.lineTo(this.x,this.y+10); ctx2.lineTo(this.x+5,this.y); ctx2.fill(); }else{ ctx2.beginPath(); ctx2.moveTo(this.x,y); ctx2.lineTo(this.x,this.y-7); ctx2.lineTo(this.x+5,this.y); ctx2.fill(); } } return this; }

Ducking Ducks