JavaScript Snake Game

JavaScript Sanck GameOlá 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&ecirc; 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&ecirc; 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&ecirc; 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/>&nbsp;<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/>
                        &nbsp;<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&eacute;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.

Anúncios