Kids

Can

JavaScript

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

Ready Objects


If you use a ReadyObj Constructor from the JS-editor, every thing becomes very easy .
If you want to learn how to make a Constructor,go to: Creating Objects

example1:

Use ReadyObj Constructor

All you do is:
-Create an Image Object and give it a source URL

 var 
 myImg 
 = 
 new 
 Image() 
 ; 


 myImg 
 . 
 src 
 = 
 " 
 /pics/somePic.jpg 
 " 
 ; 

Make an instance of ReadyObj. Pass the img as a parameter

 var 
 spoungy 
 = 
 new 
 ReadyObj 
 ( 
 spoungeImg 
 , 
 x 
 , 
 y 
 , 
 width 
 , 
 height 
 ) 
 ; 

And tell the whole canvas draw function to draw it: myObj.draw()

 function 
 draw(){ 
 ..... 


 spoungy 
 . 
 draw() 
 ; 
 } 
Use the ReadyObj Constructor ......... .... "TryoutPanel1"
<script> var canvas; var context; //////////////////READY OBJECT CONSTRUCTOR /////////////////////////////////////////////// function ReadyObj(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.draw= function(){ // ReadyObj draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); // drawImage(img,x,y,width,height) } } /////////////// CREATE INSTANCES //////////////////////////////////////////////////////// var spoungeImg=new Image(); //create new image spoungeImg.src="/pics/spoungbob_smiley_face.png" var spoungy=new ReadyObj(spoungeImg,50,40, 100,100); //make a ReadyObj instance //ReadyObj(img,x,y,width,height) // ....make another instance (with different x,y values) ////////////////// WHOLE CANVAS DRAW FUNCTION ///////////////////////////////////// function draw(){ // draw whole canvas function canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); spoungy.draw(); // draw these instances //......... draw another instance here } //////////////////////////////////////// setTimeout(draw,100); </script> <canvas id="canvas" width="500" height="300" onkeydown="keysFunction();" tabindex="0"></canvas> <p> spoungy is an <b>instance</b> of the ReadyObj <b>Constructor</b>.<br> <br>Make another instance e.g. Grumpy: <ul><li>Make a new Image Object <b>grumpyImg</b> (24,25)</li> <li><b>right-click</b> a grumpy-image on the internet</li> <li>copy the <b>URL</b> and paste it inside of grumpyImg.<b>src</b>="..."(25)</li> <li>create the <b>instance</b>: grumpy (27)</li> <li><b>draw</b> grumpy (40)</li> </ul></p>




Move your Object with Keys

example2:


To move things around with the keyboard, use onkeydown to make the canvas listen to keyboard events:

 <canvas 
 onkeydown 
 = 
 " 
 keysFunction() 
 " 
 tabindex="0" 
 > 
 </canvas> 

Inside the script you can write your own keysFunction, or change the one that you can find in the JS-editor.

 function 
 keysFunction(){ 
 var 
 key 
 = 
 event 
 . 
 keyCode 
 ; 


 if  
 ( 
 key==39 
 ) 
 { 
 myObj.x + = 50 ; 
 } 


 else if  
 ( 
 key==37 
 ) 
 { 
 myObj.x - = 50 ; 
 } 
 } 

To find the keyCode for a key:Type a key in the input field below.

for more information on keydown click here
Move Object with Keys ......... .... "TryoutPanel2"
<script> var canvas; var context; ///////////////////// KEYS FUNCTION //////////////////////////////////// function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==38){ // up arrow event.preventDefault(); // otherwise window scrolls spoungy.y-=50; draw(); } else if(key==40){ // down arrow //....put some code here } else if(key==39){ // right arrow spoungy.x+=50; draw(); } else if(key==37){ // left arrow // ...put some code here } } /////////////////////// READY OBJECT //////////////////////////////////// function ReadyObj(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.draw= function(){ // ReadyObj draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); // drawImage(img,x,y,width,height) } } ///////////////////// CREATE INSTANCES //////////////////////// var spoungeImg=new Image(); //create new image spoungeImg.src="/pics/spoungbob_smiley_face.png" var spoungy=new ReadyObj(spoungeImg,50,40, 100,100); //make a ReadyObj instance //ReadyObj(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 spoungy.draw(); // draw these instances of ReadyObject } ///////////////////// DRAW /////////////////////////////////// draw(); </script> <canvas id="canvas" width="500" height="300" onkeydown="keysFunction();" tabindex="0"></canvas> <p> Only the <b>up-arrow</b> and <b>right</b>-arrow work.(click canvas first) <br>Can you make the other arrows work? (in the keysFunction) </p>



example3:



Maze Maker

Now lets make a Maze Game.
First draw a Maze with the Maze Maker below and save the maze output with the save button.

Then insert the maze output in the TryoutPanel below in the indicated place,
Cut and Paste the keysFunction that you made in TryoutPanel2 also in the Game and tweak it a little.
Now Spoungy can find his way through your maze.



Make a Maze Game
Make a Maze Game ......... .... "TryoutPanel3"
<script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); ///////////////////// KEYS FUNCTION //////////////////////////////////// //..........replace the keysFunction with your own make changes needed function keysFunction(){ //defines what the keys will do var key=event.keyCode; if(key==38){ // up arrow event.preventDefault(); // otherwise window scrolls spoungy.y-=10; draw(); } else if(key==40){ // down arrow event.preventDefault(); // otherwise window scrolls spoungy.y+=40; draw(); } else if(key==39){ // right arrow ///... put code } else if(key==37){ // left arrow //..... put code } } /////////////////////// READY OBJECT //////////////////////////////////// function ReadyObj(img,x,y,width,height){ // constructor ReadyObj this.img=img; this.x=x; this.y=y; this.width=width; this.height=height; this.draw= function(){ // ReadyObj draw function context.drawImage(this.img,this.x,this.y,this.width,this.height); // drawImage(img,x,y,width,height) } } ///////////////////// CREATE INSTANCES //////////////////////// var spoungeImg=new Image(); //create new image spoungeImg.src="/pics/spoungbob_smiley_face.png" //........... CHANGE the starting place for spoungy var originalX=20; var originalY=20 var spoungy=new ReadyObj(spoungeImg,originalX,originalY, tileSize,tileSize); //make a ReadyObj instance //ReadyObj(img,x,y,width,height) //.......... CHANGE tileSize, canvas.width, canvas.height, mazeColor to your own values var tileSize=20; var mazeColor='red'; canvas.width= 500; canvas.height=300; var gridWidth= Math.floor((canvas.width/tileSize)); var gridHeight=Math.floor((canvas.height/tileSize)); //..........INSERT your MAZE OUTPUT here: replace the [] var maze = [] ; /////////////////////// 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 if(maze.length>0){ // check if the maze is inserted for (var x=0;x<gridWidth;x++){ for(var y=0;y<gridHeight;y++){ // draw the Maze context.fillStyle=maze[x][y]; context.fillRect(x* tileSize ,y * tileSize ,tileSize, tileSize); } } //************This code checks if Spoungy hits a wall var x=Math.floor(spoungy.x/tileSize); // calculate spoungy's x,y-cell position in the Maze var y=Math.floor(spoungy.y/tileSize); if(maze[x][y]== mazeColor ){ // if color == mazeColor, Spoungy sits on wall spoungy.draw(); context.font='50px Georgia'; context.fillStyle='black'; context.fillText('OOOPS !!',250,50); // warning setTimeout(function(){ // setTimeout waits 2000 msec spoungy.x=originalX; spoungy.y=originalY; // before resetting Spoungy to original position draw();}, 2000); } ///..... add an if- statement for when Spoungy hits another color } spoungy.draw(); // draw Spoungy } ///////////////////// START /////////////////////////////////// setTimeout(draw,200); </script> <ul><li>Insert your own <b>maze</b> in the indicated place(78).</li> <li>Set Spoungy in the right start position with: <b>originalX and originalY </b>(60,61)</li> <li>Change <b>tileSize, mazeColor, canvas.width, canvas.height</b> to match your values(66).</li> <li>Replace the <b>keysFunction</b> if you want(7)</li></ul> <canvas id="canvas" width="500" height="300" onkeydown="keysFunction();" tabindex="0"></canvas> <p><b>Experts:</b>In the draw function you can add different options, such as: what happens when you step on a green block?(112)<p>

The Maze game in the example is a little more sophisticated because it can handle different sizes for Spoungy and tileSize. Try that one out as well.

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