OLPCities/Shooting in the bad guys: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
No edit summary
Line 41: Line 41:
[[Image:Echoo1.gif | left ]]
[[Image:Echoo1.gif | left ]]


And we need to change the frames of the sprite according the angle the monster is walking. We use <b>setFrameByDirection</B> to do it. Look the lines of code:
And we need to change the frames of the sprite according the angle the monster is walking. We use <b>setFrameByDirection</B> to do it. (Read the references of these methods at [[Sprites]] to understand better.) Look the lines of code:
<pre>
<pre>
...
...

Revision as of 13:27, 29 September 2006

At the previous lesson you have tried the exercice of this lesson. If not, try it now:http://www.dmu.com/olpctut/tut5e.html.




Tut7-1.jpg


Look the figure. The astronaut has a gun. And glued to the gun there are a little red bullet. They are in the "Pink planet" and the astronaut can shoot against one of the "echoos", the mosters that live in the planet.

How did we code this?

The sprite "bullet" needs to be "glued" to the sprite "astronaut" aproximately near the gun and having an inferior "Z" to be hided. There are the method follow to do it. At the exercice we have:



 
bl.follow(av,15,   16);

The two number are de coordinates of the bullet "inside" the avatar. At the moment of the shoot (pressing the key "P") we liberate the bullet, difine its direction (the same of the avatar at this moment) and we increase the velocity (2 for the avatar and 5 for the bullet). Look part of the code. This action needs to be "discreet" - only one time - and we use a flag ("shoot") to do this:

...
if(skey.pressed){
 if(shoot==0){
   bl.stopFollowing();
   bl.setDir(av.xdir,av.ydir);
   bl.setSpeed(5);
   shoot=1; 
  }
...

The other interesting thing we are doing is to make the monster to go in the direction of the astronaut. We use the method target to do this.

Echoo1.gif

And we need to change the frames of the sprite according the angle the monster is walking. We use setFrameByDirection to do it. (Read the references of these methods at Sprites to understand better.) Look the lines of code:

 
...
 e1.setFrameByDirection(1,45,2,46,134,1,135,224,3,225,314,0,315,360,2);	 
...
 e1.target(av,0,0); 
...
Tut7-2.jpg


Pay attention that we need to begin the definition of the directions by the angle 1 until 360.

Another detail: to do a SwitchOff of an sprite we need previously to do a SwithOn .

When the bullet is at the limits of the Lot we do an automatic "recharge". The "recharge" really is the bullet going back to the gun.

Look these and some other "tricks" at the complete code of the Lot:

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

function init(){

  Sp_linuxcompatible=true;

  Gl_preloader("floorPINK1.gif"); 
  Gl_preloader("echoo1.gif"); 
  Gl_preloader("astronaut.gif");
  Gl_preloader("bullet.gif");
  Gl_preloader("goldenbean.gif");
  Gl_preloader("timespace.gif");
  Gl_preloader("timespaceS0.gif");
  Gl_preloader("timespaceS.gif"); 


   upkey=Kb_trapkey("UP");				 
   downkey=Kb_trapkey("DOWN");			  
   rightkey=Kb_trapkey("RIGHT");	
   leftkey=Kb_trapkey("LEFT");
   skey=Kb_trapkey("S");
   rkey=Kb_trapkey("R");
   onetime=0;
   shoot=0;
  
   av=new Sp_Sprite();	 
   av.setImage("astronaut.gif",32,32,4,2);  
   av.setXlimits(5,610);
   av.setYlimits(5,385);	 
   av.moveTo( 300,170);	 
   av.setFrame(3);
   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.setSpeed(2);
   av.switchOn();

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

  bl=new Sp_Sprite();			 
  bl.setImage("bullet.gif",5,5,1,1); 
  bl.setXlimits( 0,614);	 
  bl.setYlimits( 0,390);
  bl.setFrame(0);	 
  bl.moveTo(av.x , av.y  );
  bl.setZ(8); 
  bl.collides=true;
  bl.useHitEvents(true);  
  bl.switchOn();
  bl.switchOff();

  e1=new Sp_Sprite();			 
  e1.setImage("echoo1.gif",32,32,4,1); 
  e1.setXlimits( 0,614);	 
  e1.setYlimits( 0,390);
  e1.setFrame(3);
  e1.setFrameByDirection(1,45,2,46,134,1,135,224,3,225,314,0,315,360,2);	 
  e1.moveTo( 100 ,  10 );
  e1.setDir( 1,0);
  e1.setSpeed(1);
  e1.target(av,0,0); 				 
  e1.setZ(8); 
  e1.collides=true;
  e1.useHitEvents(true);   
  e1.switchOn()

  gb=new Sp_Sprite();	 
  gb.setImage("goldenbean.gif",20,20,1,2);  
  gb.setXlimits(0,614);	 
  gb.setYlimits(5,280);	 
  gb.moveTo(50,80);	 
  gb.setFrame(0);
  gb.setAnimation(0);		 
  gb.setAnimationLoop(0,2);	 
  gb.setAnimationSpeed(8); 					   
  gb.setZ(6);
  gb.setAnimationRepeat(-1);	 
  gb.makeHard();				 
  gb.collides=true;
  gb.switchOn();	

  ts=new Sp_Sprite();	 
  ts.setImage("timespace.gif",114,110,1,4);  
  ts.setXlimits(0,614);	 
  ts.setYlimits(5,280);	 
  ts.moveTo(305, 0);	 
  ts.setFrame(0);		 
  ts.setAnimationLoop(0,3);	 
  ts.setAnimationSpeed(4); 					 
  ts.setAnimation(0);	 
  ts.setZ(6);
  ts.setAnimationRepeat(-1);	 
  ts.collides=true;
  ts.switchOn();
  ts.switchOff();
 
  tsS=new Sp_Sprite();			 
  tsS.setImage("timespaceS.gif",62,14,1,1); 
  tsS.setXlimits( 0,614);	 
  tsS.setYlimits( 0,390);
  tsS.setFrame(0);	 
  tsS.moveTo( 345 ,  70 );	
  tsS.setZ(0);  
  tsS.makeHard();
  tsS.switchOn();
  tsS.switchOff();

  tsS0=new Sp_Sprite();			 
  tsS0.setImage("timespaceS0.gif",95,79,1,1); 
  tsS0.setXlimits( 0,614);	 
  tsS0.setYlimits( 0,390);
  tsS0.setFrame(0);	 
  tsS0.moveTo( 315 ,  0 );
  tsS0.setZ(0);  
  tsS0.makeHard();
  tsS0.switchOn();
  tsS0.switchOff();

  dial1 =new Sp_Sprite();			 
  dial1.setImage("dialtut1.gif",615,160,1,1); 
  dial1.setXlimits( 0,614);	 
  dial1.setYlimits( 0,390);
  dial1.setFrame(0);	 
  dial1.moveTo(0 , 300 );				 
  dial1.setZ(20);  
  dial1.switchOn()
   
  Gl_hook("timestep()"); 
  Gl_start();	
 } 

 function timestep(){
  av.setSpeed(0); 
  av.setAnimationRepeat(0);

  if(rightkey.pressed){
     dial1.switchOff();
     av.setDir(1,0);
     av.setAnimationRepeat(-1);
     av.setSpeed(2);
     if(onetime==0){
      bl.follow(av,15,   16);
      bl.switchOn();
      onetime=1 ;
     }
   }
   else if(leftkey.pressed){
    dial1.switchOff();
    av.setDir(-1,0);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
    if(onetime==0){
     bl.follow(av,15 ,  16);
     bl.switchOn();
     onetime=1;
    }
   }
   else if(downkey.pressed){
    dial1.switchOff();
    av.setDir(0,1);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
    if(onetime==0){
      bl.follow(av,15,  16);
      bl.switchOn();
     onetime=1;
    }
   }
   else if(upkey.pressed){
    dial1.switchOff();
    av.setDir(0,-1);
    av.setAnimationRepeat(-1);
    av.setSpeed(2);
    if(onetime==0){
     bl.follow(av,15,   16);
     bl.switchOn();
     onetime=1;
    }
   }

 if(skey.pressed){
  if(shoot==0){
   bl.stopFollowing();
   bl.setDir(av.xdir,av.ydir);
   bl.setSpeed(5);
   shoot=1; 
  }
 }
  if(rkey.pressed || bl.x <= 5 || bl.x >= 600 || bl.y <= 5 || bl.y >= 380 ){
   if(shoot==1){
    bl.moveTo(av.x+10 , av.y   );
    bl.follow(av,15, 16);	
    bl.switchOn()
    shoot=0;
  }
 }
 
 if(av.hasHit(gb)){
  gb.switchOff(); 
  tsS.switchOn(); 
  tsS0.switchOn();
  ts.switchOn(); 
 } 
    
  if(bl.hasHit(e1)){
    e1.switchOff(); 
    bl.switchOff();
   } 

  if(e1.hasHit(av)){
   e1.switchOff(); 
   av.switchOff();
   bl.switchOff();
   window.location="tut6.html";
  } 

 if(av.hasHit(tsS)){
  window.location="tut5w.html";
 } 
}//timestep

</script>
</head>

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


PREVIOUS LESSON: Using the Time-Space Portal...........TOC :OLPCities Tutorials..........NEXT LESSON : Inside a house