Olá pessoal retorno as postagens com um joguinho que eu pessoalmente acho muito legal. O Jogo da cobra só que dessa vez em JavaScript. Não lembro onde achei, não sei que é o autor, por isso não estou dando os devidos créditos aqui, mas se alguém souber por favor me avisar para dar os devidos créditos ao desenvolvedor ok?
Aqui vai o código fonte.
<!doctype html>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="J. Marcos B.">
<title>JavaScript Snake Game</title>
<script language="javascript">
/*
DECLARANDO AS VARIÁVEIS NECESSÁRIAS PARA O FUNCIONAMENTO DO JOGO SNAKES.
TODAS AS VARIÁVEIS SÃO GLOBAIS PARA FACILITAR A PROGRAMAÇÃO.
*/
var tamanho;
var pedacos;
var score;
var comidaX;
var comidaY;
var pilulaX;
var pilulaY;
var cobraX = new Array();
var cobraY = new Array();
var pedacoX = new Array();
var pedacoY = new Array();
var direcao; // 37 = esquerda, 38 = cima, 39 = direita, 40 = baixo
var proximaDirecao;
var buff;
/*
FUNÇÃO START
ESTA FUNÇÃO INICIA AS VARIÁVEIS DO JOGO SETANDO UM TAMANHO PARA A COBRA,
POSICIONANDO OS PEDAÇOS DA COBRA NO MAPA, DANDO UM MOVIMENTO INICIAL PARA A COBRA,
E AI INICIA O JOGO
*/
function start() {
tamanho = 4;
score = 0;
pedacos = 0;
pilulaX = 0;
pilulaY = 0;
direcao = 39;
proximaDirecao = 39;
cobraX[0] = 4;
cobraY[0] = 1;
colorir(cobraX[0], cobraY[0], "#000000");
cobraX[1] = 3;
cobraY[1] = 1;
colorir(cobraX[1], cobraY[1], "#000000");
cobraX[2] = 2;
cobraY[2] = 1;
colorir(cobraX[2], cobraY[2], "#000000");
cobraX[3] = 1;
cobraY[3] = 1;
colorir(cobraX[3], cobraY[3], "#000000");
document.getElementById("score").innerHTML = "Score: 0";
jogarComida();
buff = 200;
buffar();
}
/*
ESTA FUNÇÃO PINTA TODOS OS QUADROS DO MAPA DO JOGO DE BRANCO
LIMPA O SCORE
INICIA O JOGO
*/
function limparMapa() {
var x;
var y;
for (y = 1; y <= 35; y = y + 1) {
for(x = 1; x <= 35; x = x + 1) {
colorir(x, y, "#ffffff");
}
}
document.getElementById('score').innerHTML = "";
start();
}
/*
JOGA UMA COMIDA NO MAPA.
CASO JOGUE EM CIMA DA COBRA, JOGA DENOVO.
ENTÃO, PINTA O QUADRO CORRESPONDENTE DE BRANCO.
TAMBÉM, JOGA UMA CHANCE DE 30%
SE CAIR, JOGA UMA PILULA QUE QUEBRA A COBRA NO MEIO
*/
function jogarComida() {
comidaX = parseInt((Math.random() * 34) + 1);
comidaY = parseInt((Math.random() * 34) + 1);
/* checa se jogou comida no corpo da cobra */
for (i = 0; i < tamanho; i = i + 1) {
if (comidaX == cobraX[i] && comidaY == cobraY[i]) {
jogarComida();
return;
}
}
/* checa se jogou comida em algum pedaço da cobra */
if (pedacos > 0) {
for (i = 0; i < pedacos; i = i + 1) {
if (comidaX == pedacoX[i] && comidaY == pedacoY[i]) {
jogarComida();
return;
}
}
}
/* checa se jogou comida em cima de uma pilula */
if (comidaX == pilulaX && comidaY == pilulaY) {
jogarComida();
return;
}
/* pinta a comida */
colorir(comidaX, comidaY, "red");
/* testa se joga uma pilula azul */
if (parseInt(Math.random() * 10 + 1) < 3) {
jogarPilula();
}
}
/*
JOGA UMA PILULA QUE QUEBRA A COBRA NO MEIO
*/
function jogarPilula() {
if (pilulaX != 0 && pilulaY != 0)
return;
pilulaX = parseInt((Math.random() * 34) + 1);
pilulaY = parseInt((Math.random() * 34) + 1);
/* checa se jogou pilula no corpo da cobra */
for (i = 0; i < tamanho; i = i + 1) {
if (pilulaX == cobraX[i] && pilulaY == cobraY[i]) {
jogarPilula();
return;
}
}
/* checa se jogou pilula em algum pedaço da cobra */
if (pedacos > 0) {
for (i = 0; i < pedacos; i = i + 1) {
if (pilulaX == pedacoX[i] && pilulaY == pedacoY[i]) {
jogarPilula();
return;
}
}
}
/* confere se jogou pilula em cima da comida */
if (comidaX == pilulaX && comidaY == pilulaY) {
jogarPilula();
return;
}
/* pinta a pilula */
colorir(pilulaX, pilulaY, "blue");
}
/*
ESTA FUNÇÃO RECEBE UMA TECLA E CONFERE SE ELA VAI CONTRA O MOVINENTO ATUAL DA COBRA.
SE NÃO, A TECLA FICA NA FILA DE ESPERA, QUANDO 'BUFFAR' A COBRA MOVERÁ PARA AQUELA
DIREÇÃO APONTADA PELA TECLA QUE ESTÁ NA FILA DE ESPERA.
*/
function direcionar(e) {
var tempDirecao = e.keyCode;
if (tempDirecao >= 37 && tempDirecao <= 40) {
if (direcao == 37 && tempDirecao != 39) {
proximaDirecao = tempDirecao;
}
else {
if (direcao == 39 && tempDirecao != 37) {
proximaDirecao = tempDirecao;
}
else {
if (direcao == 38 && tempDirecao != 40) {
proximaDirecao = tempDirecao;
}
else {
if (direcao == 40 && tempDirecao != 38) {
proximaDirecao = tempDirecao;
}
}
}
}
}
}
/*
PINTA DE UMA COR PASSADA O QUADRO DO JOGO NAS COORDENADAS X e Y.
*/
function colorir(x, y, cor) {
var casa = y.toString();
casa = casa + "-";
casa = casa + x.toString();
document.getElementById(casa).style.backgroundColor = cor;
}
/*
FUNÇÃO PRINCIPAL;
ELA QUE ENTRA EM LOOP CONTROLADO POR TEMPO PARA EXECUTAR AS AÇÕES DA COBRA.
*/
function buffar() {
var i;
/* pinta a última casa da cobra de branco */
colorir(cobraX[tamanho - 1], cobraY[tamanho - 1], "#ffffff");
/*
Move a cobra.
Pega a ultima casa da cobra, e põe na posição da anti-penultima.
A anti penultima na posição da anti-antipenultima.
Assim sucessivamente a segunda casa irá para a posição da primeira casa.
*/
for (i = tamanho - 1; i > 0; i = i - 1) {
cobraX[i] = cobraX[i - 1];
cobraY[i] = cobraY[i - 1];
}
/* movendo a cabeÇa da cobra */
direcao = proximaDirecao;
if (direcao == 37) {
cobraX[0] = cobraX[0] - 1;
}
else {
if (direcao == 40) {
cobraY[0] = cobraY[0] + 1;
}
else {
if (direcao == 39) {
cobraX[0] = cobraX[0] + 1;
}
else {
if (direcao == 38) {
cobraY[0] = cobraY[0] - 1;
}
}
}
}
/* confere se a cabeça da cobra bate em alguma parede. */
if (cobraX[0] <= 0 || cobraX[0] >= 36 || cobraY[0] <= 0 || cobraY[0] >= 36) {
document.getElementById("score").innerHTML = "<font color='red'>Você perdeu! </font> Score: " + score;
document.getElementById("score").innerHTML = document.getElementById("score").innerHTML + " <input type='button' onclick='javascript:limparMapa();' value='Reiniciar' Title='Reiniciar'>";
return;
}
/* checa se a cobra bate nela mesma */
for (i = tamanho - 1; i > 1; i = i - 1) {
if (cobraX[0] == cobraX[i] && cobraY[0] == cobraY[i]) {
document.getElementById("score").innerHTML = "<font color='red'>Você perdeu! </font> Score: " + score;
document.getElementById("score").innerHTML = document.getElementById("score").innerHTML + " <input type='button' onclick='javascript:limparMapa();' value='Reiniciar' Title='Reiniciar'>";
return;
}
}
/* checa se a cobra bate em pedaços dela */
if (pedacos > 0) {
for (i = 0; i < pedacos; i = i + 1) {
if (cobraX[0] == pedacoX[i] && cobraY[0] == pedacoY[i]) {
document.getElementById("score").innerHTML = " <font color='red'>Você perdeu! </font> Score: " + score;
document.getElementById("score").innerHTML = document.getElementById("score").innerHTML + " <input type='button' onclick='javascript:limparMapa();' value='Reiniciar' Title='Reiniciar'>";
return;
}
}
}
/* Confere se a cobra come a comida do jogo */
if (cobraX[0] == comidaX && cobraY[0] == comidaY) {
tamanho = tamanho + 1;
score = score + tamanho + pedacos;
buff = buff - 10;
if (buff < 10)
buff = 10;
cobraX[tamanho - 1] = cobraX[tamanho - 2];
cobraY[tamanho - 1] = cobraY[tamanho - 2];
jogarComida();
/* Escreve o score atual */
document.getElementById("score").innerHTML = "Score: " + score;
}
/* Confere se a cobra come a pilula do jogo */
if (cobraX[0] == pilulaX && cobraY[0] == pilulaY) {
for (i = 4; i < tamanho; i = i + 1) {
pedacoX[pedacos] = cobraX[i];
pedacoY[pedacos] = cobraY[i];
pedacos = pedacos + 1;
}
tamanho = 4;
buff = 200;
pilulaX = 0;
pilulaY = 0;
}
/* pinta a cabeÇa da cobra no mapa */
colorir(cobraX[0], cobraY[0], "#000000");
/* Espera buff milessegundos e ai executa a função buffar */
setTimeout("buffar()", buff);
}
</script>
<style type="text/css">
.cell {
width:10px;
height:10px;
background-color:#ffffff;
}
</style>
<style type="text/css">
body {color: black; background: #52616F;}
a { color: white; }
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none; color: purple;}
</style>
<style>
.bordaBox {bbackground: ttransparent; width:40%;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
</style>
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
</head>
<body bgcolor="gray" onload="start()" onkeydown="direcionar(event)">
<div style="position:absolute; right:11px;">
<!-- Pesquisa Google -->
<FORM method=GET action="http://www.google.com/search">
<INPUT TYPE=hidden name=hl value="pt-br"> <INPUT TYPE=text name=q maxlength=255 value=""><INPUT type=submit name=btnG VALUE="Pesquisar" TITLE="Pesquisar">
</FORM>
<!-- Pesquisa Google -->
</div>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src=http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800 style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
</div>
<font face="Microsoft Sans Serif" color="#c0c0c0" size="1"><em>By <a href="http://translate.google.com.br/#">Google Tradutor</a></em></font>
<center>
<br/>
<p/>
<h1>JavaScript Snake Game</h1>
<hr width="60%" />
<div style="overflow:auto; width:600px; height:500px; background-color:#367E8E;">
<br/> <br/>
<table cellpadding="0" cellspacing="0" style="border:1px solid black;">
<script language="javascript">
/* carregando o mapa */
var x;
var y;
for (y = 1; y <= 35; y = y + 1) {
document.write("<tr>");
for(x = 1; x <= 35; x = x + 1) {
document.write("<td id='" + y + "-" + x + "' class='cell' >");
}
document.write("</tr>");
}
</script>
</table> <br/>
<span id="score"></span><br/>
<br/>
</div>
<hr width="60%" />
</center>
<center>
<br/>
<div style="font-family:verdana; font-size:10px;">
<span style="font-size:12px;"><b>JavaScript Snake Game</b><br></span>
Pegue os pontos <font color='red'>vermelhos</font> para pontuar aumentando a velocidade da cobra.<br>
Os pontos <font color='blue'>azuis</font> reduziram a velocidade da cobra, porém deixando-a no seu tamanho inicial, e sujando o mapa com dejetos.<br>
</div>
</center>
<br/>
<p/>
</body>
</html>
Copie e cole esse código fonte em um txt e salve com o nome de JavaScript Snack Game.html e é só joga, se divertir.
Bom é isso aí pessoal divirtam-se.
BSJUG - Baixada Santista Java Users Group 