Kids

Can

JavaScript

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

While Loops


While Loops are very fast at finding things like needles in haystacks.
In the cupGame the While Loop finds the red Ball.

example1:

While Loops

The While Loop keeps executing a block of code for as long as its condition is true.
That makes it a perfect Loop for finding things:

Here is an Array that holds simple Ball Objects. Only one of the balls is red

 var 
 ballArray 
 = 
 [ 
 { color :  
 red 
 } 
 , 
 { color : 
  blue 
 } 
 , 
 { color : 
 blue 
 } 
 ] 

This While loop will find the red ball.
It stops when found becomes true or index i is bigger than the last element of ballArray

 var 
 i 
 = 
 -1 ; 
 var 
 found 
 =  
 false; 


 while ( 
  !  
 found 
  && 
 i 
 < 
 ballArray.length -1 
 ) { 
   
 i++; 


 found 
 = 
  ballArray[ 
 i 
 ] 
 . 
 color 
 == 
 'red' 
 ; 
 } 

When While Loop stops Index i holds the position of the red ball.



While finds the Red Ball......... .... "TryoutPanel1"
<script> var ballArray=[{color:'red'},{color:'blue'},{color:'blue'},{color:'blue'}]; function findRed(){ var i=-1; // i=index, will we increased every loop found=false; // found==false so !false== true while(!found && i<ballArray.length-1){ //will run until RED is found or end Array i++; // increase i or while runs infinitely found= (ballArray[i].color=='red'); // found will be true if this ball's color is red } alert('the Red Ball is in position:'+i); } </script> <button onclick="findRed()">find the Red Ball</button> <br> <br> <ul> <li>Hide the red ball in a different position(3)</li> <li>Try making none of the balls red:<br> We get the wrong answer.Why?</li> <li>Use if-else-statements to show if a red ball is found (use: found)(15) </li> </ul>




Find which Object was Clicked

In the Mole Game the While Loop finds which Mole was clicked by the Mouse

example1:



This Wile Loop uses mouseIntersects Function to check if Mole is hit.

 var 
 i 
 = 
 0; 
 var 
 hit 
 =  
 false; 


 while ( 
  !  
 hit 
  && 
 i 
 < 
 moleArray.length  
 ) { 


 hit 
 = 
 mouseIntersects ( 
 X 
 , 
 Y 
 , 
  moleArray[ 
 i 
 ] 
 ) 
 } 

To learn mouse about Mouse intersection go to: How Mouse Intersects works

Find which Mole was Hit......... .... "TryoutPanel2"
<script> var canvas; var context; numberMoles=3; moleArray = new Array(); // create initial moleArray ///// MOLE CONSTRUCTOR ////////////////////////// function mole(){ // moles constructor this.width=100; this.height=100; this.x=Math.floor(Math.random()*5)*this.width; //(multiplying by mole.width makes sure the moles don't overlap) this.y=Math.floor(Math.random()*3)*this.height; // '' '' same this.hit=false; //********** DRAW ***************// this.draw = function(){ // draws mole context.drawImage(moleImg,this.x,this.y,this.width,this.height) ; if(this.hit) context.strokeText('Ouch!',this.x,this.y); } } ///////////////////HIT MOLE ////////////////////////////////////////////////// function hitMole(){ var rec=canvas.getBoundingClientRect(); // convert mouse coords from window to canvas var X=event.clientX-rec.left; var Y=event.clientY-rec.top; var hit=false; // set boolean hit to false var i=0; while(false){ // ...replace false with the correct conditions //..........use mouseIntersects(X,Y,object) to check which mouse is hit. if(hit){moleArray[i].hit=true;draw();} // ...change what happens when a mole is hit(24) i++; } } /////////// MOUSE INTERSECTS ////////////////////////// function mouseIntersects(X,Y,object){ // check if Mouse intersects mole if(X<object.x || X>object.x+object.width) return false; if(Y<object.y || Y>object.y+object.height) return false ; else{return true;} } //////////////////// CREATING INSTANCES ///////////////// var moleImg=new Image(); moleImg.src="/pics/mole.png"; var i=0; //....create all moles while(i<numberMoles){ moleArray.push(new mole()); i++; } ///////////// WHOLE CANVAS DRAW //////////////////////////////////////// function draw(){ // draw all moles in array canvas= document.getElementById("canvas2"); context=canvas.getContext('2d'); context.font="30px Georgia"; context.fillStyle='#8F4700'; context.fillRect(0,0,canvas.width,canvas.height); var i=0; while(i<numberMoles){ moleArray[i].draw(); i++; } } setTimeout(function(){draw(); },50); </script> <p style="font-size:20;color:blue ;"> Hit the moles with the Mouse</p> <canvas id="canvas2" tabindex="0" style="border:orange solid 1px" title="double click to stop" height="300" width="500" onmousedown="hitMole(event)" ></canvas> <br> <ul> <li>In the hitMole() function write a While Loop that checks which mole was hit(38,40)</li> <li>The mole says Ouch, Can you change what happens when he is hit?(42,24)</li> </ul>



Finish The Game

The Mole pops out of the ground and then hides again with 2 animation functions show, hide.

To make the Mole go Underground we write a this.hide() function, that sets the x,y coords outside the Canvas.

 this.hide 
 = 
 function(){ 
 this.x 
 = 
 -100 
 ; 
 this.y 
 = 
 -100 
 ; 
 ...... 

Now we can make a Figure Eight Loopb> between the show() and the hide() function

 ...... 
 var 
 time 
 = 
 Math.floor( 
 Math.random() * 
 this.speed 
 ) 
 ; 


 setTimeout( 
 this.show 
 .bind(this) 
 , 
 time 
 ); 
 } 
Figure Eight with Hide......... .... "TryoutPanel3"
<script> var canvas= document.getElementById("canvas2"); var context=canvas.getContext('2d'); numberMoles=1; moleArray = new Array(); // create initial moleArray ///// MOLE CONSTRUCTOR ////////////////////////// function mole(){ // moles constructor this.width=100; this.height=100; this.x=Math.floor(Math.random()*5)*this.width; //(multiplying by mole.width makes sure the moles don't overlap) this.y=Math.floor(Math.random()*3)*this.height; // '' '' same this.speed=1400; // speed showing hideing this.stop=false; this.hit=false; //********** DRAW ***************// this.draw = function(){ // ...... replace with your own this.draw context.drawImage(moleImg,this.x,this.y,this.width,this.height) ; if(this.hit) context.strokeText('Ouch!',this.x,this.y); } //************SHOW***********************// this.show =function(){ // makes the mole pop out if(!this.stop){ this.x=Math.floor(Math.random()*5)*this.width; // random number times this.width and this.height this.y=Math.floor(Math.random()*3)*this.width; // makes sure the moles don't overlap draw(); var time=Math.floor(Math.random()*this.speed); // make the show time random setTimeout(this.show.bind(this),time); //..... figure eight:make show() loop with hide() } // and hide() with show() } //************HIDE***********************// this.hide =function(){ //..... make a hide() function here (example 31) if(!this.stop){ //..................set the this.x and this.y outside canvas(-100) //..........draw whole canvas // ..... make a random time parameter derived from this.speed for setTimeout // .......use setTimeout to make a figure eight with show() // loop: animate/show/hide } } } ////...............paste your hitMole function and mouseIntersects function here //////////////////// CREATING INSTANCES ///////////////// var moleImg=new Image(); moleImg.src="/pics/mole.png"; /////////////////// START //////////////////// function start(){ var i=0; //....create all moles while(i<numberMoles){ moleArray.push(new mole()); // add new Mole moleArray[i].show(); // make it move i++; } } ///////////// WHOLE CANVAS DRAW //////////////////////////////////////// function draw(){ // draw all moles in array canvas= document.getElementById("canvas2"); context=canvas.getContext('2d'); context.font="30px Georgia"; context.fillStyle='#8F4700'; context.fillRect(0,0,canvas.width,canvas.height); var i=0; while(i<numberMoles){ moleArray[i].draw(); i++; } } setTimeout(function(){start();draw(); },50); </script> <p style="font-size:20;color:blue ;"> There is only One Mole with a show() function</p> <canvas id="canvas2" tabindex="0" style="border:orange solid 1px" title="double click to stop" height="300" width="500" onmousedown="hitMole(event)" ></canvas> <br> <ul> <li>Write a <b>this.hide()</b> function(42) so the Mole can go underground</li> <li>Make a <b>figure eight</b> between this.show() and this.hide()(49,37)</li> <li>Paste your <b>hitMole()</b> and <b>mouseIntersects()</b> from Tryoutpanel2 in the code(59)</li> <li>Replace this.draw() with <b>your own this.draw</b> from Tryoutpanel2 (23)</li> </ul>

<-----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