Brincando com HTML - Jogo dos carrinhos
Publicado por Sergio Teixeira - Linux User # 499126 em 28/07/2008
[ Hits: 12.863 ]
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:
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
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).
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>
<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:
Colaboração do Teixeira para a comunidade Viva o Linux
