'use strict'; var canvas = null; var ctx = null; var bgIMG = null; var bgINDEX = null; // BG assets var bgURLs = ["https://images.template.net/wp-content/uploads/2014/12/Colorful-Aquarium-Background.jpg","http://www.seaviewinfo.com/Backgrounds/thumbs/RiverRock.jpg","https://uk.hagen.com/File/Image/m/980/530/172b10ca-b7b5-4428-9a1e-94ceafca3e1b","https://images.template.net/wp-content/uploads/2014/12/Free-Aquarium-Background.jpg","http://picturesofaquariums.com/large/14/Aquarium-Backgrounds-Pictures-5.jpg","http://www.petmountain.com/photos/product/giant/114420S573913/aquarium-backgrounds/aquatic-creations-coral-cling-background.jpg","http://www.petmountain.com/photos/product/giant/114420S573911/aquarium-backgrounds/ocean-floor-cling-background.jpg"]; var FOOD_AMOUNT = 5; var ANIMAL_AMOUNT = 10; var ANIMAL_MAX_WIDTH = 100; var ANIMAL_MAX_HEIGHT = 80; var ANIMAL_MIN_WIDTH = 30; var ANIMAL_MIN_HEIGHT = 10; const foodTypes = ["🐛","🐌","[🍔🍟]","🍪","🍕","🌭","🍖","🍺"]; var foods = []; var animals = []; var bubbles = []; var drawInterval = null; function init(){ // fetch all HTML elements AFTER its been loaded var getEl = document.getElementById.bind(document); canvas=getEl("myCanvas"); var nextBG=getEl("nextBG"); var addFish=getEl("addFish"); var addFood=getEl("addFood"); var autoFeed=getEl("autoFeed"); var widthRatio = 0.95; var heightRatio = 0.8; canvas.width=window.innerWidth*widthRatio; canvas.height=window.innerHeight*heightRatio; ctx = canvas.getContext("2d"); bgIMG = new Image(); bgINDEX = 0; bgIMG.src=bgURLs[bgINDEX]; //const frameRate = 33; // click event handlers nextBG.onclick = switchBG; addFish.onclick = spawnFish; addFood.onclick = spawnFood; drawInterval = requestAnimationFrame(draw); } function randVal(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } function randColor(){ // generates random color string var vec="0123456789abcdef"; var color="#"; for(let i=0;i<6;i++){ color+=vec[randVal(0,vec.length-1)]; } return color; } function spawnFish(e){ if(animals.length >= ANIMAL_AMOUNT && e === event){return;} var animalWidth = randVal(ANIMAL_MIN_WIDTH, ANIMAL_MAX_WIDTH); var animalHeight = animalWidth*0.5; var animal={ x: randVal(0, canvas.width), y: randVal(0, canvas.height), dx: randVal(1,3), dy: randVal(1,3), dirX: (randVal(0,1)? -1:1), dirY: (randVal(0,1)? -1:1), width: animalWidth, height: animalHeight, color: randColor(), target: undefined }; animals.push(animal); document.getElementById("animalInfo").innerHTML += "
@@@
X Speed:"+animal.dx+"
Y Speed:"+animal.dy+"
Color:"+"Color"; } function spawnBaby(animal){ animal.width-=ANIMAL_MIN_WIDTH; animal.height=animal.width*0.5; spawnFish(true); animalBaby=animals[animals.length-1]; animalBaby.color=animal.color; animalBaby.width=ANIMAL_MIN_WIDTH; animalBaby.height=ANIMAL_MIN_WIDTH*0.5; animalBaby.x=animal.x+animal.width*0.3*animal.dirX; animalBaby.y=animal.y; } function spawnFood(){ if(foods.length >= FOOD_AMOUNT){return;} foods.push({ x: randVal(0,canvas.width), y: randVal(0, canvas.height), icon: foodTypes[randVal(0, foodTypes.length-1)], size: 30 }); } function bezierCurve(centerX, centerY, width, height,fill) { // draws a single ellipse ctx.beginPath(); ctx.moveTo(centerX, centerY - height / 2); ctx.bezierCurveTo( centerX + width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2, centerX, centerY + height / 2 ); ctx.bezierCurveTo( centerX - width / 2, centerY + height / 2, centerX - width / 2, centerY - height / 2, centerX, centerY - height / 2 ); ctx.closePath(); if(fill) ctx.fill(); else ctx.stroke(); } function switchBG(){ bgIMG.src = bgURLs[(++bgINDEX)%bgURLs.length]; } function drawBG(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(bgIMG, 0, 0, bgIMG.width,bgIMG.height, // source rectangle 0, 0, canvas.width, canvas.height); } function drawAnimals(){ for(let i=0;i= canvas.width+animal.width*0.5 && animal.dirX === 1){ animal.dirX = -1; } if(animal.x < -animal.width*0.5 && animal.dirX === -1){ animal.dirX = 1; } if(animal.y < -animal.height*0.5 && animal.dirY === -1){ animal.dirY = 1; } if(animal.y > canvas.height+animal.height*0.5 && animal.dirY === 1){ animal.dirY = -1; } } function getTarget(animal){ if(animal.target !== undefined){return;} if(!document.getElementById("fastFood").checked){ animal.target=foods[randVal(0,foods.length-1)]; } else{ var min=100000000; var ind=0; for(let i=0;iANIMAL_MAX_WIDTH){ spawnBaby(animals[i]); } return; } }catch(err){} } } function chaseFood(animal, food){ var x0=food.x+food.size*0.5; var y0=food.y; var x1=animal.x+animal.width*0.3*animal.dirX; var y1=animal.y+10; var dx=animal.dx; var dy=animal.dy; var insideX=x1>x0-food.size && x1y0-food.size && y1x0-food.size && x1 x0 && animal.dirX === 1){ animal.dirX = -1; //animal.x+=animal.width*0.5; animal.x=x1; } else if(x1 < x0 && animal.dirX === -1){ animal.dirX = 1; //animal.x-=animal.width*0.5; animal.x=x1; } if(insideY && insideX){} else if(y1>y0-food.size && y1 y0 && animal.dirY === 1){ animal.dirY = -1; } else if(y1 < y0 && animal.dirY === -1){ animal.dirY = 1; } updateAnimal(animal,true); animal.dx=dx; animal.dy=dy; var dist = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)); /*ctx.beginPath(); ctx.strokeStyle="red"; ctx.arc(x0,y0,food.size,0,Math.PI*2); ctx.stroke(); ctx.closePath();*/ if(dist <= food.size*0.5){ return true; } return false; } function addBubble(x,y){ bubbles.push({ x:x, y:y, dx:0, dy:-randVal(1,5), radius:randVal(2,10), color:(randVal(0,1)? "white":"grey") }); } function drawBubbles(){ ctx.lineWidth = 2; for(let i=0;i

Interactive Aquarium