Jogo da Velha com JavaScript e SVG

Publicado por Luiz (última atualização em 17/06/2015)

[ Hits: 7.002 ]

Download JogoDaVelha.html

7 0
Denuncie   Favoritos   Indicar  



Jogo da Velha simples feito com JavaScript e SVG.

O SVG foi gerado e organizado usando o Inkscape.
O JavaScript não ficou uma maravilha mas funciona como o esperado. :)
Funciona muito bem em smartphones.

  



Esconder código-fonte

<!--
Copyright (C) 2015 Luiz Augusto R. C. (luizrocha13@gmail.com)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Jogo da Velha</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
          *{padding: 0; margin: 0; font-family: Arial;}
          #fundo{background: #444;width: 300px;height: 300px;text-align: center;margin: 0 auto;}
          ul, div#vez{list-style-type: none; width:300px;margin: 0 auto;}
          ul li{display: inline-block; width: 70px;}
          .titulo{text-align: center; color: #fff;
          background-image: linear-gradient(to bottom, #111, #444);padding: 8px;font: Arial;}
          .alerta{position: absolute;margin: 0 auto;left: 0;right: 0;margin-left: auto;
          margin-right: auto;width: 300px;height:150px;background: rgba(150, 150, 150, 0.8);
          border-radius: 7px;bottom: 0;top:0;margin-top: auto;margin-bottom: auto;display: none;}
          .msg{height: 48%; padding: 5%;color: #f40;text-align: center;font-size: 20pt;
          line-height: 60px; font-weight: bold}
          .botao{ height: 30%; text-align: center;}
          button{width:90%; height: 100%;}
        </style>
        <script type="text/javascript">
            var mapa = '', jogada_anterior = '', onalert = '';
            var xpontos = 0, opontos = 0, vpontos = 0, total;

            var $$ = function(str){return document.querySelector(str);};
            var get = function(obj){return window.getComputedStyle(obj).getPropertyValue('display')};

            var jogo = {
              alerta: function(msg){
                $$('.msg').innerHTML = msg;
                $$('.alerta').style.display='block';
              },
              limparJogo: function (){
                mapa = {a:'',b:'',c:'',d:'',e:'',f:'',g:'',h:'',i:''};
                total = 0;
                var path = document.querySelectorAll('path')
                for(i in path){path[i].style.display="none"}
              },

              mensagemGanhador: function (jogador){
                $$('#opontos').innerHTML = opontos;
                $$('#xpontos').innerHTML = xpontos;
                $$('#vpontos').innerHTML = vpontos;

                if (jogador == 'x' || jogador == 'o'){
                    jogo.alerta(jogador.toUpperCase() + ' foi o Vencedor!!');
                }else{
                  jogo.alerta('Deu Velha !!');
                }
              },

              verificar: function (j){
                     if(mapa.a == j && mapa.b == j && mapa.c == j){return true;}
                else if(mapa.d == j && mapa.e == j && mapa.f == j){return true;}
                else if(mapa.g == j && mapa.h == j && mapa.i == j){return true;}
                else if(mapa.a == j && mapa.d == j && mapa.g == j){return true;}
                else if(mapa.b == j && mapa.e == j && mapa.h == j){return true;}
                else if(mapa.c == j && mapa.f == j && mapa.i == j){return true;}
                else if(mapa.a == j && mapa.e == j && mapa.i == j){return true;}
                else if(mapa.c == j && mapa.e == j && mapa.g == j){return true;}
                else if(j == 'v' && mapa.a != '' && mapa.b != '' && mapa.c != '' && mapa.d != ''
                        && mapa.e != '' && mapa.f != '' && mapa.g != '' && mapa.h != '' && mapa.i != ''){
                  return true;
                }
                return false;
              },

              jogar: function (posicao, jogador){
                mapa[posicao.toLowerCase()] = jogador;

                if(jogo.verificar('x')){ //X ganhou
                  xpontos++;
                  jogada_anterior = 'o';
                  jogo.mensagemGanhador('x');
                }
                else if(jogo.verificar('o')){ //O ganhou
                  opontos++;
                  jogada_anterior = 'x';
                  jogo.mensagemGanhador('o');
                }
                else if(jogo.verificar('v')){ //Deu Velha
                  vpontos++;
                  jogo.mensagemGanhador('v');
                }
              },

              botaoClicado: function(posicao){
                onalert = get($$('.alerta'));
                if(onalert != 'block'){
                  x = get($$('#X'+posicao))
                  o = get($$('#O'+posicao))

                  if (jogada_anterior != 'x' && x == 'none' && o == 'none') {
                    jogada_anterior = 'x';
                    $$('#X' + posicao).style.display='block';
                    jogo.jogar(posicao, 'x');
                  }

                  else if (jogada_anterior != 'o' && x == 'none' && o == 'none'){
                    jogada_anterior = 'o';
                    $$('#O'+posicao).style.display='block';
                    jogo.jogar(posicao, 'o');
                  }

                  if(jogada_anterior == 'o'){
                    $$('#vez').innerHTML = 'Vez do X';
                  }
                  else if(jogada_anterior == 'x'){
                    $$('#vez').innerHTML = 'Vez do O';
                  }
                }
              }
            };
            window.botaoClicado = jogo.botaoClicado;
        </script>
    </head>
    <body onload="jogo.limparJogo()">
      <div class="alerta">
        <div class="msg"></div>
        <div class="botao">
          <button type="button" id="ok" onclick="$$('.alerta').style.display='none'; jogo.limparJogo();">Jogar Novamente</button>
        </div>
      </div>
      <div class="titulo">
          <h2>Jogo da Velha</h2>
      </div>
      <br/>
      <div id="fundo">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" id="svg2">
<g transform="translate(0,-752.36224)" id="layer1">
<rect width="95" height="95" x="-5.0000004e-08" y="752.36224" id="A" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('A')"/>
<rect width="95" height="95" x="102.5" y="752.36224" id="B" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('B')"/>
<rect width="95" height="95" x="205" y="752.36224" id="C" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('C')"/>
<rect width="95" height="95" x="0" y="854.86224" id="D" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('D')"/>
<rect width="95" height="95" x="102.5" y="854.86224" id="E" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('E')"/>
<rect width="95" height="95" x="205" y="854.86224" id="F" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('F')"/>
<rect width="95" height="95" x="0" y="957.36224" id="G" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('G')"/>
<rect width="95" height="95" x="102.5" y="957.36224" id="H" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('H')"/>
<rect width="95" height="95" x="205" y="957.36224" id="I" style="fill:#ffffff;fill-opacity:1;stroke:none" onclick="botaoClicado('I')"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,35.424336,784.41759)" id="OA" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 23.687502,755.70599 -20.3437501,20.34375 23.8125001,23.8125 -23.8125001,23.8125 20.3437501,20.34375 23.8125,-23.8125 23.812496,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 -20.34375,-20.34375 -23.812496,23.8125 -23.8125,-23.8125 z" id="XA" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,137.92433,784.41759)" id="OB" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,240.42433,784.41759)" id="OC" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 126.1875,755.70599 -20.34375,20.34375 23.8125,23.8125 -23.8125,23.8125 20.34375,20.34375 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 L 173.8125,755.70599 150,779.51849 126.1875,755.70599 z" id="XB" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 228.68749,755.70599 -20.34375,20.34375 23.8125,23.8125 -23.8125,23.8125 20.34375,20.34375 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 -20.34375,-20.34375 -23.8125,23.8125 -23.8125,-23.8125 z" id="XC" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,35.424336,886.91759)" id="OD" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 23.6875,858.20599 -20.34375,20.34375 23.8125,23.8125 -23.8125,23.8125 20.34375,20.34375 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 L 71.3125,858.20599 47.5,882.01849 23.6875,858.20599 z" id="XD" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,137.92434,886.91759)" id="OE" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 126.1875,858.20599 -20.34375,20.34375 23.8125,23.8125 -23.8125,23.8125 20.34375,20.34375 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 L 173.8125,858.20599 150,882.01849 126.1875,858.20599 z" id="XE" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,240.42434,886.91759)" id="OF" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 228.6875,858.20599 -20.34375,20.34375 23.8125,23.8125 -23.8125,23.8125 20.34375,20.34375 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.34375 -23.8125,-23.8125 23.8125,-23.8125 -20.34375,-20.34375 -23.8125,23.8125 -23.8125,-23.8125 z" id="XF" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,35.424336,989.41759)" id="OG" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 23.6875,960.70599 -20.34375,20.34375 23.8125,23.81246 -23.8125,23.8125 20.34375,20.3438 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.3438 -23.8125,-23.8125 23.8125,-23.81246 L 71.3125,960.70599 47.5,984.51849 23.6875,960.70599 z" id="XG" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,137.92434,989.41759)" id="OH" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 126.1875,960.70599 -20.34375,20.34375 23.8125,23.81246 -23.8125,23.8125 20.34375,20.3438 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.3438 -23.8125,-23.8125 23.8125,-23.81246 L 173.8125,960.70599 150,984.51849 126.1875,960.70599 z" id="XH" style="fill:#008080;stroke:none;display:none"/>
<path class="path" d="m 90.913725,32.29937 a 65.659912,65.659912 0 1 1 -131.319824,0 65.659912,65.659912 0 1 1 131.319824,0 z" transform="matrix(0.47817191,0,0,0.4781719,240.42434,989.41759)" id="OI" style="fill:none;stroke:#ff0000;stroke-width:54.92282104;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:none"/>
<path class="path" d="m 228.6875,960.70599 -20.34375,20.34375 23.8125,23.81246 -23.8125,23.8125 20.34375,20.3438 23.8125,-23.8125 23.8125,23.8125 20.34375,-20.3438 -23.8125,-23.8125 23.8125,-23.81246 -20.34375,-20.34375 -23.8125,23.8125 -23.8125,-23.8125 z" id="XI" style="fill:#008080;stroke:none;display:none"/>
</g>
</svg>
</div>
<ul>
    <li><b style="font-size:20pt;">X: </b><b id="xpontos" style="font-size:20pt;"></b></li>
    <li><b style="font-size:20pt;">O: </b><b id="opontos" style="font-size:20pt;"></b></li>
    <li><b style="font-size:20pt;">V: </b><b id="vpontos" style="font-size:20pt;"></b></li>
</ul>
<p><div id="vez" style="font-size:20pt;font-weight:bold;">Vez do X</div></p>
</div>
</body>
</html>

Scripts recomendados

EFEITO NO BACK

Menu sanfona com JQuery apenas utilizando as tags UL e LI

Musica no WEB SITE

Cores de paginas

Mira no mouse


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

File Browser: Crie sua Nuvem Pessoal Privada

A produção de áudio e vídeo no Linux e as distribuições dedicadas a esse fim

Criptografando sua Home com Gocryptfs para tristeza do meliante

A Involução do Linux e as Lambanças Desnecessárias desde o seu Lançamento

O Journal no Linux para a guarda e consulta de logs do sistema

Dicas

Gerenciamento de Vídeo Híbrido (Intel/NVIDIA) via nvidia-prime no Ubuntu e derivados

Assistindo IPTV no Linux com Fred TV e Lista Free TV

Impressora Tomate MDK-007 no Ubuntu (ou qualquer distro Linux)

Acelerando a compilação de pacotes no Arch Linux (AUR) usando todos os núcleos do processador

Ocultando asteriscos ao digitar senha no Ubuntu

Tópicos

Depois não querem que eu fale sobre as baseadas... (4)

Tive um problema ao abrir minha partição Btrfs. Como posso resolver is... (0)

O computador não reconhece a câmera (3)

O VOL está de despedida! (6)

Links importantes de usuários do vol (6)

Top 10 do mês

Scripts

[Shell Script] gerenciar_warsaw.sh

[Shell Script] atualizar_kernel.sh

[Shell Script] Flatctl

[Shell Script] yad-clamav

[Shell Script] imageDownloader

A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.

Site hospedado por: