Chamamos de "transit" um sprite que é apenas um paralelograma verde e que serve para levar o avatar para o próximo "lote".
Ele funciona com a colisão do avatar nele. Nessa hora, se modifica o valor do cookie que redefine a "entry" do avatar num próximo "lote". Conforme a origem, temos valores como: "N" para norte, "E" pare este etc. No outro "lote" teremos qualquer coisa assim:
...
if(entryt.value=="E"){
av.moveTo( 550,165);
av.setFrame(0);
...
Veja que setamos o "frame" do avatar para ZERO, o que significa que ele está "olhando" para Oeste.
Muitas vezes o "transit" só aparece quando o garoto completou uma atividade - podendo então continuar sua jornada pelas ruas de ALPHACity.
No nosso exercício criamos três "lotes". Experimente. Veja o código do lote central (os outros podem ser vistos abrindo o "Código fonte" da página num browser que tenha esse recurso, como o IE):
<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("floorW05N07.gif");
Gl_preloader("transit.gif");
Gl_preloader("avat1.gif");
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(5,610);
av.setYlimits(5,385);
if(entryt.value=="E"){
av.moveTo( 550,165);
av.setFrame(0);
entryt.setvalue("G");
}
else if(entryt.value=="W"){
av.moveTo(30,175);
av.setFrame(1);
entryt.setvalue("G");
}
else{
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.switchOn();
floor=new Sp_Sprite();
floor.setImage("floorW05N07.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();
transitW=new Sp_Sprite();
transitW.setImage("transit.gif",20,20,1,1);
transitW.setXlimits( 0,614);
transitW.setYlimits( 0,390);
transitW.setFrame(0);
transitW.moveTo(5 , 180 );
transitW.setZ(12);
transitW.makeHard();
transitW.switchOn();
transitE=new Sp_Sprite();
transitE.setImage("transit.gif",20,20,1,1);
transitE.setXlimits( 0,614);
transitE.setYlimits( 0,390);
transitE.setFrame(0);
transitE.moveTo(590 , 180 );
transitE.setZ(12);
transitE.makeHard();
transitE.switchOn();
Gl_hook("timestep()");
Gl_scrollbars("no"); // turn off scroll-bars (with IE)
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);
}
if(av.hasHit(transitE)){
entryt.setvalue("W");
window.location="tut5e.html";
}
if(av.hasHit(transitW)){
entryt.setvalue("E");
window.location="tut5w.html";
}
}//timestep
</script>
</head>
<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
Se você está programando também para o Internet Explorer tem que usar a linha (veja acima):
Gl_scrollbars("no"); // turn off scroll-bars (with IE)
para eliminar as barras de rolagem.
Veja esse exercício nesse link. Clique na figura para ativar e "ande" com as teclas de setas.
LIÇÃO ANTERIOR PRÓXIMA LIÇÃO