Kids

Can

JavaScript

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

Logical Operators

Multiple Conditions

Mozzy's flying direction changes.
An If statement with a condition is used to decide when Mozzy should fly the other way.
E.g. when ever Mozzy's left-attribute becomes bigger then the SQUARE, he turns around.

But as you can see, He also needs to turn around when his left position becomes too small,
otherwise he would disapear of our page on the left side.
So there are multiple conditions that determine Mozzy's direction.

example1:



In fact Mozzy's buzzzing direction is based on 4 conditions.

Logical Operators: AND OR

Logical operators can join the conditions together: AND && and OR: || and NOT : !.

AND &&: both conditions have to be true.

 if ( 
 ( true ) 
 && 
 ( true ) 
 ) 
 --> true 


 if ( 
 ( false ) 
 && 
 ( true ) 
 ) 
 --> false 

OR ||: one of the conditions has to be true.

 if ( 
 ( true ) 
 || 
 ( true ) 
 ) 
 --> true 


 if ( 
 ( false ) 
 || 
 ( true ) 
 ) 
 --> true 


 if ( 
 ( false ) 
 || 
 ( false ) 
 ) 
 --> false 

NOT !: opposite of this condition.

 if ( 
 ! 
  true 
 ) 
 --> false 


Logial AND , OR and NOT operators

AND &&: both conditions have to be true.
OR ||: one of the conditions have to be true.
NOT !: opposite of this condition.

if (rain && sun) {
display the rainbow_picture;
}
if there is rain AND sun display the rainbow
if (rain || temperature<10 degrees) {
put on a coat;
}
// if rain OR a temp lower than 10
if (highwind && ! rain) {
go surfing;
}
if there high wind AND NO rain
if (picture.style.left <0 || picture_left>div.style.width) {
direction *= -1;
}
if pictures_left is smaller than 0,
OR bigger than the div's width
turn direction around to keep it inside the div

Multiple Conditions......... .... "TryoutPanel1"
<script> setTimeout(function (){ var conditions=new Array( '(false && true)', '(4==4 && 1<10)', '(5==4 || 1<10)', '(true && false)', '("Holly".length==5 && ! false )', '(4!=5 && false)'); for(var i=0;i<conditions.length;i++){ document.getElementById("p1").innerHTML += conditions[i] +" = "+ eval(conditions[i])+"<br>"; } },50); </script> <div style='height:200'><p id="p1" >...</p></div> <ul><li>Change the conditions and Logical operators and look at the result(6)</li></ul>



Stay inside the Square

The following code makes Mozzy turn around when the his left attribute becomes smaller then 0.
OR when Mozzys.left + Mozzys.width are bigger then the SQUARE.

 if ( 
 parseInt( 
 mozzy.style.left 
 ) 
 < 
 0 
 | | 


 parseInt( 
 mozzy.style.left 
 ) 
 + 
 parseInt( 
 mozzy.style.width 
 ) 
 >= 
 parseInt( 
 square.style.width 
 ) 
 ) 


 { 
 hor_Direction *= -1 
 } 


Change Mozzy's Buzzz- function......... .... "TryoutPanel2"
<script > var image = null; var animate111 ; var hor_Direction=5; var vert_Direction=5; var flying=true; function buzzz(){ var square=document.getElementById('air'); image = document.getElementById('mozzy'); //////////// check if mozzy is buzzzing outside the div-tag if(parseInt(image.style.left)+parseInt(image.style.width)>=parseInt(square.style.width) ||parseInt(image.style.left)<5 ){ hor_Direction*=-1; // change horizontal direction } if(parseInt(image.style.bottom) + parseInt(image.style.height)>=parseInt(square.style.height)||parseInt(image.style.bottom)<5){ vert_Direction*=-1; // change vertical direction } //.........for square path: hor_Direction and vert_Direction take turns becoming 0. /////// renew image's left and bottom attribute image.style.left = parseInt(image.style.left) + hor_Direction + 'px'; image.style.bottom = parseInt(image.style.bottom) + vert_Direction + 'px'; animate = setTimeout(buzzz,25); ///// call buzzz in 25msec } function onOff(){ ///// turn buzzing on and off if(flying){ flying=false; clearTimeout(animate); } else { flying=true; buzzz(); } } </script> <div onclick=" onOff() " id="air" style="position:relative ;width:500px ; height:300px ; border:solid 1px blue; background-image:url(/pics/CloudBG.jpg); background-size:500px 300px;" > <img id="mozzy" src="/pics/mug2.gif" style="position:absolute; left:10px; bottom:5px ; height:100px ; width:160px" onload="buzzz()" /> </div> <ul><li>Make Mozzy buzzz within a smaller area(17,21)</li> <li>buzzz under the DIV-tag(17)</li> <li><b>Experts:</b>Make a square buzzing path.(24)</li> <li>Change the background(53)/Change Mozzy(56).</li> </ul>




Mouse Hit Function

The Catch Mozzy game needs also Logical operators to find out if the swatter hits inside Mozzy

example2:



The Catch Mozzy game has a buzzz-function, a drag-function to drag the swatter around,
and a hit-function to check if swatter hits Mozzy.

 function hit ( 
 event 
 ) 
 { 


 rect 
 = 
 document . getElementBy('air'). 
  getBoundingClientRect()  
 ; 


 var hitPointX 
 = 
 event . 
 clientX 
 - 
 rect . left ; 


 var hitPointY 
 = 
 event . 
 clientY 
 - 
 rect . top ; 


 if ( 
 ( 
  hitPointX 
 < 
 parseInt ( mozzy.style.left ) 
 ) 
 || 


 ( 
 hitPointX 
 > 
 parseInt( mozzy.style.left ) + parseInt( mozzie.style.width )  
 ) 
  || 


 ( 
 hitPointY 
 < 
  parseInt( mozzy.style.top ) 
 ) 
 || 


 ( 
 hitPointY 
 > 
 parseInt( mozzy.style.top+ parseInt( mozzie.style.height )  
 ) 
 ) 
 { 


 MISS..... do something to show that it was a miss  
 } 


 else { 
 HIT:...... turn Mozzy's anoying buzzzing off . 
 } 
 } 

Create your own Swatter game......... .... "TryoutPanel3"
<script > var mozzy = null; var animate ; var hor_Direction=5; var vert_Direction=5; var flying=true; var swatter=null; var div=null; var rect = null; /////////////////// BUZZZ ////////////////////////////////// function buzzz(){ var square=document.getElementById('air'); mozzy = document.getElementById('mozzy'); // first check if the mozzy is not buzzzing outside the <div>-tag if(parseInt(mozzy.style.left)+parseInt(mozzy.style.width)>=parseInt(square.style.width) ||parseInt(mozzy.style.left)<5 ){ hor_Direction*=-1; // change horizontal direction } if(parseInt(mozzy.style.top) + parseInt(mozzy.style.height)>=parseInt(square.style.height)||parseInt(mozzy.style.top)<5){ vert_Direction*=-1; // change vertical direction } // add or subract from the mozzy's left and top attribute mozzy.style.left = parseInt(mozzy.style.left) + hor_Direction + 'px'; mozzy.style.top = parseInt(mozzy.style.top) + vert_Direction + 'px'; animate = setTimeout(buzzz,25); // call buzzz in 25msec } //////////////////// ON OFF //////////////////////////////////// function onOff(){ if(flying){ flying=false; clearTimeout(animate); } else { flying=true; buzzz(); } } ///////////////////// DRAG /////////////////////////////////// function drag(event){ // drag the swatter image around if(swatter!=null){ div=document.getElementById("air"); rect = div.getBoundingClientRect(); // imaginary rectangle around Div var insideX = event.clientX - rect.left- 15 ; // convert relative to div var insideY = event.clientY - rect.top-10 ; swatter.style.left=insideX +'px'; //make swatters position same as mouse swatter.style.top=insideY+'px'; } } ////////////// HIT /////////////////////////////////// function hit(event){ // check if mouse hits mozzy div=document.getElementById("air"); rect = div.getBoundingClientRect(); // imaginary rectangle around Div var hitpointX = event.clientX - rect.left ; // convert mouseX,Y relative to Div var hitpointY = event.clientY - rect.top ; // check if mouse coords outside mozzy if(true)//.......... replace 'true' with all the conditions that check if mouse is outside Mozzy // and connect them with logical operators { //......MISSED: write what should happen if user misses //.. you can use document.getElementById("missed") to write things in } else{ // .....HIT : write waht should happen if user hits target // .. you can use onOff() } } //////////////// ATTACH /////////////////////////////////// function attach(){ // point swatter to the image to it can be dragged swatter=document.getElementById("swatter"); } /////////////////// DROP /////////////////////////////////// function drop(){ //swatter points to nothing to nothing is dragged swatter=null; } </script> <div id="air" style="position:relative ;width:400px ; height:500px ; border:solid 1px blue; background-image:url(/pics/CloudBG.jpg); background-size:400px 500px; " onmousemove=" drag(event) " > <img id="mozzy" src="/pics/mug2.gif" style="position:absolute; left:10px; top:50px ; height:75px ; width:120px" onload=" buzzz(); " /> <img id="swatter" src="/pics/swatter.gif" style="position:absolute; left:100px; top:100px; height:150px ; width:100px" onmousedown=" this.style.height='170px';hit(event); " onmouseup=" this.style.height='150px'; document.getElementById('missed').innerHTML=''; " /> <p id="missed" style="position:absolute;font-size:30px; left:200px; right:400px" ></p> </div> <button onclick=" attach() "> attach swatter </button> <button onclick=" drop() "> drop swatter </button> <button onclick=" onOff() "> On Off buzzzing </button> <ul><li>Write some if statements with logical operators, to check if swatter hits inside the Mozzy-image(80)</li> <li>Write what should happen when the user, HITS or MISSES(83,87)</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