Kids

Can

JavaScript

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

ReadyObj with Animation and Intersects


Ready Object with Animation

example1:

This ReadyObjWithAnim Constructor has its own this.animate function.
It makes a loop between the animate function and a setTimeout(this.animate,50)

 this 
 . 
 animate 
 = 
 function ( ) { 


 this.x  
  + = 
 this.dx 
 * 
 10 
 ; 


 draw(); 
 setTimeout( 
 this.animate.bind(this) 
 , 
 50 
 )  
 ; 
 } 


This extra line turns the object around when the object escapes from the canvas when, this.x becomes too small or too big

 if ( 
 this.x < 0  
 || 
 this.x > canvas.width 
 ) { 
 this.dx *= -1 ; 
 } 

This line can stir up some cool random action .

 if ( 
 this.x < 0  
 || 
 this.x >  
 Math.floor( 
 Math.random() 
 * 500 
 ) 
 ) { 
 this.dx *= -1 ; 
 } 




ReadyObj with Animation......... .... "TryoutPanel1"
<script> var canvas; var context; ////////////// READY OBJECT WITH ANIMATION ////////////////////////// function ReadyObjWithAnim(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.dx=1; // direction on x-axis: +1 or -1 this.dy=1; // .............y-axis: ........ this.draw= function(){ // ReadyObjWithAnim draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); } this.animate= function(){ // ReadyObjWithAnim animate function if (this.x> canvas.width || this.x<0 ){this.dx = this.dx*-1;} //changes direction if x too big or small //...put another if-statement here to make mozzy zig-zag this.x += this.dx*10; // changes the x coordinate. dx = X-direction //this.y += this.dy*10; // un-comment this line to move vertically draw(); // redraw the whole canvas setTimeout(this.animate.bind(this),100); // timeout loop } } ///////////////// CREATE INSTANCES /////////////////////////////////////// var mozzyImg=new Image(); //create new image mozzyImg.src="/pics/mug2.gif" var mozzy=new ReadyObjWithAnim(mozzyImg,0,0, 100,100); //make a ReadyObjWithAnim instance //ReadyObjWithAnim(img,x,y,width,height) //////////////// WHOLE CANVAS DRAW FUNCTION /////////////////////////////////////// function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); // wipe canvas mozzy.draw(); // draw these instances //......... draw another instance here } ////////////////// DRAW ////////////////////////////////////////////// draw(); mozzy.animate(); </script> <canvas id="canvas" width="500" height="300" ></canvas> <ul><li>Make mozzy <b>zig zag</b>: add <b>if-statement</b>: with <b>this.y</b> and <b>this.dy</b>(27,31)</li> <li>Try some <b>randomness</b>:replace the if statement with: <br> if(this.x> Math.floor(Math.random()*500) || this.x<0){this.dx*=-1;}(26)</li> </ul>





Intersects

example2:


In this example the intersects-function is called each time the spacebar is pressed.
When Hand-object intersects with Mozzy-object the animation is stopped.

 if ( 
 key==32 
 ){ 


 if ( 
 intersects( 
 obj1 
 , 
 obj2 
 ) 
 ){ 
 mozzy.stop = true ; 
 } 


 } 
How an intersects-function works: click here


Intersects function......... .... "TryoutPanel2"
<script> var canvas; var context; ///////////////////////////////////READY OBJECT WITH ANIMATION////////////////////////////////////////////////// function ReadyObjWithAnim(img,x,y,width,height,dx){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.dx=dx; // direction on x-axis: +1 or -1 //this.dy=1; // .............y-axis: ........ this.stop=false; // if stop = true, setTimeout is not reset this.draw= function(){ // draw function for this Obj context.drawImage(this.img,this.x,this.y,this.width,this.height); } this.animate= function(){ // animate function for this Obj this.x += this.dx*5; // changes the x, y coordinates. draw(); // redraw the whole canvas if(this.stop==false){ // check if animation is stopped setTimeout(this.animate.bind(this),100); // timeout loop } } } ////////////////////////////////////INTERSECTS//////////////////////////// function intersects(obj1, obj2) { // checks if 2 shapes intersect if (obj1.x > (obj2.x + obj2.width) || obj2.x > (obj1.x + obj1.width)) {return false;} // obj1 or obj2 is right from the other one if (obj1.y > (obj2.y + obj2.height) || obj2.y > (obj1.y + obj1.height)) {return false; } // obj1 or obj2 is on south from the other one return true; // when both above conditions are not true, the shapes must intersect } ///////////////////////////////////////DRAW WHOLE CANVAS////////////////////////////////////////////////// function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); // wipe canvas sumo1.draw(); // draw these instances sumo2.draw(); //......... draw another instance here if(intersects(sumo2,sumo1)){ // if the sumos intersect sumo1.stop=true; // stop animation sumo2.stop=true; //.........add a bigger font context.fillText("BOOM!!",240,120); // write text //....change sumo1 x,y coords to set him on top of sumo2, then sumo1.draw() } } /////////////////////////////////////CREATE IMAGES AND OBJECTS//////////////////////////////////////// var sumo1Img=new Image(); //create new image sumo1Img.src="/pics/sumo1.gif" var sumo2Img=new Image(); //create new image sumo2Img.src="/pics/sumo2.gif" var sumo1=new ReadyObjWithAnim(sumo1Img,0,150, 100,100,1); //make a ReadyObjWithAnim instance //ReadyObjWithAnim(img,x,y,width,height) var sumo2=new ReadyObjWithAnim(sumo2Img,400,150, 100,100,-1); //........add other instances draw(); // draw whole canvas canvas.focus() // to make canvas listen to the keys sumo1.animate(); // activate animations sumo2.animate(); </script> <p>Watch what happens when the two Objects intersect...</p> <canvas id="canvas" width="500" height="300" ></canvas> <p> That wasn't very spectecular.Can you make something else happen?<br> <ul><li>Write something else in the draw function(66)</li> <li>Add a <b>font</b>: context.font="50px Georgia "(65)</li> <li>Set one sumo on top of the other one(68)</li> </ul> </p>

Make Catch Mozzy Game

Use this tryout-panel to make your own game with Animation,a Keysfunction and Intersects

Make your own Catch Mozzy Game ......... .... "TryoutPanel3"
<script> var canvas; var context; ///////////////////////////////////READY OBJECT WITH ANIMATION////////////////////////////////////////////////// function ReadyObjWithAnim(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.dx=1; // direction on x-axis: +1 or -1 this.dy=1; // .............y-axis: ........ this.stop=false; // boolean: stop this.draw= function(){ // ReadyObjWithAnim draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); } //********************************************************* //......replace the entire this animate function with your own this.animate= function(){ // ReadyObjWithAnim animate function if(this.x> Math.floor(Math.random()*500) || this.x<0){this.dx*=-1;} //random X-direction if (this.y> canvas.height || this.y<0 ){this.dy = this.dy*-1;} this.x += this.dx*30; // changes the x, y coordinates. this.y += this.dy*30; draw(); if(this.stop==false){ // redraw the whole canvas setTimeout(this.animate.bind(this),100); // timeout loop } } //*********************************************************** } ////////////////////////////////////INTERSECTS//////////////////////////// function intersects(obj1, obj2) { // checks if 2 shapes intersect if (obj1.x > (obj2.x + obj2.width) || obj2.x > (obj1.x + obj1.width)) {return false;} if (obj1.y > (obj2.y + obj2.height) || obj2.y > (obj1.y + obj1.height)) {return false; } return true; } ///////////////////////////////////////KEYS FUNCTION//////////////////////////////// function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==32){ // spacebar event.preventDefault(); // otherwise window scrolls //....... write an if-statement, that checks if hand intersects mozzy //....... and if so let mozzy stop, + add more ideas(like points) draw(); } else if(key==39){ // right arrow //event.preventDefault(); // otherwise window scrolls hand.x +=50; draw(); } else if(key==37){ // left arrow //event.preventDefault(); // otherwise window scrolls hand.x -=50; draw(); } //////// add in more keys } /////////////////////////////////////CREATE IMAGES AND OBJECTS//////////////////////////////////////// var mozzyImg=new Image(); //create new image mozzyImg.src="/pics/mug2.gif" var handImg=new Image(); //create new image handImg.src="/pics/hand.gif" //...... create new Image evilImg + set its src:(85,86) var mozzy=new ReadyObjWithAnim(mozzyImg,0,0, 70,70); //make a ReadyObjWithAnim instance //ReadyObjWithAnim(img,x,y,width,height) var hand=new ReadyObjWithAnim(handImg,300,150, 70,70); //...... create instance evilMozzy (93) ///////////////////////////////////////DRAW WHOLE CANVAS////////////////////////////////////////////////// function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); // wipe canvas mozzy.draw(); // draw these instances hand.draw(); //......... draw evilMozzy instance here //........write an if(intersects(mozzy,evilMozzy){....}-statement } ////////////////////START ///////////////////////////// draw(); canvas.focus() // to make canvas listen to the keys mozzy.animate(); //.....animate evilMozzy </script> <p><br> move:<b>left- right- arrow </b> keys and the hit: <b>spacebar</b>.</p> <canvas id="canvas" width="500" height="300" tabindex="0" onkeydown="keysFunction()" ></canvas> <p> The Spacebar doesn't work: <ul><li>Write an <b>if-statement</b> that checks if hand intersects mozzy. inside keysFunction:key==32.(60)</li> <li>Replace mozzy's <b>this.animate</b> with your own(25)</li></ul> Experts: <ul><li>Make an <b>evilMozzy</b> instance (93) with <b>evilImg</b>(85,86), <b>draw</> him</b>(111) and <b>animate</b> him (125)</li> <li>Write an <b>if-statement</b> inside <b>draw()</b> (113) to tell what happens if evilMozzy intersects Hand.</li></ul> <b>Tip:</b>to Restart Mozzy's flying <b>(mozzy.stop=false,mozzy.animate )</b>, to extend the game. </p>

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