onload=()=>{ //canvas const c = document.querySelector("canvas"); const ctx = c.getContext("2d"); const cW = c.width = innerWidth; const cH = c.height = innerHeight; const sect= document.querySelector("#section"); const replay= document.querySelector("#replay"); const spanscore= document.querySelector("#score"); let variables = ["1","0","0","false","false","0"]; let [gameSpeed,frame,score,gameOver,runFrame,highScore] = variables; //mouse let mouse={ x:cW/2, y:cH/2, clicked:false, } let cPosition = c.getBoundingClientRect(); //////////////////movement///////////////// c.ontouchstart=()=>{ mouse.x= Math.floor(event.touches[0].clientX - cPosition.left); mouse.y= Math.floor(event.touches[0].clientY - cPosition.top); mouse.clicked = true; } c.ontouchend=()=>{ mouse.clicked = false; } /////////music and sounds ///////////// const bubsound1= document.createElement("audio"); bubsound1.src = "https://opengameart.org/sites/default/files/bubbles-single2.wav"; const bubsound2= document.createElement("audio"); bubsound2.src= "https://opengameart.org/sites/default/files/Plop.ogg"; const bubblePop= new Image(); bubblePop.src= "https://i.ibb.co/rtQch04/bubble-pop-under-water-spritesheet.png"; //1992 981 const playerLeft= new Image(); playerLeft.src= "https://i.ibb.co/XxmFVPy/cartoon-fish-06-blue-swim.png"; const playerRight= new Image(); playerRight.src= "https://i.ibb.co/kgNsqN1/output-onlinepngtools.png"; const bubbleImg = new Image(); bubbleImg.src = "https://i.ibb.co/mbPh5vV/bubble-pop-frame-01.png"; const enemyImg = new Image(); enemyImg.src = "https://i.ibb.co/vxv9jYb/yellow-cartoon-fish-01-swim.png"; /////////////background///////////////// const background = new Image(); background.src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2OG0tc4EcSo5HpqLjNIwNqMkC7Pt6Toct2g&usqp=CAU"; const bg= { x1:0, x2:cW, y:0, width:cW, height:cH, } const handleBackground =()=>{ ctx.drawImage(background,bg.x1,bg.y,bg.width,bg.height); ctx.drawImage(background,bg.x2,bg.y,bg.width,bg.height); if(bg.x1 - gameSpeed <= -bg.width) bg.x1 = bg.width; else bg.x1 -= gameSpeed; if(bg.x2 - gameSpeed <= -bg.width)bg.x2 = bg.width; else bg.x2 -= gameSpeed; } ////////////////player//////////////////// class Player{ constructor(){ this.x = cW; this.y = cH/2; this.radius = 30; this.angle = 0; this.frameX = 0; this.frameY = 0; this.frame = 0; this.imgWidth = 160; this.imgHeight = 104; } update(){ this.dx = this.x - mouse.x; this.dy = this.y - mouse.y; let theta = Math.atan2(this.dy,this.dx); this.angle= theta; //direction move if(mouse.x != this.x){ this.x -= this.dx /20; } if(mouse.y != this.y){ this.y -= this.dy/20; } //frame if(frame % 8 === 0){ this.frame++; if(this.frame >= 12)this.frame= 0; if(this.frame ===3 ||this.frame===7||this.frame===11){ this.frameX = 0; }else{ this.frameX++; } } } draw(){ if(mouse.clicked){ ctx.lineWidth = 0.2; ctx.beginPath(); ctx.moveTo(this.x,this.y) ctx.lineTo(mouse.x,mouse.y); ctx.stroke(); } ctx.save(); ctx.translate(this.x,this.y); ctx.rotate(this.angle); if(this.x >= mouse.x){ ctx.drawImage(playerLeft,this.frameX * this.imgWidth,this.frameY * this.imgHeight,this.imgWidth,this.imgHeight,0-40,0-25,this.imgWidth/2,this.imgHeight/2); }else{ ctx.drawImage(playerRight,this.frameX * this.imgWidth,this.frameY * this.imgHeight,this.imgWidth,this.imgHeight,0-40,0-25,this.imgWidth/2,this.imgHeight/2); } ctx.restore(); } } const player = new Player(); const makePlayer =()=>{ player.update(); player.draw(); } //////////////////bubbles//////////////// class Bubbles{ constructor(){ this.x = Math.random() * cW; this.y = cH + 100; this.radius= 30; this.speed = Math.random() * 3+1; this.distance; this.counted= false; this.sound= Math.random() <= .5 ? "sound1": "sound2"; this.timer= 0; this.frameX = 0; this.frameY = 0; this.imgW= 400; this.imgH= 400; } draw(){ ctx.drawImage(bubbleImg,this.x -42,this.y -42,this.radius *2.8,this.radius *2.8) } update(){ let dx = this.x - player.x; let dy = this.y - player.y; this.distance = Math.sqrt(dx*dx+dy*dy); this.y -= this.speed; } } const bubbles = new Bubbles(); //bubblearray let bubbleArray = []; const makeBubble =()=>{ if(frame%50 === 0){ bubbleArray.push(new Bubbles()); } for(let i in bubbleArray){ bubbleArray[i].update(); bubbleArray[i].draw(); } for(let i in bubbleArray){ if(bubbleArray[i].y < 0 - bubbleArray[i].radius *2 ){ bubbleArray.splice(i,1); } /////colllison if(bubbleArray[i].distance < bubbleArray[i].radius + player.radius){ if(bubbleArray[i]){ if(!bubbleArray[i].counted){ if(bubbleArray[i].sound === "sound1"){ bubsound1.play(); }else{ bubsound2.play(); } explodeArray.push(new Explode(bubbleArray[i].x,bubbleArray[i].y)); bubbleArray.splice(i,1); ++score; runFrame = true; } } } } } //////////////////enemy////////////////// class Enemy{ constructor(){ this.x= cW +200; this.y= player.y //Math.random()*(cH - this.radius); this.radius=30; this.speed= Math.random()*2+2; this.frame=0; this.frameX=0; this.frameY=0; this.imgW = 160; this.imgH= 152; this.distance; } draw(){ /* ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fill(); ctx.closePath();*/ ctx.drawImage(enemyImg,this.frameX * this.imgW,this.frameY * this.imgH,this.imgW,this.imgH,this.x -30,this.y -32,this.imgW /2.4,this.imgH/2.4) }; update(){ this.x -= this.speed; if(this.x < 0- this.radius*2){ this.x= cW +200; this.y= player.y //Math.random()*(cH - 150)-90; this.speed= Math.random()*2+2; } if(this.y< 0+this.radius){ this.y= Math.random()*(cH - this.radius); } if(frame % 5 === 0){ this.frame++; if(this.frame >= 12)this.frame= 0; if(this.frame===3 ||this.frame===7||this.frame===11){ this.frameX = 0; }else{ this.frameX++; } if(this.frame<3)this.frameY =0; else if(this.frame <7)this.frameY=1; else if(this.frame<11)this.frameY =2; else this.frameY =0 } //collide let dx = this.x - player.x; let dy = this.y - player.y; this.distance = Math.sqrt(dx*dx+dy*dy); } } const enemy1 = new Enemy(); const makeEnemy=()=>{ enemy1.update(); enemy1.draw(); /////colllison if(enemy1.distance < enemy1.radius + player.radius){ gameOver= true; if(score>= highScore){ highScore = score; } } } //////////////explosion effects//////////// let explodeArray=[]; class Explode{ constructor(x,y){ this.x= x; this.y= y; this.radius=30; this.img=new Image(); this.img.src="https://i.ibb.co/7vGNrjY/bubble-pop-under-water-spritesheet.png"; this.frame=0; this.frameX=0; this.frameY=0; this.spriteW= 155; this.spriteH= 212; this.imgW= this.spriteW/2.4; this.imgH= this.spriteH/2.4; this.timer=0; } draw(){ ctx.drawImage(this.img,this.frameX*this.spriteW,this.frameY*this.spriteH,this.spriteW,this.spriteH,this.x-32,this.y-52,this.imgW,this.imgH); } update(){ /////for image frame///// if(runFrame){ if(this.timer % 5=== 0){ this.frameX++; this.frame++; if(this.frame >= 8)return; if(this.frame===4){ if(!this.frameTrue){ this.frameX = 0; } this.frameTrue = true; } //if frame is less than 3 than if(this.frame < 4){ this.frameY =0; } //if frame is bigger than 3 but less than 7 than else if(this.frame <=7){ this.frameY =1; } } this.timer++; }; } } const explode=new Explode(); const makeExplode=()=>{ for(let i in explodeArray){ explodeArray[i].update(); explodeArray[i].draw(); } if(explodeArray.length >10){ explodeArray.splice(0,1) } } /////////////explosion effect ends here//////// replay.onclick=()=>gameReplayFunc(); const gameReplayFunc=()=>{ if(gameOver=== true){ //mouse mouse.x= cW/2; mouse.y=cH/2; //player player.x= cW +200; player.y=cH/2; player.angle=0; //bubbles bubbleArray=[]; bubbles.x = Math.random() * cW; bubbles.y = cH + 100; //enemy enemy1.x= cW +200; enemy1.y= Math.random()*(cH - this.radius); explodeArray= []; //score score= 0; sect.style.display= "none"; gameOver = false; animate(); } } ////score text const textMake=()=>{ ctx.beginPath(); ctx.font= "1rem georgia"; ctx.fillStyle= "darkBlue"; ctx.fillText("Score: " + score,10,30); ctx.fill(); ctx.closePath(); //high score ctx.beginPath(); ctx.font="1rem bold"; ctx.fillStyle = "#053f5c"; ctx.fillText("High: "+ highScore,cW- 75,30); ctx.fill(); ctx.closePath(); spanscore.innerHTML= score; } ////////////////animate///////////////// const animate=()=>{ if(gameOver == true){ ctx.clearRect(0,0,cW,cH); sect.style.display= "block"; return; } ctx.clearRect(0,0,cW,cH); handleBackground(); makeBubble(); makeExplode(); makePlayer(); makeEnemy(); textMake(); requestAnimationFrame(animate); frame++; } animate(); }

fish game