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

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

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