ATIRANDO NOS "CARAS MAUS"

Se você ainda não foi ao planeta "Pink", jogue com nossa demo no link. Clique na figura para ativar e "ande" com as teclas de setas. Entre no Portal.Use a tecla "S" para atirar no monstrinho.

Se você reparar bem na figura do avatar astronauta, vai ver que ele tem uma pistola na mão.

Você não vê mas, grudada na pistola, tem uma bala (outro sprite) que é um ponto vermelho.

O astronauta é o avatar default no planeta "Pink" e ele pode atirar para fazer desaparecer (não existe nenhuma violência, ninguém morre aqui...) um monstrinho.

Como se codifica esse tiro?

A bala tem um "Z" menor que o avatar - donde é escondida por ele. Existe um método follow da Classe Sprite (ver o Reference) que gruda a bala no avatar. Você tem que ver qual é a posição relativa. Nós achamos 15 e 16 pixels, a partir da posição superior esquerda do avatar. Então temos:

bl.follow(av,15,   16);

No momento do tiro (pressionando a tecla "S" de "shoot") liberamos a bala, definimos sua direção como a do avatar naquele momento e aumentamos sua velocidade (de 2, do avatar, para 5). Veja o código dessa parte. A operação só acontece uma vez e para isso usamos o "flag": shoot.

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

Outra coisa interessante que mostramos nesse exercício é como fazer o monstrinho ir na direção do avatar. Usamos o método: target.

E nós também mudamos os "frames" do monstrinho conforme o ângulo em que ele está andando. Usamos setFrameByDirection nas linhas de código:

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

Precisamos começar a definição das direções pelo ângulo 1, indo até 360.

Um outro detalhe é que, para dar um SwitchOff temos que dar primeiro um: SwithOn.

Quando a bala alcança os limites do "lote" ela é "recarregada" na pistola. Pode-se recarregar também com a tecla "R".

Existem outros truques que você aprende analisando o código:

<html>
<head>
<script language="Javascript" src="gamelib_core.js"></script> 
<script language="Javascript"  src="gamelib_sprites.js"></script>
<script language="Javascript" src="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>




              LIÇÃO ANTERIOR       PRÓXIMA LIÇÃO             
ÍNDICE HOMEPAGE