OLPCities/Mouse over and click: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
 
No edit summary
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
There are two very usual resources that are used when we are working using Sprites: the "mouse-over" and the "mouse-click".
There are two very usual resources that are used when we are working using Sprites: the "mouse-over" and the "mouse-click".


The Class [[Sprites]] has four properties that we use:
The Class [[OLPCities/Sprites|Sprites]] has four properties that we use:

<pre>

onmouseover [=String] The string is the function name to be called when the mouse
pointer has moved over the sprite. This CAN include arguments so
mySprite.onmouseover="dosomething(x,y,z)" would pass the variables x,y,z
to the function dosomething

onmouseout [=String} The string is the function name to be called

onclickdown [=String] The string is the function name to be called

onclickup [=String] The string is the function name to be called
</pre>

<b>IMPORTANT: To use any of the last four properties you need to create an object of the Class [[OLPCities/Mouse|Mouse]] </b>

[[Image:Hello.gif |left]]
<br clear=all>

Our exercice will be very easy. We will use "mouse=over" and "mouse-out" to change the face of a card.

Educational games using pairs of cards are very usual.

To have a so big card over the floor of a Lot is not very real but nothing at the OLPCities is very real :-)

<p>Look the complete code of the exercice:
<pre>
<html>
<head>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_core.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_sprites.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_keyboard.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_mouse.js"></script>
<script language="Javascript">
Gl_preloader("avat1.gif");
Gl_preloader("floorW02G0.gif");
Gl_preloader("hello.gif");

function init(){

Sp_linuxcompatible=true;
mymouse=Ms_initmouse(); //You need this to use mouse-over and click

entryt = new Gl_cookie("entt");
upkey=Kb_trapkey("UP");
downkey=Kb_trapkey("DOWN");
rightkey=Kb_trapkey("RIGHT");
leftkey=Kb_trapkey("LEFT");

av=new Sp_Sprite();
av.setImage(("avat1.gif" ,32,32,4,2);
av.setXlimits(100,610);
av.setYlimits(80,280);

if(entryt.value=="E"){
av.moveTo( 550,150);
av.setFrame(0);
entryt.setvalue("G");
}
else if(entryt.value=="W"){
av.moveTo(125,150);
av.setFrame(1);
entryt.setvalue("G");
}
else{ //can be null
av.moveTo( 255,235);
av.setFrame(3);
entryt.setvalue("G");
}

av.setFrameByDirection(90,90,1,180,180,3,270,270,0,0,0,2);
av.setAnimation(0);
av.setZ(10);
av.collides=true;
av.useHitEvents(true);
av.setAnimationSpeed(3);
av.switchOn();

floor=new Sp_Sprite();
floor.setImage("floorW02G0.gif",614,390,1,1);
floor.setXlimits( 0,614);
floor.setYlimits( 0,390);
floor.setFrame(0);
floor.moveTo(0 , 0 );
floor.setZ(5);
floor.switchOn();

hello=new Sp_Sprite();
hello.setImage("hello.gif",80,105,2,1);
hello.setXlimits( 0,614);
hello.setYlimits( 0,390);
hello.setFrame(0);
hello.makeHard();
hello.moveTo(160 , 50 );
hello.setZ(12);
hello.onmouseover="hello.setFrame(1)";
hello.onmouseout="hello.setFrame(0)";
hello.onclickup="hello.switchOff();";
hello.switchOn();

Gl_hook("timestep()");
Gl_start();
}

function timestep(){
av.setSpeed(0);
av.setAnimationRepeat(0);
if(rightkey.pressed){
av.setDir(1,0);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(leftkey.pressed){
av.setDir(-1,0);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(downkey.pressed){
av.setDir(0,1);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}
else if(upkey.pressed){
av.setDir(0,-1);
av.setAnimationRepeat(-1);
av.setSpeed(2);
}

}//timestep
</script>
</head>

<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
</pre>

Look and move the mouse over the card and finally click it - it will disapear. It's not a game, only an exercice.:
[http://www.dmu.com/olpctut/tut8.html http://www.dmu.com/olpctut/tut8.html].

<b>OBS: An sprite can also be draggable. This is very useful for the creation of educational games Details at the reference of the Class [[OLPCities/Sprites|Sprites]]</b>.
<center>PREVIOUS LESSON: [[OLPCities/Inside a house|Inside a house ]]...........TOC :[[OLPCities/Tutorials|Tutorials]]..........NEXT LESSON : [[OLPCities/Dynamic write|Dynamic write]]</center>

[[Category:OLPCities Tutorials]]

Latest revision as of 03:45, 14 February 2007

There are two very usual resources that are used when we are working using Sprites: the "mouse-over" and the "mouse-click".

The Class Sprites has four properties that we use: 


onmouseover [=String]         The string is the function name to be called when the mouse
                              pointer has moved over the sprite. This CAN include arguments so
                              mySprite.onmouseover="dosomething(x,y,z)" would pass the variables x,y,z 
                              to the function dosomething  

onmouseout [=String}         The string is the function name to be called   

onclickdown [=String]        The string is the function name to be called  

onclickup [=String]          The string is the function name to be called

IMPORTANT: To use any of the last four properties you need to create an object of the Class Mouse

Hello.gif


Our exercice will be very easy. We will use "mouse=over" and "mouse-out" to change the face of a card.

Educational games using pairs of cards are very usual.

To have a so big card over the floor of a Lot is not very real but nothing at the OLPCities is very real :-)

Look the complete code of the exercice: 

<html>
<head>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_core.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_sprites.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_keyboard.js"></script>
<script language="Javascript" src="http://www.dmu.com/olpc/gamelib_mouse.js"></script>
<script language="Javascript">
  
Gl_preloader("avat1.gif");
Gl_preloader("floorW02G0.gif");
Gl_preloader("hello.gif"); 

function init(){

 Sp_linuxcompatible=true;
 mymouse=Ms_initmouse(); //You need this to use mouse-over and click

 entryt = new Gl_cookie("entt");
  
 upkey=Kb_trapkey("UP");				 
 downkey=Kb_trapkey("DOWN");			  
 rightkey=Kb_trapkey("RIGHT");	
 leftkey=Kb_trapkey("LEFT");

 av=new Sp_Sprite();	 
 av.setImage(("avat1.gif" ,32,32,4,2);  
 av.setXlimits(100,610); 
 av.setYlimits(80,280);

 if(entryt.value=="E"){	 
  av.moveTo( 550,150);	 
  av.setFrame(0);	
  entryt.setvalue("G");
 }
  else if(entryt.value=="W"){	 
   av.moveTo(125,150);	 
   av.setFrame(1);
   entryt.setvalue("G");
 }
 else{ //can be null
  av.moveTo( 255,235);	 
  av.setFrame(3);
  entryt.setvalue("G");	
 }

  av.setFrameByDirection(90,90,1,180,180,3,270,270,0,0,0,2);
  av.setAnimation(0);
  av.setZ(10);
  av.collides=true;
  av.useHitEvents(true);
  av.setAnimationSpeed(3);
  av.switchOn(); 

  floor=new Sp_Sprite();			 
  floor.setImage("floorW02G0.gif",614,390,1,1); 
  floor.setXlimits( 0,614);	 
  floor.setYlimits( 0,390);
  floor.setFrame(0);	 
  floor.moveTo(0 , 0 );				 
  floor.setZ(5);  
  floor.switchOn();	

  hello=new Sp_Sprite(); 
  hello.setImage("hello.gif",80,105,2,1); 
  hello.setXlimits( 0,614);	 
  hello.setYlimits( 0,390);
  hello.setFrame(0); 
  hello.makeHard();
  hello.moveTo(160 , 50 );		 
  hello.setZ(12);  
  hello.onmouseover="hello.setFrame(1)";
  hello.onmouseout="hello.setFrame(0)";
  hello.onclickup="hello.switchOff();";
  hello.switchOn();

  Gl_hook("timestep()");	 
  Gl_start();	 
}

function timestep(){
    av.setSpeed(0); 
    av.setAnimationRepeat(0);
   if(rightkey.pressed){
     av.setDir(1,0);
     av.setAnimationRepeat(-1);
     av.setSpeed(2);
   }
   else if(leftkey.pressed){
    av.setDir(-1,0);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
   }
   else if(downkey.pressed){
    av.setDir(0,1);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
   }
   else if(upkey.pressed){
    av.setDir(0,-1);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
   }

 }//timestep
 
 
</script>
</head>

<title>TUTCITY  </title>
<body  bgcolor="black"  onload="init()" >
</html>

Look and move the mouse over the card and finally click it - it will disapear. It's not a game, only an exercice.: http://www.dmu.com/olpctut/tut8.html.

OBS: An sprite can also be draggable. This is very useful for the creation of educational games Details at the reference of the Class Sprites.


PREVIOUS LESSON: Inside a house ...........TOC :Tutorials..........NEXT LESSON : Dynamic write
Retrieved from "http://wiki.laptop.org/mediawiki/index.php?title=OLPCities/Mouse_over_and_click&oldid=24553"