var screenWidth,screenHeight; var canvasWorld,ctxWorld; var canvasCreatures,ctxCreatures; var canvasFood,ctxFood; const FRAMES_PER_SECOND = 30; const SPAWNING_FOOD_TIME = 2; const CREATURE_MAXIMUM_HEALTH = 2000; const TIME_TO_BE_ADULT = 200; const TIME_TO_GIVE_BIRTH = 200; const HEALTH_GAINED_PER_FOOD = 500; var creaturesManager,foodManager; var gameLoop,foodSpawning; var isAutoFeeding = true; var isFeeding = false; var isSpawningRandom = false; var isSpawningMale = false; var isSpawningFemale = false; var isSpawningPredator = false; //management of all the creatures function CreaturesManager(numberOfCreatures) { //number of creatures this.numberOfCreatures = numberOfCreatures; //list of all the active/living creatures this.activeCreatures = []; //used on the beginning spawns 'numberOfCreatures' creatures this.spawnCreatures = function(){ //cycle a number of times equal to the numberOfCreatures given for(var i = 0; i < numberOfCreatures; i++) { //assign to a creature variable a random creature (Male or Female) var creature = (Math.random() < 0.5) ? new MaleCreature() : new FemaleCreature(); //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); } }; //spawns a random creature (Male or Female) on a given coordinate this.spawnRandomCreatureAtLocation = function(x,y){ //assign to a creature variable a random creature (Male or Female) var creature = (Math.random() < 0.5) ? new MaleCreature() : new FemaleCreature(); //set the position of the creature to the coordinates given creature.x = x; creature.y = y; //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); //increment the number of creatures this.numberOfCreatures++; }; //spawns a Male creature on a given coordinate this.spawnMaleCreatureAtLocation = function(x,y){ //assign to a creature variable a Male creature var creature = new MaleCreature(); //set the position of the creature to the coordinates given creature.x = x; creature.y = y; //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); //increment the number of creatures this.numberOfCreatures++; }; //spawns a Male creature on a given coordinate this.spawnFemaleCreatureAtLocation = function(x,y){ //assign to a creature variable a Female creature var creature = new FemaleCreature(); //set the position of the creature to the coordinates given creature.x = x; creature.y = y; //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); //increment the number of creatures this.numberOfCreatures++; }; //spawns a Predator on a given coordinate this.spawnPredatorAtLocation = function(x,y){ //assign to a creature variable a Predator creature var creature = new Predator(); //set the position of the creature to the coordinates given creature.x = x; creature.y = y; //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); //increment the number of creatures this.numberOfCreatures++; }; //draw all the active creatures this.drawCreatures = function(){ //clean the creatures canvas ctxCreatures.clearRect(0,0,screenWidth,screenHeight); //loop a 'numberOfCreatures' times for(var i = 0; i < this.numberOfCreatures; i++) //draw this active creature this.activeCreatures[i].draw(); }; //move all the active creatures this.moveCreatures = function(){ //loop a 'numberOfCreatures' times for(var i = 0; i < this.numberOfCreatures; i++) { //move this active creature this.activeCreatures[i].move(); //if this active creature is undefined (doesn't exist) if(this.activeCreatures[i] === undefined) //exit this cycle and go for the next continue; //if this active creature is dead if(this.activeCreatures[i].isDead()) { //remove this active creature from the activeCreatures list this.activeCreatures.splice(i,1); //decrease the number of creatures this.numberOfCreatures--; //exit this cycle and go for the next continue; } //if this active creature is Female and it is pregnant if(this.activeCreatures[i].gender == "female" && this.activeCreatures[i].isPregnant) { //increase the time pregnant of this active creature this.activeCreatures[i].timePregnant++; //if it is time to this active creature give birth if(this.activeCreatures[i].timePregnant >= TIME_TO_GIVE_BIRTH) { //assign to a creature variable a random creature (Male or Female) var creature = (Math.random() < 0.5) ? new MaleCreature() : new FemaleCreature(); //set the position of this new creature around the 'mother' position creature.x = this.activeCreatures[i].x - this.activeCreatures[i].size; creature.y = this.activeCreatures[i].y - this.activeCreatures[i].size; //put this new creature inside the activeCreatures array this.activeCreatures.push(creature); //increase the number of creatures this.numberOfCreatures++; //this active creature is no longer pregnant this.activeCreatures[i].isPregnant = false; //the time pregnant of this active creature is set to 0 this.activeCreatures[i].timePregnant = 0; } } } //check for collisions on all the active creatures this.checkCollisionsBetweenCreatures(); }; //check for collisions on all the active creatures this.checkCollisionsBetweenCreatures = function(){ //this loop represents the first creature on the comparison for(var firstCreature = 0; firstCreature < this.numberOfCreatures - 1; firstCreature++) { //this loop represents the second creature on the comparison for(var secondCreature = firstCreature + 1; secondCreature < this.numberOfCreatures; secondCreature++) { //if the two creatures are colliding if (this.activeCreatures[firstCreature].x < this.activeCreatures[secondCreature].x + this.activeCreatures[secondCreature].rayRadius && this.activeCreatures[firstCreature].x + this.activeCreatures[firstCreature].rayRadius > this.activeCreatures[secondCreature].x && this.activeCreatures[firstCreature].y < this.activeCreatures[secondCreature].y + this.activeCreatures[secondCreature].rayRadius && this.activeCreatures[firstCreature].rayRadius + this.activeCreatures[firstCreature].y > this.activeCreatures[secondCreature].y) { //if the two creatures are of the same gender OR one of them is a Predator if(this.activeCreatures[firstCreature].gender == this.activeCreatures[secondCreature].gender || this.activeCreatures[firstCreature] instanceof Predator || this.activeCreatures[secondCreature] instanceof Predator) //exit this cycle and go for the next //(because same gender can't reproduce and a predator can't have childs) continue; //assign to a variable the female creature var female = (this.activeCreatures[firstCreature].gender == "female") ? this.activeCreatures[firstCreature] : this.activeCreatures[secondCreature]; //assign to a variable the male creature var male = (this.activeCreatures[firstCreature].gender == "male") ? this.activeCreatures[firstCreature] : this.activeCreatures[secondCreature]; //if the female creature is dying if(female.health/10 <= 40) //exit this cycle and go for the next //(because dying females can't reproduce) continue; //if the female isn't pregnant AND both creatures are adults if(!female.isPregnant && female.isAdult() && male.isAdult()) //the female becomes pregnant female.isPregnant = true; } } } }; } //blueprint for all the creatures function Creature() { //the size of the this creature (relative to the width and height of the screen) this.size = (screenWidth > screenHeight) ? (screenWidth / screenHeight) * 12 : (screenHeight / screenWidth) * 12; //this creature health this.health = 1000; //this creature color (grey) this.color = "#888888"; //this creature ray of vision color(grey) this.rayColor = "#888888"; //this creature ray of vision radius this.rayRadius = (this.health*(this.size*2))/1000; //this creature gender this.gender = "undefined"; //this creature initial speed (all of the different speeds on a creature's life are relative to this) this.speed = Math.random() * ((this.size / 10) -(-this.size / 10)) + (-this.size / 10); //this creature current speed (on any moment) this.currentSpeed = (this.health * this.speed) / (CREATURE_MAXIMUM_HEALTH/2); //this creature horizontal speed this.speedX = this.currentSpeed; //this creature vertical speed this.speedY = this.currentSpeed; //this creature X coordinate this.x = (Math.random() * (screenWidth - this.size)) + this.size; //this creature Y coordinate this.y = (Math.random() * (screenHeight - this.size)) + this.size; //this creature time alive this.timeAlive = 0; //this creature moving function this.move = function(){ //set this creature current speed to be relative to the health,speed and creatures maximum health this.currentSpeed = (this.health * this.speed) / (CREATURE_MAXIMUM_HEALTH/2); //set this creature horizontal speed to be equal to the negative value of this creature current speed when negative, and to the positive value of this creature current speed when positive this.speedX = (this.speedX < 0) ? - Math.abs(this.currentSpeed) : Math.abs(this.currentSpeed); //set this creature vertical speed to be equal to the negative value of this creature current speed when negative, and to the positive value of this creature current speed when positive this.speedY = (this.speedY < 0) ? - Math.abs(this.currentSpeed) : Math.abs(this.currentSpeed); //check if there's any food on this creature ray of vision this.checkIsFoodOnView(); //increment the value of the X coordinate of this creature by the value of the horizontal speed this.x += this.speedX; //increment the value of the Y coordinate of this creature by the value of the vertical speed this.y += this.speedY; //if this creature is exiting the left boundarie of the screen if(this.x - this.rayRadius < 0) { //if the horizontal speed is negative //(without this check there will be special cases where the creature will be stuck, //endlessly inverting the horizontal speed value from positive to negative and vice versa) if(this.speedX < 0) //invert the value of the horizontal speed this.speedX *= -1; } //if this creature is exiting the right boundarie of the screen if(this.x + this.rayRadius > screenWidth) { //if the horizontal speed is positive //(without this check there will be special cases where the creature will be stuck, //endlessly inverting the horizontal speed value from positive to negative and vice versa) if(this.speedX > 0) //invert the value of the horizontal speed this.speedX *= -1; } //if this creature is exiting the top boundarie of the screen if(this.y - this.rayRadius < 0) { //if the vertical speed is negative //(without this check there will be special cases where the creature will be stuck, //endlessly inverting the vertical speed value from positive to negative and vice versa) if(this.speedY < 0) //invert the value of the vertical speed this.speedY *= -1; } //if this creature is exiting the bottom boundarie of the screen if(this.y + this.rayRadius > screenHeight) { //if the vertical speed is positive //(without this check there will be special cases where the creature will be stuck, //endlessly inverting the vertical speed value from positive to negative and vice versa) if(this.speedY > 0) //invert the value of the vertical speed this.speedY *= -1; } //decrease the health of this creature this.health--; //update the radius of the ray of vision of this creature this.rayRadius = (this.health*(this.size*2))/1000; //if the radius of the ray of vision is less or equal to the size of this creature if(this.rayRadius <= this.size) //don't make the ray radius lower, set it equal to this creature size this.rayRadius = this.size; //increment this creature time alive this.timeAlive++; }; //this creature drawing function this.draw = function(){ //if this creature is an adult if(this.isAdult()) { //draw this creature drawFilledRect(canvasCreatures,this.x,this.y,this.size,this.size,this.color); //draw this creature ray of view drawCircle(canvasCreatures,this.x + this.size/2,this.y + this.size/2,this.rayRadius,this.rayColor); } //otherwise else { //draw this creature with a size divided by 2 drawFilledRect(canvasCreatures,this.x,this.y,this.size/2,this.size/2,this.color); //draw this creature ray of view with a radius divided by 2 drawCircle(canvasCreatures,this.x + this.size/4,this.y + this.size/4,this.rayRadius/2,this.rayColor); } //set the color of the stats text ctxCreatures.fillStyle = "#FFFFFF"; //set the size of the stats text font relative to the screen width var fontSize; if(screenWidth > 900) fontSize = 10; else if(screenWidth > 450) fontSize = 6; else fontSize = 4; //set the stats text font ctxCreatures.font = fontSize+"px Arial"; //write the speed stat ctxCreatures.fillText("Speed: "+Math.abs(Math.round(this.currentSpeed * 100) / 100),this.x - this.size,this.y - this.size*2); //write the health stat ctxCreatures.fillText("Health: "+Math.floor(this.health/10),this.x - this.size,this.y - this.size*1.5); //write the age stat var age = (this.isAdult()) ? "Adult" : "Child"; ctxCreatures.fillText("Age: "+age,this.x - this.size,this.y - this.size); //write the state stat var state = ""; if(this.isPregnant) state += "Pregnant "; if(this.health/10 <= 40) state += "Dying "; if(state == "") state = "Roaming" ctxCreatures.fillText("State: "+state,this.x - this.size,this.y - this.size/2); //if this creature is not female if(this.gender != "female") //exit the drawing function return; //if this female creature is pregnant if(this.isPregnant) //draw the growing 'fetus' circle drawCircle(canvasCreatures,this.x + this.size/2,this.y + this.size/2,(this.timePregnant * (this.size/2))/200,"#000000"); }; //check if there's food on the ray of view of this creature this.checkIsFoodOnView = function(){ //loop through all the active food for(var i = 0; i < foodManager.numberOfFood; i++) { //if this active food doesnt exist if(foodManager.activeFood[i] == null) //exit this cycle and go for the next continue; //get the X coordinate of the center of this creature var centerOfCreatureX = this.x + (this.size/2); //get the Y coordinate of the center of this creature var centerOfCreatureY = this.y + (this.size/2); //get the X coordinate of the center of the active food being analyzed var centerOfFoodX = foodManager.activeFood[i].x + (foodManager.activeFood[i].size/2); //get the Y coordinate of the center of the active food being analyzed var centerOfFoodY = foodManager.activeFood[i].y + (foodManager.activeFood[i].size/2); //if the food being analyzed is on the ray of view of this creature if (centerOfCreatureX - this.rayRadius < foodManager.activeFood[i].x && centerOfCreatureX + this.rayRadius > foodManager.activeFood[i].x + foodManager.activeFood[i].size && centerOfCreatureY - this.rayRadius < foodManager.activeFood[i].y && centerOfCreatureY + this.rayRadius > foodManager.activeFood[i].y + foodManager.activeFood[i].size) { //if this creature is on the left of the food if(centerOfCreatureX < centerOfFoodX) { //if the creature is moving left if(this.speedX < 0) { //make the creature move towards the food(move right) by inverting the horizontal speed this.speedX *= -1; } } //if this creature is on the right of the food else if(centerOfCreatureX > centerOfFoodX) { //if the creature is moving right if(this.speedX > 0) { //make the creature move towards the food(move left) by inverting the horizontal speed this.speedX *= -1; } } //if this creature is above the food if(centerOfCreatureY < centerOfFoodY) { //if this creature is moving up if(this.speedY < 0) { //make the creature move towards the food(move down) by inverting the vertical speed this.speedY *= -1; } } //if this creature is below the food else if(centerOfCreatureY > centerOfFoodY) { //if this creature is moving down if(this.speedY > 0) { //make the creature move towards the food(move up) by inverting the vertical speed this.speedY *= -1; } } //if this creature is colliding with the food being analyzed if (centerOfCreatureX - this.size/2 < foodManager.activeFood[i].x && centerOfCreatureX + this.size/2 > foodManager.activeFood[i].x && centerOfCreatureY - this.size/2 < foodManager.activeFood[i].y && centerOfCreatureY + this.size/2 > foodManager.activeFood[i].y) { //increase the health of this creature this.health += HEALTH_GAINED_PER_FOOD; //if this creature's health is greater or equal to the maximum if(this.health >= CREATURE_MAXIMUM_HEALTH) //make the health of this creature stuck on the maximum this.health = CREATURE_MAXIMUM_HEALTH; //remove the food being analyzed (that the creature eated) from the active food list foodManager.activeFood.splice(i,1); //decrease the number of active food foodManager.numberOfFood--; } } } }; //returns true if this creature is an adult this.isAdult = function() { return (this.timeAlive > TIME_TO_BE_ADULT); }; //returns true if this creature is dead this.isDead = function() { return (this.health <= 0); }; } //blueprint for all the Male creatures function MaleCreature() { //inherit all the Creature class atributtes Creature.call(this); //set the color of all Male creatures to be blue this.color = "#0000AA"; //set the color of the ray of vision of all Male creatures to be blue this.rayColor = "#000088"; //set the gender of all Male creatures to be male this.gender = "male"; //override the Creature class speed attribute to be higher this.speed = Math.random() * ((this.size / 8) -(-this.size / 8)) + (-this.size / 8); //set the horizontal speed to be equal to the speed this.speedX = this.speed; //set the vertical speed to be equal to the speed this.speedY = this.speed; //override the Creature class health attribute to be more specific to the Male creatures this.health = Math.random() * (1200 - 800) + 800; } //blueprint for all the Female creatures function FemaleCreature() { //inherit all the Creature class atributtes Creature.call(this); //set the color of all Female creatures to be pink this.color = "#880088"; //set the color of the ray of vision of all Female creatures to be pink this.rayColor = "#550055"; //set the gender of all Female creatures to be female this.gender = "female"; //all females don't start pregnant this.isPregnant = false; //all females start with 0 of time pregnant this.timePregnant = 0; //override the Creature class health attribute to be more specific to the Female creatures this.health = Math.random() * (1500 - 1000) + 1000; } //blueprint for all the Predator creatures function Predator() { //inherit all the Creature class atributtes Creature.call(this); //set the color of all Predator creatures to be grey this.color = "#646464"; //set the color of the ray of vision of all Predator creatures to be grey this.rayColor = "#868686"; //override the Creature class speed attribute to be higher this.speed = Math.random() * ((this.size / 6) -(-this.size / 6)) + (-this.size / 6); //set the horizontal speed to be equal to the speed this.speedX = this.speed; //set the vertical speed to be equal to the speed this.speedY = this.speed; //override the Creature class health attribute to be more specific to the Predator creatures this.health = Math.random() * (500 - 20) + 500; //override the Creature class ray radius attribute to be more specific to the Predator creatures this.rayRadius = ((this.health*(this.size*2))/1000) * 4; //override the Creature class checkIsFoodOnView //(because the Predator creatures have other creatures as food) this.checkIsFoodOnView = function() { //lopp through all the active creatures for(var i = 0; i < creaturesManager.numberOfCreatures; i++) { //if the active creature doesn't exist or is this predator if(creaturesManager.activeCreatures[i] == null || creaturesManager.activeCreatures[i] == this) //exit this cycle and go for the next continue; //if the active creature is a Predator and have more health than this Predator if(creaturesManager.activeCreatures[i] instanceof Predator && creaturesManager.activeCreatures[i].health >= this.health) //exit this cycle and go for the next continue; //get the X coordinate of the center of this predator var centerOfCreatureX = this.x + (this.size/2); //get the Y coordinate of the center of this predator var centerOfCreatureY = this.y + (this.size/2); //get the X coordinate of the center of the active creature being analyzed var centerOfFoodX = creaturesManager.activeCreatures[i].x + (creaturesManager.activeCreatures[i].size/2); //get the Y coordinate of the center of the active creature being analyzed var centerOfFoodY = creaturesManager.activeCreatures[i].y + (creaturesManager.activeCreatures[i].size/2); //if the active creature being analyzed is on the ray of view of this predator if (centerOfCreatureX - this.rayRadius < creaturesManager.activeCreatures[i].x && centerOfCreatureX + this.rayRadius > creaturesManager.activeCreatures[i].x + creaturesManager.activeCreatures[i].size && centerOfCreatureY - this.rayRadius < creaturesManager.activeCreatures[i].y && centerOfCreatureY + this.rayRadius > creaturesManager.activeCreatures[i].y + creaturesManager.activeCreatures[i].size) { //if this predator is on the left of the active creature if(centerOfCreatureX < centerOfFoodX) { //if the predator is moving left if(this.speedX < 0) { //make the predator move towards the active creature(move right) by inverting the horizontal speed this.speedX *= -1; } } //if this predator is on the right of the active creature else if(centerOfCreatureX > centerOfFoodX) { //if the predator is moving right if(this.speedX > 0) { //make the predator move towards the active creature(move left) by inverting the horizontal speed this.speedX *= -1; } } //if this predator is above the food if(centerOfCreatureY < centerOfFoodY) { //if this predator is moving up if(this.speedY < 0) { //make the predator move towards the active creature(move down) by inverting the vertical speed this.speedY *= -1; } } //if this predator is below the food else if(centerOfCreatureY > centerOfFoodY) { //if this predator is moving down if(this.speedY > 0) { //make the predator move towards the active creature(move up) by inverting the vertical speed this.speedY *= -1; } } //if this predator is colliding with the active creature being analyzed if (centerOfCreatureX - this.size < creaturesManager.activeCreatures[i].x && centerOfCreatureX + this.size > creaturesManager.activeCreatures[i].x && centerOfCreatureY - this.size < creaturesManager.activeCreatures[i].y && centerOfCreatureY + this.size > creaturesManager.activeCreatures[i].y) { //increase the health of this predator this.health += HEALTH_GAINED_PER_FOOD; //if this creature's health is greater or equal to the maximum divided by 2 if(this.health >= CREATURE_MAXIMUM_HEALTH / 2) //stuck the health of the predator on the maximum divided by 2 this.health = CREATURE_MAXIMUM_HEALTH / 2; //remove the active creature that the predator eated from the active creatures list creaturesManager.activeCreatures.splice(i,1); //decrease the number of active creatures creaturesManager.numberOfCreatures--; } } } }; //returns true always, because the predatores are always an adult this.isAdult = function() { return true; }; } //make the management of all the food function FoodManager(numberOfInitialFood) { //number of active food this.numberOfFood = 0; //list of all the active food this.activeFood= []; //executed on the begining, spawns all the initial food this.initFood = function() { //loop a 'numberOfInitialFood' times for(var i = 0; i < numberOfInitialFood; i++) //spawn a food this.spawnFood(); }; //spawn a new food this.spawnFood = function() { //put inside the active food list a new food this.activeFood.push(new Food()); //increase the number of active food this.numberOfFood++; }; //draw all the active food this.drawFood = function() { //clear the food canvas ctxFood.clearRect(0,0,screenWidth,screenHeight); //loop through all the active food for(var i = 0; i < this.numberOfFood; i++) //draw this active food this.activeFood[i].draw(); }; //spawn a food at a given location this.spawnFoodAtLocation = function(x,y) { //assign to a variable a Food object var food = new Food(); //set the position of the food to the given coordinates food.x = x; food.y = y; //put inside the active food list this new food this.activeFood.push(food); //increase the number of active food this.numberOfFood++; }; } //blueprint for all the Food function Food() { //size of the food, relative to the width and height of the screen this.size = (screenWidth / screenHeight) * 4; //set the color of all food to be red this.color = "#FF0000"; //set the x coordinate of this food to a random x coordinate between the x boundaries of the screen this.x = (Math.random() * (screenWidth - this.size)) + this.size; //set the y coordinate of this food to a random y coordinate between the y boundaries of the screen this.y = (Math.random() * (screenHeight - this.size)) + this.size; //draw this food this.draw = function(){ ctxFood.fillStyle = this.color; ctxFood.fillRect(this.x,this.y,this.size,this.size); }; } //executed when the application loads window.onload = function() { //developer alert alert('Hi, the dev here.\nThis can be a little confusing at first, I prepared for you a little "guide" on the top of the html file.\nHave fun!'); //get all the needed references to the HTML elements (canvas) getElementsReferences(); //get the screen dimensions getScreenDimensions(); //start the application processes startGame(); } //get the screen dimensions and make the canvas dimensions relative to it function getScreenDimensions() { //get the width and height of the screen screenWidth = Math.max(document.documentElement.clientWidth || window.innerWidth || 0); screenHeight = Math.max(document.documentElement.clientHeight || window.innerHeight || 0); //make the canvas width and height attributes relatives to the screen dimensions canvasWorld.setAttribute('width',screenWidth); canvasWorld.setAttribute('height',screenHeight); canvasCreatures.setAttribute('width',screenWidth); canvasCreatures.setAttribute('height',screenHeight); canvasFood.setAttribute('width',screenWidth); canvasFood.setAttribute('height',screenHeight); } //get references to the HTML canvas elements function getElementsReferences() { canvasWorld = document.getElementById('world'); ctxWorld = canvasWorld.getContext('2d'); canvasCreatures = document.getElementById('creatures'); ctxCreatures = canvasCreatures.getContext('2d'); canvasFood = document.getElementById('food'); ctxFood = canvasFood.getContext('2d'); } //restart the application function restart() { //if the game loop exists if(gameLoop != null) //stop the game loop clearInterval(gameLoop); //if the food spawning exists if(foodSpawning != null) //stop the food spawning clearInterval(foodSpawning); //start the application processes startGame(); } //start the application processes function startGame() { //draw the black background ctxWorld.fillStyle = "#000000"; ctxWorld.fillRect(0,0,screenWidth,screenHeight); //instantiate a new creatures and food managers creaturesManager = new CreaturesManager(10); foodManager = new FoodManager(10); //initialize the food(spawn initial food) foodManager.initFood(); //spawn initial creatures creaturesManager.spawnCreatures(); //draw initial creatures (this way doesnt wait for the game loop to be drew) creaturesManager.drawCreatures(); //start the game loop gameLoop = setInterval(function(){ //move all creatures creaturesManager.moveCreatures(); //draw all creatures creaturesManager.drawCreatures(); //draw all food foodManager.drawFood(); },1000/FRAMES_PER_SECOND); //start the food spawning foodSpawning = setInterval(function(){ //if the auto feeding isnt activated if(!isAutoFeeding) //exit this interval return; //spawn a new food foodManager.spawnFood(); },1000*SPAWNING_FOOD_TIME); //make the dropdown menu font size to be relative to the screen width var dropdownMenu = document.getElementsByTagName('select')[0]; if(screenWidth > 780) dropdownMenu.style.fontSize = "20px"; else if(screenWidth > 700) dropdownMenu.style.fontSize = "18px"; else if(screenWidth > 600) dropdownMenu.style.fontSize = "14px"; else if(screenWidth > 500) dropdownMenu.style.fontSize = "12px"; else if(screenWidth > 400) dropdownMenu.style.fontSize = "10px"; else if(screenWidth > 300) dropdownMenu.style.fontSize = "8px"; else if(screenWidth > 200) dropdownMenu.style.fontSize = "6px"; else dropdownMenu.style.fontSize = "2px"; //make the checkbox font size to be relative to the screen width var checkboxOption = document.getElementsByTagName('label')[0]; if(screenWidth > 780) checkboxOption.style.fontSize = "20px"; else if(screenWidth > 700) checkboxOption.style.fontSize = "18px"; else if(screenWidth > 600) checkboxOption.style.fontSize = "14px"; else if(screenWidth > 500) checkboxOption.style.fontSize = "12px"; else if(screenWidth > 400) checkboxOption.style.fontSize = "10px"; else if(screenWidth > 300) checkboxOption.style.fontSize = "8px"; else if(screenWidth > 200) checkboxOption.style.fontSize = "6px"; else checkboxOption.style.fontSize = "2px"; //listen for mouse click or touch on the creatures canvas //(because the creatures canvas have a higher z-index (see css file) it is on a higher layer //so when the mouse or touch interacts with the screen it will be this canvas that will be listening) canvasCreatures.addEventListener('mousedown',handleInteraction); } //dropdown options management, choose an action given the selected index function chooseAction(index) { switch(index) { case 0: isFeeding = false; isSpawningRandom = false; isSpawningMale = false; isSpawningFemale = false; isSpawningPredator = false; break; case 1: restart(); isFeeding = false; isSpawningRandom = false; isSpawningMale = false; isSpawningFemale = false; isSpawningPredator = false; break; case 2: isFeeding = true; isSpawningRandom = false; isSpawningMale = false; isSpawningFemale = false; isSpawningPredator = false; break; case 3: isFeeding = false; isSpawningRandom = true; isSpawningMale = false; isSpawningFemale = false; isSpawningPredator = false; break; case 4: isFeeding = false; isSpawningRandom = false; isSpawningMale = true; isSpawningFemale = false; isSpawningPredator = false; break; case 5: isFeeding = false; isSpawningRandom = false; isSpawningMale = false; isSpawningFemale = true; isSpawningPredator = false; break; case 6: isFeeding = false; isSpawningRandom = false; isSpawningMale = false; isSpawningFemale = false; isSpawningPredator = true; break; } } //sees what variable is true when the user clicks on the canvas, and then executes a function on click //given the present state function handleInteraction(e) { if(isFeeding) foodManager.spawnFoodAtLocation(e.clientX,e.clientY); else if(isSpawningRandom) creaturesManager.spawnRandomCreatureAtLocation(e.clientX,e.clientY); else if(isSpawningMale) creaturesManager.spawnMaleCreatureAtLocation(e.clientX,e.clientY); else if(isSpawningFemale) creaturesManager.spawnFemaleCreatureAtLocation(e.clientX,e.clientY); else if(isSpawningPredator) creaturesManager.spawnPredatorAtLocation(e.clientX,e.clientY); } //checks if the auto feed is enabled function handleAutoFeed(value) { isAutoFeeding = value.checked; } //draw a not filled circle function drawCircle(canvas,centerX,centerY,radius,strokeColor) { var ctx = canvas.getContext('2d'); ctx.strokeStyle = strokeColor; ctx.beginPath(); ctx.arc(centerX,centerY,radius,0,2*Math.PI); ctx.stroke(); ctx.closePath(); } //draw a filled rectangle function drawFilledRect(canvas,topLeftX,topLeftY,width,height,fillColor) { var ctx = canvas.getContext('2d'); ctx.fillStyle = fillColor; ctx.fillRect(topLeftX,topLeftY,width,height); }

Simple Living Creatures - Simulation