var c, ctx, w, h, x, y, l, t, balls, vy, bubs, fishes, game, endCont; alert("Tap in the sky above the water to drop some balls on the fish. See how many fish you can get in 1 minute! You can only have 3 balls in play at once so ploop wisely."); window.onload = ()=>{ c = document.querySelector("canvas"); var rect = c.getBoundingClientRect(); l = rect.left; t = rect.top; w = c.width = rect.width; h = c.height = rect.height; ctx = c.getContext("2d"); ctx.fillStyle = "rgba(50,50,255,0.5)"; ctx.font = "25px Arial"; ctx.textAlign = "center"; endCont = document.getElementById("end-container"); init(); c.addEventListener("touchstart", handleTouch); } function gameObject(){ this.score = 0; this.gameOver = false; this.fps = 60; this.ads = 1; this.timer = 60; this.lastFrame = Date.now(); this.fishTimer = 0; this.countDown = 0; this.update = ()=>{ var delT = Date.now()-this.lastFrame; this.fps = 1000/(delT); this.lastFrame = Date.now(); this.ads = (delT/(1000/60)); } this.reset = ()=>{ this.score = 0; this.gameOver = false; this.fps = 60; this.ads = 1; this.lastFrame = Date.now(); this.timer = 60; this.fishTimer = 0; this.countDown = 0; } this.start = ()=>{ this.fishTimer = setInterval(()=>{ fishes.push(new fish(-30, h/3+h/2*Math.random())); },1000); this.countDown = setInterval(()=>{ this.timer--; if(this.timer <= 0){ this.stop(); } },1000); } this.stop = ()=>{ clearInterval(this.fishTimer); clearInterval(this.countDown); balls.forEach(b=>{ clearInterval(b.bubTimer); }); this.gameOver = true; } } function init(){ x = w/2; y = h/5; vy = 0; balls = []; bubs = []; fishes = []; game = new gameObject(); game.start(); animate(); } function reset(){ endCont.style.display = "none"; x = w/2; y = h/5; vy = 0; balls = []; bubs = []; fishes = []; game.reset(); game.start(); animate(); } function ball(x,y){ this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.r = 12; this.bubTimer = 0; this.sub = false; this.color = "red"; this.draw = ()=>{ ctx.save(); var grd = ctx.createRadialGradient(this.x-0.3*this.r,this.y-0.3*this.r,0.1*this.r,this.x-0.25*this.r,this.y-0.25*this.r,this.r); grd.addColorStop(0, "white"); grd.addColorStop(1, this.color); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); ctx.fill(); ctx.restore(); } this.update = (xv)=>{ var ay = 0.3; if(this.y + this.r >= h/5 + 2*this.r){ if(!this.sub){ this.vy *= 0.2; this.sub = true; this.bubTimer = setInterval(()=>{ bubs.push(new bubble(this.x, this.y)); },500); } ay = 0.005; }else{ xv = 0; } this.vx += xv; this.vy += game.ads*ay; this.x += game.ads*this.vx; this.y += game.ads*this.vy; } this.checkOut = ()=>{ return (this.y >= h + this.r)?true:false; } this.explode = ()=>{ for(var i = 0; i<30;i++){ var rX = -30+60*Math.random(); var rY = -30+60*Math.random(); bubs.push(new bubble(this.x + rX, this.y + rY)); } } } function bubble(sx,sy){ this.x = sx; this.y = sy; this.sy = sy; this.sx = sx; this.r = 2+1.5*Math.random(); this.update = ()=>{ this.x += (-1 + 2*Math.random())*game.ads; this.y -= game.ads; } this.draw = ()=>{ ctx.save(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); ctx.fill(); ctx.restore(); } this.checkOut = ()=>{ if (this.y <= h/4 + 6*this.r || this.sy - this.y > h/4){ return true; }else{ return false; } } } function fish(sx,sy){ this.x = sx; this.y = sy; this.w = 20+10*Math.random(); this.h = 15+5*Math.random(); this.s = 0.5+0.5*Math.random(); this.color = "fuchsia"; this.update = ()=>{ this.x += game.ads*this.s; } this.draw = ()=>{ let {x, y, w,h} = this; ctx.save(); var grd = ctx.createRadialGradient(x+0.3*w,y+0.3*h,0.01*w,x+0.25*w,y+0.25*h,w); grd.addColorStop(0, "yellow"); grd.addColorStop(1, this.color); ctx.fillStyle = grd; ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+0.1*w, y+h/2); ctx.lineTo(x,y+h); ctx.lineTo(x+0.25*w, y+2/3*h); ctx.quadraticCurveTo(x+w,y+h,x+w,y+1/2*h); ctx.quadraticCurveTo(x+w,y,x+1/4*w, y+1/3*h); ctx.lineTo(x,y); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(x+0.75*w,y+0.4*h, 0.1*h,0, 2*Math.PI); ctx.fill(); ctx.restore(); } this.checkOut = ()=>{ if(this.x > w){ return true; }else{ return false; } } } function detectBallCollision(currI){ for(i in balls){ if(i == currI){ continue; } var d = Math.sqrt((balls[i].x-balls[currI].x)*(balls[i].x-balls[currI].x) + (balls[i].y-balls[currI].y)*(balls[i].y-balls[currI].y)); if(d < balls[i].r+balls[currI].r){ balls[currI].explode(); return true; break; } } return false; } function checkCollision(a,b, fi){ var tY, tX; if(b.y <= a.y){ tY = a.y; }else if(b.y > a.y && b.y <= a.y+a.h){ tY = b.y; }else{ tY = a.y+a.h; } if(b.x <= a.x){ tX = a.x; }else if(b.x > a.x && b.x <= a.x+a.w){ tX = b.x; }else{ tX = a.x + a.w; } var d = Math.sqrt((b.x-tX)*(b.x-tX)+ (b.y-tY)*(b.y-tY)); if(d <= b.r){ b.explode(); game.score++; fishes.splice(fi,1); return true; }else{ return false; } } function handleTouch(e){ e.preventDefault(); if(e.touches[0].clientY - t < h/5 && balls.length < 3){ x = e.touches[0].clientX-l; balls.push(new ball(e.touches[0].clientX-l, e.touches[0].clientY-t)); } } function draw(){ ctx.beginPath(); ctx.moveTo(-w/4,h/5); ctx.bezierCurveTo(x, y, x, y, w+w/4, h/5); ctx.lineTo(w,h); ctx.lineTo(0,h); ctx.fill(); } function checkFishesCollision(bi){ for(var i in fishes){ if(checkCollision(fishes[i], balls[bi], i)){ return true; break; } } return false; } function animate(){ game.update(); ctx.clearRect(0,0,w,h); for(var i in balls){ balls[i].update(-0.05+0.1*Math.random()); detectBallCollision(i); if(balls[i].checkOut() || detectBallCollision(i) || checkFishesCollision(i)){ clearInterval(balls[i].bubTimer); balls.splice(i,1); } } for(var i in balls){ if(balls[i].y >= h/5-balls[i].r && balls[i].y < h/5 + 2*balls[i].r){ y = balls[i].y + balls[i].r; } balls[i].draw(); } for(var i in bubs){ bubs[i].update(); bubs[i].draw(); } for(var i in bubs){ if(bubs[i].checkOut()){ bubs.splice(i,1); } } for(var i in fishes){ fishes[i].update(); fishes[i].draw(); } for(var i in fishes){ if(fishes[i].checkOut()){ fishes.splice(i,1); } } ctx.save(); ctx.fillStyle = "gold"; if(game.timer <= 10){ ctx.fillStyle = "red"; } ctx.fillText(game.timer, w/2, 30); ctx.restore(); draw(); var ay = (h/5-y)/100; vy += ay; vy *= 0.98; y += vy; if(!game.gameOver){ window.requestAnimationFrame(animate); }else{ alert(`Time's up! You plooped ${game.score} fish!`); endCont.style.display = "flex"; } }

Ploop Game