Kids

Can

JavaScript

<-----Back        Next --->

FrogGame Program with Intellisense



On this page you will make a game like this, simply by programming with the intellisense function of the Tryout panels.

example1:


Intellisense Function

Code-editors usually have an Intellisense function. It pops up all variables,methods and properties that are available to you in that part of the code: select/click them and they appear in the code-panel
There are 2 ways to call the Intellisense:CTRL+SPACE and dot.

 press: CTRL+Space 
                
 n 
 press: CTRL+Space 


 type : 
 person1 
 . 
                
 person1 
 . 
 a 
 press: CTRL+Space 

Try Intellisense ......... .... "TryoutPanel1"
<script> var person1= {name:'Krimson',age:13}; var firstName = 'Melinda'; var nameArray= ['John','Helen','Thomas']; //.... Before the comment press CTRL+SPACE: You will see all current global variables and functions. // the variables (properties) belong with the object window. //.... type nCTRL+SPACE : You will see all properties starting with n //....type person1. :You will see the properties belonging with the person1 object //.... type firstname. :You will see all functions and properties belonging with String // because firstName is a String //....type nameArray. :You will see all functions and properties for Array </script> <p id="topP">Let's try out Intellisense.</p> <ul><li>Before the comment. Press <b>CTRL+SPACE</b> (6)<br> You will see all current <b>global variables</b> and functions.<br> The ones that were made in the script, but also the properties that <b>belong with this window object</b></li> <li> To see the value of a variable's property you can type: alert(person1.name); Then execute.</li> <li> type <b>nCTRL+SPACE</b> : You will see all properties <b>starting with n </b> (8)</li> <li>To see properties and functions of the variables type: <b>variableName.</b> (10,11,13)</li> </ul>

click here for more info about the difference between global and local variables and their accessibility.



Explore frog

In the Tryout Panel below there is a new Frog object that is called frog. The right key makes him move to the right. Use intellisense to find out what else he can do and make the other keys work.


To find the keyCode for a key:Type a key in the input field below.

for more information on keydown click here

Play with Frog......... .... "TryoutPanel2"
<script> var canvas; var context; var animation; var points=0; var lifes=3; var thingsToDrawArray=[]; ///ADD POINT function addPoint() { points+=5; } ///GAME OVER function gameover(){ /// clear animations lifes=0; clearTimeout(animation); stop();} // DELETELIFE function deleteLife(){ lifes-=1; // take life off if(lifes<=0){return true;} // if 0 lifes: gameover() else{return false;} } /////////////////////////////////// FROG ////////////////////////////////////////////////// function Frog(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.speed=30; this.dx=1; // direction on x-axis: +1 or -1 this.dy=1; // .............y-axis: ........ this.jumpHeight=30; this.jumpWidth=5; this.deltaA=90; // keeps track of angle for jump() function this.stop=false; // boolean stop: if true can't move var that= this; //RIGHT this.right=function(){ this.dx=1; this.img=frogRightImg; }; //LEFT this.left=function(){ this.dx=-1; this.img=frogLeftImg; }; ///DRAW this.draw= function(){ // draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); //draw image over the(0,0) coord }; //MOVE this.move=function(){ if(!this.stop ){ if(this.dx < 0 && this.x+this.dx*this.speed>=0) this.x += this.dx*this.speed; // changes the x, y coordinates. if ( this.dx > 0 && this.x+this.width+this.dx*this.speed<= canvas.width) this.x += this.dx*this.speed; } }; ///EAT this.eat=function(){ this.tongue=new Tongue(this); thingsToDrawArray.unshift(this.tongue); // put tongue at first postion of things to Draw this.tongue.rollout(); }; //// JUMP this.jump=function(){ // frog jumps if(!this.stop){ // make sure he doesn't jump when he is killed if (this.dx>0){this.img=frogJump1Img;} else{this.img=frogJump2Img;} this.dy=-(Math.sin(this.deltaA * (Math.PI/180))); // dy becomes sine from deltaA (a changing angle) this.x+=this.dx*this.jumpWidth; this.y+=this.dy*this.jumpHeight; this.height=200; draw(); this.deltaA+=10; // keep track of angle if(this.deltaA<271) /// from 90-270 {setTimeout(this.jump.bind(this),50);} //// loop else{this.deltaA=90; this.height=90; // end of jump this.jumpHeight=30;this.jumpWidth=5; // in case jumpheight changed, put back if (this.dx>0){this.img=frogRightImg;} else{this.img=frogLeftImg;} // change img to sitting img } } }; }// end of FROG ///////// TONGUE ////////////////////////////////// Tongue= function (owner){ // inner function this.owner=owner; this.height=20; this.width=7; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; this.draw= function(){ context.fillStyle='red'; context.fillRect(this.x, this.y,this.width,this.height); //draw rect for a tongue } /// ROLLOUT this.rollout=function(){ this.height+=5; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; if(this.height<100){ setTimeout(this.rollout.bind(this),25); } else { this.owner.tongue=null; thingsToDrawArray.splice(thingsToDrawArray.indexOf(this),1); // when bigger then 140 } }; } ////////////////////////////////////INTERSECTS//////////////////////////// function intersects(obj1, obj2) { // checks if 2 shapes intersect if (obj1.x > (obj2.x + obj2.width*0.7) || obj2.x > (obj1.x + obj1.width*0.7)) {return false;} if (obj1.y > (obj2.y + obj2.height*0.7) || obj2.y > (obj1.y + obj1.height*0.7)) {return false; } return true; } ///////////////////////////////////////KEYS FUNCTION//////////////////////////////// function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==39){ // right arrow frog.right(); // frog turns right frog.move(); // frog moves } else if(key==37){ // left arrow //............type: frog. and choose an action for frog // action are functions. they end with (): move() } else if(key==38){ // up arrow event.preventDefault(); // otherwise window scrolls //............type frog. and choose the function you want frog to do } else if(key==32){ // space event.preventDefault(); // otherwise window scrolls //......if you want to see the value of frog's properties //...... type e.g. alert(frog.width) //what happens if you change some properties } } /////////////////////////////////////CREATE IMAGES //////////////////////////////////////// var frogRightImg=new Image(); //create new image frogRightImg.src="/pics/frog1.png"; // give it a new src var frogLeftImg=new Image(); //create new image frogLeftImg.src="/pics/frog2.png"; // give it a new src var frogJump1Img=new Image(); //create new image frogJump1Img.src="/pics/frog-jump1.png"; // give it a new src var frogJump2Img=new Image(); //create new image frogJump2Img.src="/pics/frog-jump2.png"; // give it a new src // DECLARE A GLOBAL VARIABLE var frog; // declare a global variable for frog so it is accessible in all functions ///////////////////////////// INITIALIZE variables that change/////////////////////////// function initialize(){ canvas=document.getElementById('canvas'); lifes=3; // put the lifes and points back to start values points=0; frog=new Frog(frogRightImg,300,canvas.height-100, 90,90); // Frog(img,x,y,width,height) thingsToDrawArray=[frog]; // add frog to thingsToDrawArray, or it won't be drawn on the canvas } ///////////////////////////////////////DRAW WHOLE CANVAS////////////////////////////////////////////////// /// DRAW function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.fillStyle='lightBlue'; context.fillRect(0,0,canvas.width,canvas.height); // wipe canvas context.fillStyle='white'; context.font="25px Georgia"; context.fillText('Score:'+ points,400,30); for(var i=0;i<thingsToDrawArray.length;i++){ // draw all things in the thingsToDrawArray if(thingsToDrawArray[i]){thingsToDrawArray[i].draw();} } if(lifes>0){ /// if lifes left:draw lifes context.fillText('LIFES:',5,30) for(var i=0;i<lifes;i++){ /// draw frog images for each life in top left screen context.drawImage(frogRightImg,i*30+100,5,25,25); } } else{context.fillText('GAME OVER:',5,30) ;gameover(); } // no lifes: gameover(); } ///// ANIMATIONLOOP ///////// main loop function animationLoop(){ draw(); // calls draw animation=setTimeout(animationLoop,25); // then calls itself after 25 ms, creating a loop } ///////////////////// STOP ///////////////////////// function stop(){ clearTimeout(animation); for (var i = 0 ; i < thingsToDrawArray.length ; i++) { if(thingsToDrawArray[i].deleteMe){ thingsToDrawArray[i].deleteMe();} // delete all animations from insects } } ///////////////////// RESTART ///////////////////////// function restart(){ stop(); initialize(); animationLoop(); } initialize(); animationLoop(); canvas.focus(); </script> <p id="topP">Here is <b>frog</b> all by himself. Only the <b>right arrow</b>key works. Use the Intellisense function to make the other keys work</p> <canvas id="canvas" width="600" height="400" tabindex="0" onkeydown="keysFunction()" ondblclick= "restart()" onclick="stop()" title='double click to start'></canvas> <ul><li>To make the <b>left-key</b> work Place the cursor in the <b>keysfunction</b> inside else if(key==37) and type: <b>frog.</b>(167). Intellisense will show all properties and functions for frog. </li> <li>The <b>functions</b> are the <b>actions</b> frog can do. They end with <b>()</b> e.g. move(). Try out what they do, and choose funtions for the left-key</li> <li>Now do the same for the <b>up key</b>(174)</li> <li>Find out the values of frog's <b>properties </b> by typing e.g. <b>alert(frog.jumpHeight)</b> (180)</li> <li>Change some <b>properties </b> and watch what happens (324)</li></ul>





Explore Insects

Now tryout the possibilities of the Insects. Space bar adds a new Insect(a nasty one). But it stands still.
Type bee. to find out what functions an insect has.



Play with Insect ......... .... "TryoutPanel3"
<script> var canvas; var context; var animation; var frog; var points=0; var lifes=3; var yummiesArray; var nastiesArray; var attackTime=7000; ///////// INSECT ///////////////////////////////////////////// function Insect(x,y,kind){ var nastyImages=[beeImg,waspImg]; var yummyImages=[fly1Img,fly2Img,fly3Img,fly4Img,fly5Img,]; if(kind=='nasty'){ this.img=nastyImages[Math.floor( Math.random()* nastyImages.length)]; this.width=50; this.height=50; } else{ this.img=yummyImages[Math.floor( Math.random()* yummyImages.length)]; this.width=40; this.height=40;} this.x=x; this.y=y; this.dx=1; this.dy=1; this.deltaT=0; this.stop=false; this.speed=12; this.kind=kind; //DRAW this.draw= function(){ // draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); //draw image }; ////FLYBY this.flyby= function(){ // Insect's animate function if(this.kind=='nasty'){console.log('flyby');} if(this.stop==false){ // check if animation is stopped if((this.x + this.width) > canvas.width ){this.free()} //delete from array when escaping canvas horizontally else{ this.x += this.dx * this.speed; // change yummy.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; if(this.kind=='nasty' && intersects(this,frog)){this.sting();deleteLife();} else{ setTimeout(this.flyby.bind(this),100);} // timeout loop } } }; ////FLUTTER this.flutter= function(){ // Insect's animate function if(this.stop==false){ // check if animation is stopped if( this.x <0 || (this.x+this.width) > canvas.width ){this.dx *= -1;} //turn around horizontally this.x += this.dx * this.speed; // change insect.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; if(this.kind=='nasty' && intersects(frog,this)){this.stop=true;this.sting();deleteLife();} else{ setTimeout(this.flutter.bind(this),100);} // timeout loop } }; ////FLYROUND this.flyround= function(){ // Insect's animate function if(this.stop==false){ // check if animation is stopped if(this.x > canvas.width ){this.x =0;} //come back on left side o canvas else{ this.x += this.dx * this.speed; // change yummy.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; if(this.kind=='nasty' && intersects(frog,this)){this.stop=true;this.sting();deleteLife();} else{ setTimeout(this.flyround.bind(this),100);} // timeout loop } } }; ////ZIGZAG this.zigzag= function(){ // Insect's animate function if(this.stop==false){ // check if animation is stopped if(this.x > canvas.width ){this.x =0;} //come back on left side canvas else{ this.x += this.dx * this.speed; } // change yummy.x-y pos if(this.deltaT<700){ // keep going for 700 msec this.deltaT+=100; // add on 100 msec to keep track of time this.y += this.dy * this.speed; // change y position } else{this.deltaT =0; this.dy *=-1;} // after 700 msec turn y-direction setTimeout(this.zigzag.bind(this),100); // timeout loop } }; ////ATTACK this.attack= function(){ // Insect's animate function this.stop=true; // stop causes the other movements to stop if( this.y <canvas.height-75){ // if insect is not above floor this.y += this.speed; // fly down } else { // at the right height this.x += this.dx * this.speed; // move horizontally } if(intersects(this,frog)){ deleteLife(); // deleteLife this.sting(); // insect stings and dies } else if(this.x<0 || this.x>canvas.width){this.free();} // if insects flies outside canvas, delete him else{ // otherwise setTimeout(this.attack.bind(this),50); // repeat timeout loop } }; ////ATTACK AFTER this.attackAfter = function(time){ this.stop=true; setTimeout(that.attack,time); }; //FIND this.find= function(object){ ///find function, changes insect's dx direction to follow the object this.dx =(object.x-this.x)/ Math.abs(object.x-this.x); //gives sign of distance between frog and insect }; //STING this.sting=function(){ this.stop=true; this.y-=8; /// go up this.width+=5; /// enlarge this.height+=5; this.draw(); this.deltaT+=50; // keep track of time if(this.deltaT<1300) /// if shorter the 1000 millisec {setTimeout(this.sting.bind(this),50);} //// loop else{ var index= nastiesArray.indexOf(this); // delete nasty from Array if(index!=-1) {nastiesArray.splice(index,1);} } } ///FREE this.free=function(){ this.stop=true; if(this.kind=='yummy'){yummiesArray.splice(yummiesArray.indexOf(this),1);delete this; } else if(this.kind=='nasty'){nastiesArray.splice(nastiesArray.indexOf(this),1); console.log('nastiesArray.length:'+ nastiesArray.length);delete this; } }; } /////////////////////////////////// FROG ////////////////////////////////////////////////// function Frog(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.speed=30; this.dx=1; // direction on x-axis: +1 or -1 this.dy=1; // .............y-axis: ........ this.jumpHeight=30; this.jumpWidth=5; this.deltaA=90; // keeps track of angle for jump() function this.stop=false; // boolean stop: if true can't move var that= this; //RIGHT this.right=function(){ this.dx=1; this.img=frogRightImg; }; //LEFT this.left=function(){ this.dx=-1; this.img=frogLeftImg; }; ///DRAW this.draw= function(){ // draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); //draw image over the(0,0) coord }; //MOVE this.move=function(){ if(!this.stop ){ if(this.dx < 0 && this.x+this.dx*this.speed>=0) this.x += this.dx*this.speed; // changes the x, y coordinates. if ( this.dx > 0 && this.x+this.width+this.dx*this.speed<= canvas.width) this.x += this.dx*this.speed; } }; ///EAT this.eat=function(){ setTimeout(function(){ that.tongue=new Tongue(that); that.tongue.rollout();},300); }; //// JUMP this.jump=function(){ // frog jumps if(!this.stop){ // make sure he doesn't jump when he is killed if (this.dx>0){this.img=frogJump1Img;} else{this.img=frogJump2Img;} this.dy=-(Math.sin(this.deltaA * (Math.PI/180))); // dy becomes sine from deltaA (a changing angle) this.x+=this.dx*this.jumpWidth; this.y+=this.dy*this.jumpHeight; this.height=200; this.draw(); this.deltaA+=10; // keep track of angle if(this.deltaA<271) /// from 90-270 {setTimeout(this.jump.bind(this),50);} //// loop else{this.deltaA=90; this.height=90; // end of jump this.jumpHeight=30;this.jumpWidth=5; // in case jumpheight changed, put back if (this.dx>0){this.img=frogRightImg;} else{this.img=frogLeftImg;} } } }; }// end of FROG ///////// TONGUE ////////////////////////////////// Tongue= function (owner){ // inner fucntion this.owner=owner; this.height=20; this.width=7; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; this.draw= function(){ context.fillStyle='red'; context.fillRect(this.x, this.y,this.width,this.height); //draw rect for a tongue } /// ROLLOUT this.rollout=function(){ this.height+=20; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; for(var i=0;i<yummiesArray.length;i++){ // for all yummies check if tongue hits them if(intersects(this,yummiesArray[i])){ addPoint(); // add a point yummiesArray[i].free(); // deletes this insect and creates new one } } for(var i=0;i<nastiesArray.length;i++){ // for all nasties check if tongue hits them if(intersects(this,nastiesArray[i])){ deleteLife(); // delete Life } } if(this.height<140){ setTimeout(this.rollout.bind(this),50); } else{this.owner.tongue=null;delete this;} // delete tonque } } ////////////////////////////////////INTERSECTS//////////////////////////// function intersects(obj1, obj2) { // checks if 2 shapes intersect if (obj1.x > (obj2.x + obj2.width*0.7) || obj2.x > (obj1.x + obj1.width*0.7)) {return false;} if (obj1.y > (obj2.y + obj2.height*0.7) || obj2.y > (obj1.y + obj1.height*0.7)) {return false; } return true; } ///////////////////////////////////////KEYS FUNCTION//////////////////////////////// function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==39){ // right arrow frog.right(); // frog turns right frog.move(); // frog moves } else if(key==37){ // left arrow frog.left(); // frog turns left frog.move(); // frog moves } else if(key==38){ // up arrow event.preventDefault(); // otherwise window scrolls frog.jump(); // frog jump frog.eat(); // frog eat } else if(key==32){ // space event.preventDefault(); // otherwise window scrolls var bee=new Insect(0,Math.floor(Math.random()*100),'nasty'); // makes insect nastiesArray.push(bee); // add to the nastiesArray, to draw it on canvas //......type bee. to see all functions and properties of bee //...... try out the functions and combinations //...use some combinations of functions and or properties to make bee do cool stuff } } /////////////////////////////////////CREATE IMAGES //////////////////////////////////////// var frogRightImg=new Image(); //create new image frogRightImg.src="/pics/frog1.png"; // give it a new src var frogLeftImg=new Image(); //create new image frogLeftImg.src="/pics/frog2.png"; // give it a new src var frogJump1Img=new Image(); //create new image frogJump1Img.src="/pics/frog-jump1.png"; // give it a new src var frogJump2Img=new Image(); //create new image frogJump2Img.src="/pics/frog-jump2.png"; // give it a new src var fly1Img=new Image(); fly1Img.src='/pics/fly1.png'; var fly2Img=new Image(); fly2Img.src='/pics/fly2.png'; var fly3Img=new Image(); fly3Img.src='/pics/fly3.png'; var fly4Img=new Image(); fly4Img.src='/pics/fly4.png'; var fly5Img=new Image(); fly5Img.src='/pics/fly5.png'; var beeImg=new Image(); //create new image beeImg.src="/pics/bee.png"; var waspImg=new Image(); //create new image waspImg.src="/pics/wasp.png"; ///////////////////////////// INITIALIZE variables that change/////////////////////////// function initialize(){ canvas=document.getElementById('canvas'); lifes=3; attackTime=7000; points=0; frog=new Frog(frogRightImg,300,canvas.height-100, 90,90); // Frog(img,x,y,width,height) yummiesArray=[]; nastiesArray=[]; //........add other instances } ///////////////////////////////////////DRAW WHOLE CANVAS////////////////////////////////////////////////// /// DRAW function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.fillStyle='lightBlue'; context.fillRect(0,0,canvas.width,canvas.height); // wipe canvas context.fillStyle='white'; context.font="25px Georgia"; context.fillText('Score:'+ points,400,30); for(var i=0;i<yummiesArray.length;i++){ yummiesArray[i].draw(); } for(var i=0;i<nastiesArray.length;i++){ nastiesArray[i].draw(); } // draw these instances if(frog.tongue){frog.tongue.draw();} frog.draw(); //......... draw another instance here if(lifes>0){ /// if lifes left:draw lifes context.fillText('LIFES:',5,30) for(var i=0;i<lifes;i++){ /// draw frog images for each life in top left screen context.drawImage(frogRightImg,i*30+100,5,25,25); } animation=setTimeout(draw,25); } else{context.fillText('GAME OVER:',5,30) ;gameover(); } // no lifes: gameover(); } ///////////////////// STOP ///////////////////////// function stop(){ window.highestTimeoutId = window.setTimeout(";"); /// gets rid of all running timeouts for (var i = 0 ; i < window.highestTimeoutId ; i++) {window.clearTimeout(i); } } ///////////////////// RESTART ///////////////////////// function restart(){ window.highestTimeoutId = window.setTimeout(";"); /// gets rid of all running timeouts for (var i = 0 ; i < window.highestTimeoutId ; i++) {window.clearTimeout(i); } initialize(); draw(); } ///ADD POINT function addPoint() { points+=5; } ///GAME OVER function gameover(){ /// clear animations clearTimeout(animation); setTimeout(stop,1000);} // DELETELIFE function deleteLife(){ lifes-=1; // take life off if(lifes<=0){return true;} // if 0 lifes: gameover() else{return false;} } ////SENDERS function yummiesSender (){ if(yummiesArray.length<7){ yummiesArray.push(new Insect(0,Math.ceil(Math.random()*100),'yummy')); yummiesArray[yummiesArray.length-1].zigzag();} var time=Math.ceil(Math.random()*5000); setTimeout(yummiesSender,time); } function nastiesSender (){ if(nastiesArray.length<3){ nastiesArray.push(new Insect(0,Math.ceil(Math.random()*100),'nasty')); nastiesArray[nastiesArray.length-1].flyby();} var time=Math.ceil(Math.random()*5000); setTimeout(nastiesSender,time); } function attacker(){ var nasty=nastiesArray[Math.floor(Math.random()*nastiesArray.length)]; if(nasty){nasty.find(frog);nasty.attack();} attackTime-=100; setTimeout(attacker,attackTime); } initialize(); draw(); canvas.focus() </script> <p id="topP">The <b>Space bar</b> adds an Insect. But it stands still. Use Intellisense to make the insects come to life.</p> <canvas id="canvas" width="600" height="400" tabindex="0" onkeydown="keysFunction()" ondblclick="restart()" onclick="stop()" title='double click to start'></canvas> <ul> <li>Each time you press <b>Space Bar</b> a new Insect is made.(327) But it stands still. </li> <li>Type <b>bee.</b> to see all the functions and properties for <b>bee</b> (330). </li> <li>try out the functions and find the value of properties : alert(bee.kind)</li> <li>use some combinations of functions and or properties to make bee do cool stuff</li> </ul>




Make Frog Game

To make a frog game you need a frog and some insects: declare them: var bee;
In the initialize function give them a value: bee= new Instect( 100,50,'nasty') and some actions bee.zigzag().
In the animationLoop you determine how they interact. if(intersects(frog,bee){bee.deleteMe}

Initialize and Intersects ......... .... "TryoutPanel4"
<script> var canvas=document.getElementById('canvas'); var context; var animation; var frog; var points=0; var lifes=3; var thingsToDrawArray; var attackTime=7000; /////////////////////////////////////CREATE IMAGES //////////////////////////////////////// var frogRightImg=new Image(); //create new image frogRightImg.src="/pics/frog1.png"; // give it a new src var frogLeftImg=new Image(); //create new image frogLeftImg.src="/pics/frog2.png"; // give it a new src var frogJump1Img=new Image(); //create new image frogJump1Img.src="/pics/frog-jump1.png"; // give it a new src var frogJump2Img=new Image(); //create new image frogJump2Img.src="/pics/frog-jump2.png"; // give it a new src var fly1Img=new Image(); fly1Img.src='/pics/fly1.png'; var fly2Img=new Image(); fly2Img.src='/pics/fly2.png'; var fly3Img=new Image(); fly3Img.src='/pics/fly3.png'; var fly4Img=new Image(); fly4Img.src='/pics/fly4.png'; var fly5Img=new Image(); fly5Img.src='/pics/fly5.png'; var beeImg=new Image(); //create new image beeImg.src="/pics/bee.png"; var waspImg=new Image(); //create new image waspImg.src="/pics/wasp.png"; ////////////////////////////////////INTERSECTS//////////////////////////// function intersects(obj1, obj2) { // checks if 2 shapes intersect if(obj1 && obj2 && !obj1.stop && !obj2.stop){ // check if objects exist and not dead if (obj1.x > (obj2.x + obj2.width*0.7) || obj2.x > (obj1.x + obj1.width*0.7)) {return false;} if (obj1.y > (obj2.y + obj2.height*0.7) || obj2.y > (obj1.y + obj1.height*0.7)) {return false; } return true; } return false; } ///////// INSECT ///////////////////////////////////////////// function Insect(x,y,kind){ var nastyImages=[beeImg,waspImg]; var yummyImages=[fly1Img,fly2Img,fly3Img,fly4Img,fly5Img]; if(kind=='nasty'){ this.img=nastyImages[Math.floor( Math.random()* nastyImages.length)]; this.width=50; this.height=50; } else{ this.img=yummyImages[Math.floor( Math.random()* yummyImages.length)]; this.width=40; this.height=40;} this.x=x; this.y=y; this.dx=1; this.dy=1; this.deltaT=0; this.stop=false; this.attackMode=false; this.attackMotion=undefined; this.speed=12; this.kind=kind; var that=this; //DRAW this.draw= function(){ // draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); //draw image }; ////FLYBY this.flyby= function(){ // Insect's animate function if(this.stop==false && this.attackMode==false){ // check if animation is stopped if((this.x + this.width) > canvas.width ){this.deleteMe()} //delete from array when escaping canvas horizontally else{ this.x += this.dx * this.speed; // change yummy.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; setTimeout(this.flyby.bind(this),100); // timeout loop } } }; ////FLUTTER this.flutter= function(){ // Insect's animate function if(this.stop==false && this.attackMode==false){ // check if animation is stopped or in attack if( this.x <0 || (this.x+this.width) > canvas.width ){this.dx *= -1;} //turn around horizontally this.x += this.dx * this.speed; // change insect.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; setTimeout(this.flutter.bind(this),100); // timeout loop } }; ////FLYROUND this.flyround= function(){ // Insect's animate function if(this.stop==false && this.attackMode==false){ // check if animation is stopped if(this.x > canvas.width ){this.x =0;} //come back on left side o canvas else{ this.x += this.dx * this.speed; // change yummy.x-y pos this.y += (Math.ceil(Math.random()*3)-2) * this.speed; setTimeout(this.flyround.bind(this),100);} // timeout loop } }; ////ZIGZAG this.zigzag= function(){ // Insect's animate function if(this.stop==false && this.attackMode==false){ // check if animation is stopped or in attack if(this.x > canvas.width ){this.x =0;} //come back on left side canvas else{ this.x += this.dx * this.speed; } // change yummy.x-y pos if(this.deltaT<700){ // keep going for 700 msec this.deltaT+=100; // add on 100 msec to keep track of time this.y += this.dy * this.speed; // change y position } else{this.deltaT =0; this.dy *=-1;} // after 700 msec turn y-direction setTimeout(this.zigzag.bind(this),100); // timeout loop } }; ////ATTACK this.attack= function(){ // Insect's animate function this.attackMode=true; if(!this.stop){ if( this.y <canvas.height-75){ // if insect is not above floor this.y += this.speed; // fly down } else { // at the right height this.x += this.dx * this.speed; // move horizontally } if(this.x<0 || this.x +this.width >canvas.width){ this.x=0;this.y=100;this.dx =1; this.attackMode=false;this.flyround();} // if insects flies outside canvas, delete him else{ // otherwise setTimeout(this.attack.bind(this),50); // repeat timeout loop } } }; ////ATTACK Every this.attackEvery = function(time){ // time is in milliseconds this.attackMotion=setTimeout(function (){that.attack(); that.attackEvery(time);},time); // attack and then create a loop every 'time' msec }; //FIND this.find= function(object){ ///find function, changes insect's dx direction to follow the object this.dx =(object.x-this.x)/ Math.abs(object.x-this.x); //gives sign of distance between frog and insect }; //STING this.sting=function(){ this.stop=true; clearTimeout(this.attackMode); this.attackMode=undefined; this.y-=8; /// go up this.width+=5; /// enlarge this.height+=5; this.draw(); this.deltaT+=50; // keep track of time if(this.deltaT<1300) /// if shorter the 1000 millisec {setTimeout(this.sting.bind(this),50);} //// loop else{ var index= thingsToDrawArray.indexOf(this); // delete nasty from Array if(index!=-1) {thingsToDrawArray.splice(index,1);} } }; ///DeleteMe this.deleteMe=function(){ this.stop=true; clearTimeout(that.attackMode); var index=thingsToDrawArray.indexOf(this); if(index!=-1){ thingsToDrawArray.splice(index,1); } }; } /////////////////////////////////// FROG ////////////////////////////////////////////////// function Frog(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.speed=30; this.dx=1; // direction on x-axis: +1 or -1 this.dy=1; // .............y-axis: ........ this.jumpHeight=30; this.jumpWidth=5; this.deltaA=90; // keeps track of angle for jump() function this.stop=false; // boolean stop: if true can't move this.tongue=null; var that= this; //RIGHT this.right=function(){ this.dx=1; this.img=frogRightImg; }; //LEFT this.left=function(){ this.dx=-1; this.img=frogLeftImg; }; ///DRAW this.draw= function(){ // draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); //draw image over the(0,0) coord }; //MOVE this.move=function(){ if(!this.stop ){ if(this.dx < 0 && this.x+this.dx*this.speed>=0) this.x += this.dx*this.speed; // changes the x, y coordinates. if ( this.dx > 0 && this.x+this.width+this.dx*this.speed<= canvas.width) this.x += this.dx*this.speed; } }; ///EAT this.eat=function(){ this.tongue=new Tongue(this); thingsToDrawArray.unshift(this.tongue); // put tongue at first postion of things to Draw this.tongue.rollout(); }; //// JUMP this.jump=function(){ // frog jumps if(!this.stop){ // make sure he doesn't jump when he is killed if (this.dx>0){this.img=frogJump1Img;} else{this.img=frogJump2Img;} this.dy=-(Math.sin(this.deltaA * (Math.PI/180))); // dy becomes sine from deltaA (a changing angle) this.x+=this.dx*this.jumpWidth; this.y+=this.dy*this.jumpHeight; this.height=200; this.draw(); this.deltaA+=10; // keep track of angle if(this.deltaA<271) /// from 90-270 {setTimeout(this.jump.bind(this),50);} //// loop else{this.deltaA=90; this.height=90; // end of jump this.jumpHeight=30;this.jumpWidth=5; // in case jumpheight changed, put back if (this.dx>0){this.img=frogRightImg;} else{this.img=frogLeftImg;} // change img to sitting img } } }; }// end of FROG ///////// TONGUE ////////////////////////////////// Tongue= function (owner){ // inner function this.owner=owner; this.height=20; this.width=7; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; this.draw= function(){ context.fillStyle='red'; context.fillRect(this.x, this.y,this.width,this.height); //draw rect for a tongue } /// ROLLOUT this.rollout=function(){ this.height+=5; this.x= this.owner.x+0.5*this.owner.width; this.y=this.owner.y - this.height +40; if(this.height<100){ setTimeout(this.rollout.bind(this),25); } else { this.owner.tongue=null; thingsToDrawArray.splice(thingsToDrawArray.indexOf(this),1); delete this; // when bigger then 140 } } } ///////////////////////////////////////KEYS FUNCTION//////////////////////////////// function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==39){ // right arrow frog.right(); // frog turns right frog.move(); // frog moves } else if(key==37){ // left arrow frog.left(); // frog turns left frog.move(); // frog moves } else if(key==38){ // up arrow event.preventDefault(); // otherwise window scrolls frog.jump(); // frog jumps frog.eat(); } else if(key==32){ // space event.preventDefault(); // otherwise window scrolls // ... can you make frog jump even higher? } } /////// CREATE GLOBAL VARIABLES OUTSIDE FUNCTION ///// var yummy1; // declare global variable //..........// declare more insect variables ///////////////////////////// INITIALIZE variables that change/////////////////////////// function initialize(){ frog=new Frog(frogRightImg,300,canvas.height-100, 90,90); // Frog(img,x,y,width,height) yummy1=new Insect(250,Math.floor(Math.random()*100),'yummy'); // make the variable name point to an Object //......make the yummy insect move //..........make a nasty //....... make it move and attack thingsToDrawArray=[yummy1,frog]; // .... add the new insects to the thingsToDrawArray // the draw function will draw them in order, last one on top. lifes=3; // shows how many lifes frog has left points=0; // points collected } //////////ANIMATION LOOP////// basic animation loop calls draw() every 25 ms function animationLoop(){ if(intersects(yummy1,frog.tongue)){ // check if the yummy insect intersect with the frog's tongue yummy1.deleteMe(); // if so delete the insect //..................what should happen when the frog has eaten the yummy? (press CTRL-SPACE) // if you have more yummies, should they all get the same points? } // ....if you created a nasty insect, check if it intersects with frog // .....if so, what should happen? points down ? delete a life? create new insects? draw(); // calls draw animation=setTimeout(animationLoop); // then calls itself after 25 ms, creating a loop } ///////////////////////////////////////DRAW WHOLE CANVAS////////////////////////////////////////////////// /// DRAW function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.fillStyle='lightBlue'; context.fillRect(0,0,canvas.width,canvas.height); // wipe canvas context.fillStyle='white'; context.font="25px Georgia"; context.fillText('Score:'+ points,400,30); for(var i=0;i<thingsToDrawArray.length;i++){ if(thingsToDrawArray[i]){ // check if this instance is not null thingsToDrawArray[i].draw(); } // then draw it } if(lifes>0){ /// if lifes left:draw lifes context.fillText('LIFES:',5,30) for(var i=0;i<lifes;i++){ /// draw frog images for each life in top left screen context.drawImage(frogRightImg,i*30+100,5,25,25); } } else{context.fillText('GAME OVER:',5,30) ;gameover(); } // no lifes: gameover(); } ///////////////////// STOP ///////////////////////// function stop(){ clearTimeout(animation); for (var i = 0 ; i < thingsToDrawArray.length ; i++) { if(thingsToDrawArray[i].deleteMe){ thingsToDrawArray[i].deleteMe();} // delete all animations from insects } } ///////////////////// RESTART ///////////////////////// function restart(){ stop(); initialize(); animationLoop(); } ///ADD POINT function addPoint() { points+=5; } ///GAME OVER function gameover(){ /// clear animations clearTimeout(animation); setTimeout(stop,1000);} // DELETELIFE function deleteLife(){ lifes-=1; // take life off if(lifes<=0){return true;} // if 0 lifes: gameover() else{return false;} } initialize(); animationLoop(); canvas.focus() </script> <p id="topP">Time to make your very own Game: The keys work but there is only 1 insect.</p> <canvas id="canvas" width="600" height="400" tabindex="0" onkeydown="keysFunction()" ondblclick="restart()" onclick="stop()" title='double click to start,click stop'></canvas> <ul><li>Define some <b>global variables</b> for your new insects. <br> It is done <b>outside </b> a function, so all functions can access them.(364)</li> <li> Inside <b> initialize()</b> you make the new variables into new insects with <b>new Insect(x,y,'yummy') or 'nasty'</b> (372)</li> <li>Make them <b>move and maybe attack</b>(373)</li> <li>Add them to the <b>thingsToDrawArray</b> or they wil not be drawn on the canvas.(375)</li> Even though the insects are there and are moving, nothing happens when frog runs into them. <li>In the <b>animationLoop</b> you can check who <b>intersects()</b> with whom (386)</li> <li>Then decide <b>what should happen</b> if frog eats or bumps into an insect (388)</li> <li>Do the same for your other insects (391,392)</li> </ul>




Some variables and functions are global: they belong with the window instance. They are accessible everywhere in the code, or when you type window. or this.
Some are local and are only accessible inside the scope of a function
Some belong with an instance . They are accessed with e.g.: mouse.
Vars and Functions that belong with a Constructor can be accessed inside Constructor with this.

 window.  
                
 this. 
                
 press: CTRL+Space 


  mouse 
 . 
                
 mouse.mo 
 press: CTRL+Space 


 function someName (){ 
 var a = 3; 
 press: CTRL+Space 
 } 


 function MouseObject(){ 
 this.x=3; 
 this. 
 } 
<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email