OLPCities/Shooting in the bad guys

From OLPC
Jump to navigation Jump to search

At the previous lesson you have tried the exercise 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 "echoes", the monsters that live in the planet.

How did we code this?

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

 
bl.follow(av,15,   16);

The two number are the coordinates of the bullet "inside" the avatar. At the moment of the shoot (pressing the key "P") we liberate the bullet, define 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 :Tutorials..........NEXT LESSON : Inside a house