Jogo da Velha com JavaScript e SVG
Publicado por Luiz (última atualização em 17/06/2015)
[ Hits: 6.235 ]
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.
<!--
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
Comentários
Nenhum comentário foi encontrado.
Patrocínio
Site hospedado pelo provedor RedeHost.
Destaques
Artigos
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Dicas
Como renomear arquivos de letras maiúsculas para minúsculas
Imprimindo no formato livreto no Linux
Vim - incrementando números em substituição
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
Tópicos
É cada coisa que me aparece! - não é só 3% (1)
Alguma pessoa pode me ajudar com drriver Core i3 7020u (Debian 12)? (2)
Mikrotik não mostra bytes nem packtes (1)
Melhores Práticas de Nomenclatura: Pastas, Arquivos e Código [RESOLVID... (4)
Top 10 do mês
-
Xerxes
1° lugar - 65.832 pts -
Fábio Berbert de Paula
2° lugar - 50.171 pts -
Buckminster
3° lugar - 17.348 pts -
Mauricio Ferrari
4° lugar - 15.503 pts -
Alberto Federman Neto.
5° lugar - 13.964 pts -
Diego Mendes Rodrigues
6° lugar - 13.378 pts -
Daniel Lara Souza
7° lugar - 12.624 pts -
edps
8° lugar - 10.898 pts -
Andre (pinduvoz)
9° lugar - 10.731 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
10° lugar - 10.547 pts
Scripts
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta
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:
