Nessa última lição da nossa série de tutoriais vamos aprender como fazemos para o garoto poder escolher seu avatar, como vemos em ALPHACity.
Outra coisa é a maneira como fazer com que, se o garoto sai de ALPHACity num determinado "lote", quando voltar - usando sempre um único endereço para entrar na city (no nosso caso www.dmu.com/olpc) - será dirigido para o "lote" (página) onde estava quando saiu.
Para entender melhor olhe a figura:
A página de "entrada" é uma index.html. Se o cookie avatcust (que tem o nome do arquivo do avatar) é nulo (primeira entrada), abre-se uma página avatarcust.html. Isso acontece também se o avatar é clicado em qualquer página.
Outro cookie é "pointt" que tem o endereço onde se está. Para ter um auto-save, toda página de "lote" tem um código assim:
pointt = new Gl_cookie("ptt");
pointt.setvalue("address-of-this-lot.html");
Vamos ver primeiro o código da página index.html:
<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" src="gamelib_mouse.js"></script>
<script language="Javascript" src="gamelib_interface.js"></script>
<script language="Javascript">
function init(){
Sp_linuxcompatible=true;
avatcust = new Gl_cookie("avatx");
if(avatcust.value==null ){
window.location="avatarcust.html" ;
}
else{
pointt = new Gl_cookie("ptt");
if(pointt.value!=null && pointt.value!="index.html")window.location=pointt.value;
if(pointt.value==null ){
pointt.setvalue("tut11.html");//the first Lot of your City
window.location="index.html" ;
}
}
}
</script>
</head>
<title>TUTCITY</title>
<center>
<body bgcolor="black" onload="init()" >
</center>
</html>
E vamos ver a página avatarcust.html
<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" src="gamelib_mouse.js"></script>
<script language="Javascript" src="gamelib_interface.js"></script>
<script language="Javascript">
Gl_preloader("avat1.gif");
Gl_preloader("avat2.gif");
Gl_preloader("astronaut.gif");
function init(){
Sp_linuxcompatible=true;
mymouse=Ms_initmouse();
avatcust = new Gl_cookie("avatx");
av1=new Sp_Sprite();
av1.setImage("avat1.gif",32,32,4,2);
av1.setXlimits(0,614);
av1.setYlimits(0,480);
av1.moveTo( 20,10);
av1.setFrame(3);
av1.setZ(20);
av1.onclickdown='avatcust.setvalue("avat1.gif")';
av1.onclickup='window.location="index.html"';
av1.switchOn();
av2=new Sp_Sprite();
av2.setImage("avat2.gif",32,32,4,2);
av2.setXlimits(0,614);
av2.setYlimits(0,480);
av2.moveTo( 50,10);
av2.setFrame(3);
av2.setZ(20);
av2.onclickdown='avatcust.setvalue("avat2.gif")';
av2.onclickup='window.location="index.html"';
av2.switchOn();
ava=new Sp_Sprite();
ava.setImage("astronaut.gif",32,32,4,2);
ava.setXlimits(0,614);
ava.setYlimits(0,480);
ava.moveTo( 80,10);
ava.setFrame(3);
ava.setZ(20);
ava.onclickdown='avatcust.setvalue("astronaut.gif")';
ava.onclickup='window.location="index.html"';
ava.switchOn();
}
</script>
</head>
<title>TUTCity
<body bgcolor="yellow" onload="init()" >
<p> <br> <br>
<hr>
<p> <h1>CHOOSING AN AVATAR</h1>
<p><font color="red">Welcome! Click in the avatar you like more.
<p>In the future, if you like to replace him,
<p>click in the avatar at any place of the city.
<p>Soon many new avatares</font></center>
</body>
</html>
Para ser possível mudar o avatar a partir de qualquer página temos nessas páginas:
...
avatcust = new Gl_cookie("avatx");
if(avatcust.value==null ){
window.location="avatarcust.html" ;
}
...
av=new Sp_Sprite();
av.setImage(avatcust.value,32,32,4,2);
av.setXlimits(5,610);
...
av.onclickup='window.location="avatarcust.html"';
...
Repare que não estamos carregando um dado avatar mas aquele que está no cookie.
Mas se você quer carregar um avatar default num lote ( caso do astronauta no planeta Pink) teremos:
...
av=new Sp_Sprite();
av.setImage("astronaut.gif",32,32,4,2);
...
Para ficar mais claro, apresentamos aqui a primeira página do exercício:
<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" src="gamelib_mouse.js"></script>
<script language="Javascript">
function init(){
Sp_linuxcompatible=true;
mymouse=Ms_initmouse();
Gl_preloader("floorW05N07.gif");
Gl_preloader("transit.gif");
Gl_preloader("avat1.gif");
entryt = new Gl_cookie("entt");
avatcust = new Gl_cookie("avatx");
if(avatcust.value==null ){
window.location="avatarcust.html" ;
}
pointt = new Gl_cookie("ptt");
pointt.setvalue("tut11.html");
upkey=Kb_trapkey("UP");
downkey=Kb_trapkey("DOWN");
rightkey=Kb_trapkey("RIGHT");
leftkey=Kb_trapkey("LEFT");
av=new Sp_Sprite();
av.setImage(avatcust.value,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);
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();
av.onclickup='window.location="avatarcust.html"';
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_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="tut11e.html";
}
if(av.hasHit(transitW)){
entryt.setvalue("E");
window.location="tut11w.html";
}
}//timestep
</script>
</head>
<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
Na demo (exercício) você, indo para esse lote inicial, tem que escolher um avatar. Você pode fechar seu browser em qualquer outro lote para onde for. Voltando a esse endereço inicial, será redirecionado. E com o mesmo avatar. Você pode mudar de avatar em qualquer lote. Enfim, mais ou menos o que temos em ALPHACity. Como você vê, não escondemos nada...
Grato por ter estado conosco, lendo esses tutoriais.
E veja o exercício final no link. Clique na figura para ativar e "ande" com as teclas de setas.
LIÇÃO ANTERIOR