É aqui que a diversão começa! Vamos ver agora como se cria games para o micro OLPC sem Flash, sem plugin, usando JavaScript. Apresentaremos como que um "making off" do projeto ALPHACity, mas você pode criar qualquer tipo de game usando os recursos que vamos apresentar.
Nessa primeira lição vamos colocar na tela dois objetos gráficos: um fundo, que é um lote de ALPHACity e uma placa onde estará escrito o indefectível "Hello World!".
MAS ATENÇÃO, TEMOS UM PROBLEMA!!! A resolução da tela do XO é 1200 x 900 pixels e a área útil no browser é 1180 x 780. No browser do emulador temos uma área útil de 614 x 390 pixels.
O que sugerimos é que, se você não tem acesso a um XO de verdade, faça sua aplicação com todos os valores pela metade. Teste no emulador e depois teste num XO emprestado.
Em nossos exercícios seguimos aproximadamente essa regra, mas nos casos de limites usamos 614 x 390 pixels. O importante é que você entenda os conceitos.
Os objetos gráficos são chamados de sprites. As imagens para os sprites serão arquivos .GIF transparentes que podem ser feitos com Photoshop ou o gratuito: GIMP (na figura), por exemplo.
Vamos apresentar aqui a programação do script cujo resultado você pode ver agora, aqui, pois é uma página web como qualquer outra, não requerendo, como já dissemos, nenhum plugin como o Flash, por exemplo, exige.
Vamos usar nesse script métodos e propriedades de duas Classes: Sprites e Core. Detalhes sobre cada uma delas, você vê nas duas próximas aulas.
<html>
<head>
<script language="Javascript" src="gamelib_core.js">
<script language="Javascript" src="gamelib_sprites.js">
<script language="Javascript">
function init(){
Sp_linuxcompatible=true;
floor=new Sp_Sprite();
floor.setImage("floorW05N07.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();
pl=new Sp_Sprite();
pl.setImage("plaquehello.gif",179,101,1,1);
pl.setXlimits( 0,614);
pl.setYlimits( 0,390);
pl.setFrame(0);
pl.moveTo(355 , 45 );
pl.setZ(12);
pl.switchOn()
}
</script>
</head>
<title>TUTCITY </title>
<body bgcolor="black" onload="init()" >
</html>
LIÇÃO ANTERIOR PRÓXIMA LIÇÃO