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