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