Brincando com HTML - Jogo dos carrinhos

Publicado por Sergio Teixeira - Linux User # 499126 em 28/07/2008

[ Hits: 10.550 ]

 


Brincando com HTML - Jogo dos carrinhos



Estou mandando este programa semi-mastigado para mostrar que também em HTML puro se podem fazer coisas inusitadas.

Não tem utilidade alguma, é apenas uma curiosidade mas, quem sabe, alguém possa sair gritando "Eureka!!!" pela vizinhança afora?

Descrição: Existem vários carrinhos coloridos que se deslocam da direita para a esquerda em movimento contínuo. O objetivo é descobrir dentre todos os carrinhos que desfilam pela tela, quais os dois que são "premiados".

Quando o jogador clica sobre um carrinho e acerta, é conduzido a um local da página que dá essa informação, e também encontra um link para voltar.

Para facilitar a vida da galera, estou mandando os bitmaps de seis carrinhos (car1.bmp, car2.bmp etc), um espaçador (spacer.bpm) e dois adornos para a pista, com árvores estilizadas (alley1.bmp e alley2.bmp).
Pode-se colocar quantos espaçadores quiser entre um carro e outro. No lugar dos espaçadores, pode-se usar um montão de " ", mas isso gasta muito código e torna o programa ilegível.

O programa contém um erro, facilmente percebido: os bitmaps dos carros em questão estão circundados por uma moldura, referente ao link, tornando-os facilmente identificáveis (fica muito na cara).

Agora é com vocês: Sabem tirar essa moldura? É muito fácil.

Procurei colocar o código não da forma mais eficiente, mas da forma mais visível. Todo programa pode ser melhorado - e muito. Afinal ninguém vai morrer de tanta emoção com esse tipo de joguinho, do jeito que está.

Fica aqui o convite para todos que desejarem aprimorá-lo.

As imagens estão em formato BMP, mas podem ser convertidas para JPG ou PNG ao gosto do freguês.

Segue abaixo o código em HTML, o mais rudimentar possível:

<html>

<title>
Brincando com HTML - Jogo dos carrinhos
</title>

<body bgcolor="gray">

<font face=arial size=6 color=yellow>

<center>
ACERTE NOS CARRINHOS
<center>

<FONT SIZE=2>
O objetivo deste jogo é procurar acertar nos 2 carrinhos "premiados";<br>
Colaboração do Teixeira para a comunidade Viva o Linux<br><br>

<table width=100% bgcolor=black>

<tr>
<td>
<!-- alley1.bmp é um adorno superior para a pista onde estarão os carros -->
<img src="alley1.bmp">

<!-- spacer.bmp é um espaçador com a largura de 200 pixels -->
<!-- coloque quantos espaçadores desejar entre um carro e outro -->
<!-- coloque os carros na ordem em que desejar -->

<marquee>
<img src="car1.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car2.bmp">
<img src="spacer.bmp">
<img src="car3.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car4.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car5.bmp">
<img src="spacer.bmp">
<img src="car6.bmp">
<img src="spacer.bmp">
<img src="car2.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car4.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car1.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<a href="#ganhou"><img src="car5.bmp"></a>
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car3.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<a href="#ganhou"><img src="car4.bmp"></a>
<img src="spacer.bmp">
<img src="car6.bmp">
<img src="spacer.bmp">
<img src="spacer.bmp">
<img src="car2.bmp">
<img src="spacer.bmp">
<img src="car5.bmp">

</marquee>

<!-- alley2.bmp é um adorno para a parte inferior da pista -->
<img src="alley2.bmp">

</td>
</table>

<!-- truque para fazer espaçamento vertical; -->
<!-- pode substituir por um monte de "br" que dá na mesma -->

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

<a name="ganhou"></a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<font face=arial black size=7 color=lime>
<center>
VOCÊ ACERTOU !!!
<p> </p>
<p> </p>

<!-- para voltar ao início da página -->
<a href="#">
<font size=2>
Jogar novamente
</a>
</center>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

</body>

<!-- That's all, folks -->
</html>

Demo do jogo:

ACERTE NOS CARRINHOS
O objetivo deste jogo é procurar acertar nos 2 carrinhos "premiados";
Colaboração do Teixeira para a comunidade Viva o Linux

 

 

 

 

 

 

 

 

 

 

 

 

VOCÊ ACERTOU !!!

 

 

Jogar novamente

Outras dicas deste autor

BasicLinux: Xwindows não funciona dentro do DOS loop

Atualizando as bibliotecas fo Basic Linux

Mais uma mini-distribuição: SliTaz GNU/Linux

Estatísticas do Linux Counter

BASIC LINUX: Suporte a outras linguagens

Leitura recomendada

Como configurar um favicon

Encurtador de URL -> http://acessa.me

Acessando Gmail pelo celular

Alternativas ao Dropbox e outros serviços de armazenamento em nuvem

Brincando com HTML - tag MARQUEE

  

Comentários
[1] Comentário enviado por Teixeira em 29/07/2008 - 12:34h

Observação:
No lugar do espaçador, pode-se usar uma porção de
      
e não de " ", conforme saiu na publicação do artigo.
(HTML considera vários espaços como sendo um só).


[2] Comentário enviado por comfaa em 28/10/2008 - 13:35h

legal



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts