Jogo da Velha com JavaScript e SVG
Publicado por Luiz (última atualização em 17/06/2015)
[ Hits: 6.221 ]
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>
Calculadora Bem Legal box shadow e border Radius
Nenhum comentário foi encontrado.
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
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
Flatpak: remover runtimes não usados e pacotes
Mudar o gerenciador de login (GDM para SDDM e vice-versa) - parte 2
Estou com sede em aprender sobre o nosso querido Linux. (1)
big linux sem audio como resolver (2)
Como faz para dar um update-grub por shell script [RESOLVIDO] (3)
[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