Existe uma Classe Mouse, da qual não usamos geralmente nenhum elemento mas, da qual precisamos criar um objeto para que as propriedades:
onmouseover onmouseout onclickdown onclickupda Classe Sprites, funcionem.
Essa classe Mouse usa uma biblioteca que é parte da Gamelib, criada por Scott Porter e atualizada por Brent Silby. Gamelib é disponível nos termos da GNU Library General Public Licence.
Para usar a biblioteca adicionar uma linha na sessão <HEAD> da página com:
<script language="Javascript" src="gamelib_mouse.js"></script>
Mas você precisa dar um clique no link abaixo e salvar esse arquivo (com a biblioteca) na mesma pasta onde ficar a página (ou referenciar):
Para criar um objeto da Classe use, por exemplo:
myMouse=Ms_initmouse();
Em ALPHACity usamos um mouseclick para mudar o avatar. Temos também uma atividade de Inglês (vocabulário) que usa o "casamento" de cartas.
Vamos ver nessa lição um código que usa mouseover e mouseout para "virar" uma carta. E mouseclick para que ela desapareça. Não é um jogo, apenas um exercício.
Veja a página:
<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">
Gl_preloader("avat1.gif");
Gl_preloader("floorW02G0.gif");
Gl_preloader("hello.gif");
function init(){
Sp_linuxcompatible=true;
mymouse=Ms_initmouse(); //You need this to use mouse-over and click
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(100,610);
av.setYlimits(80,280);
if(entryt.value=="E"){
av.moveTo( 550,150);
av.setFrame(0);
entryt.setvalue("G");
}
else if(entryt.value=="W"){
av.moveTo(125,150);
av.setFrame(1);
entryt.setvalue("G");
}
else{ //can be null
av.moveTo( 255,235);
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();
floor=new Sp_Sprite();
floor.setImage("floorW02G0.gif",614,390,1,1);
floor.setXlimits( 0,614);
floor.setYlimits( 0,390);
floor.setFrame(0);
floor.moveTo(0 , 0 );
floor.setZ(5);
floor.switchOn();
hello=new Sp_Sprite();
hello.setImage("hello.gif",80,105,2,1);
hello.setXlimits( 0,614);
hello.setYlimits( 0,390);
hello.setFrame(0);
hello.makeHard();
hello.moveTo(160 , 50 );
hello.setZ(12);
hello.onmouseover="hello.setFrame(1)";
hello.onmouseout="hello.setFrame(0)";
hello.onclickup="hello.switchOff();";
hello.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);
}
}//timestep
</script>
</head>
<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
Teste nossa demo no link. Clique na figura para ativar e "ande" com as teclas de setas.
LIÇÃO ANTERIOR PRÓXIMA LIÇÃO