Brincando com HTML - Jogo dos carrinhos

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

[ Hits: 11.168 ]

 


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

Add-ons para o Basic Linux

Freespire: Uma distro bem documentada

Mais uma distro minimalista: BLUEFLOPS

Blasfêmia!? Firefox no Basic Linux, sim!

BASIC LINUX: Suporte a outras linguagens

Leitura recomendada

Servidor web simples sem instalar nada

Tema Escuro no Chrome Developer Tools (Dark Mode)

Ache vídeos do youtube facilmente

Screem web site development

URL da IDE Intel XDK no GNU/Linux

  

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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts