Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 22
Tutorial para Criar o Jogo da Velha

Nesse tutorial veremos como criar um jogo da velha usando jQuery.
Um jogo da velha é um jogo simples para dois jogadores. Também é chamado de jogo da velha e cruzes.
Regras do Jogo da Velha
1) O jogo Tic-tac-toe é jogado em uma grade de 3 x 3 quadrados.
2) Um dos jogadores é X ou o outro jogador, seja seu amigo ou o computador, é O. Todos os jogadores se revezam colocando suas marcas em quadrados vazios.
3) O vencedor é o primeiro jogador a obter 3 de suas marcas consecutivas (para cima, para baixo, transversalmente ou na diagonal).
4) Quando todos os 9 quadrados estiverem cheios, o jogo termina. Se nenhum jogador tiver 3 marcas seguidas, o jogo termina empatado.
Vejamos um Exemplo:
Nesse exemplo você é o 'X' e joga com o computador:
<!DOCTYPE html> <html lang = "en"> <head> <title>Jogo da Velha em JQuery</title> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1"> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script> <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel = "stylesheet"> <script src='/google_analytics_auto.js'></script></head> <style type="text/css"> @import url("https://fonts.googleapis.com/css?family=Sacramento"); @import url('https://fonts.googleapis.com/css?family=Gochi+Hand'); body { text-transform: uppercase; text-align: center; white-space: nowrap; color: blue; background-color: #ffaa00; } body > * { margin-left: auto; margin-right: auto; font-family: arial; color : blue; } h1 { font-size : 2rem; font-family: 'arial'; font-weight: bold; margin-bottom :10px; margin-top :10px; } #board { font-family: 'Gochi Hand'; background-position: center top; background-size: 60% 60%; border-right: tan solid 4px; border-top: #bda27e solid 4px; border-left: #b19876 solid 4px; border-bottom: #c9ad86 solid 4px; box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5); background-size: 80% auto; padding : 2% 2% 0% 2%; margin-top :10px; margin-bottom :10px; } #tictac { margin-right : auto; margin-left : auto; } #tictac td { width: 2em; height: 2em; text-align : center; vertical-align: middle; font: bold 36px sans-serif; } td:hover { background-color : rgba(255, 255, 255, 0.2); cursor : pointer; } td#cell0, td#cell1, td#cell2, td#cell3, td#cell4, td#cell5 { border-bottom: 3px solid yellow; } td#cell0, td#cell1, td#cell3, td#cell4, td#cell6, td#cell7 { border-right: 3px solid yellow; } #result { margin: 0.5em; margin-bottom : 40px; font: 24px sans-serif; } .playerPick { margin-bottom : 50px; } #x { margin-right : 20px; } #o { margin-left : 20px; } #reset { font-family: 'Helvetica'; margin-top : 10px; margin-bottom : 20px; } button { height: 6vh; width: 12vw; min-width: 160px; min-height: 50px; margin: 1vw; cursor: pointer; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.07rem; position: relative; overflow: hidden; } button:nth-of-type(1) { transition: color .4s ease-in-out, background-color 1.5s ease-in-out; } button:nth-of-type(1):hover { color: #ec1155; } button:nth-of-type(1)::after { content: ' '; position: absolute; bottom: 0; left: -100%; background-color: red; height:10%; width: 100%; transition: all .4s ease-in-out; } button:nth-of-type(1):hover::after { left:0; } #deco1 { font-family: 'Gochi Hand'; font-size : 4rem; -ms-transform: rotate(-8deg); -webkit-transform: rotate(-8deg); transform: rotate(-8deg); margin-top : 20px; margin-left : 100px; } button:nth-of-type(3) { transition: all .4s ease-in-out .4s; } button:nth-of-type(3):hover { border: 2px solid red; } button:nth-of-type(3)::before { content: ' '; position: absolute; bottom: -100%; right: -100%; height: 100%; width: 100%; transition: all .4s ease-in-out; } button:nth-of-type(3):hover::before { bottom: 0; right: 0; } button:nth-of-type(3)::after { content: ' '; position: absolute; width: 100%; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.07rem; color: red; transition: all .4s ease-in-out; z-index: 5; } button:nth-of-type(3):hover::after { top: 50; left: 0; } button:nth-of-type(2) { background-color: transparent; border: 2px solid #ec1111; z-index:1; transition: color .4s ease-in-out , border .4s ease-in-out .6s; } button:nth-of-type(2):hover { color: white; border: 2px solid blue; } button:nth-of-type(2)::before { content: ' '; position: absolute; width: 100%; height: 50%; background-color: red; top: -100%; left: 0; transition: all .6s ease-in-out; z-index: -1; } button:nth-of-type(2):hover::before { top: 0; } button:nth-of-type(2)::after { content: ' '; position: absolute; width:100%; height: 50%; background-color: red; bottom: -100%; left: 0; transition:all .6s ease-in-out; z-index: -1; } button:nth-of-type(2):hover::after { bottom: 0; } h3 { text-align: center; font-weight: normal; color: #fff; text-transform: uppercase; font-size: 1em; white-space: nowrap; font-size: 2vw; z-index: 1000; font-family: 'Bangers', cursive; text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7); @include skew(0, -6.7deg, false); @include transition-property(font-size); @include transition-duration(0.5s); } #result { text-align: center; font-weight: normal; color: #fff; text-transform: uppercase; font-size: 1em; white-space: nowrap; font-size: 2vw; z-index: 1000; font-family: 'Bangers', cursive; text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7); @include skew(0, -6.7deg, false); @include transition-property(font-size); @include transition-duration(0.5s); } .credit { font-size : 2rem; } .credit a { color : white; } #rightboard { position: absolute; margin-left: 750px; } @media (max-width: 992px) { #board { background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1)); } #deco1 { font-size : 0rem; } #cup { height : 0px; } } </style> <body> <div id = "board" class = "container text-center"> <h1>Exemplo</h1> <h2>Jogo da Velha em JQuery</h2> <div id = "result">Você vai jogar como 'X'</div> <div class = "row text-center"> <div class = "col-md-2"> </div> <div class = "col-md-8"> <table id = "tictac"> <tbody> <tr> <td id = "cell0"> </td> <td id = "cell1"> </td> <td id = "cell2"> </td> </tr> <tr> <td id = "cell3"> </td> <td id = "cell4"> </td> <td id = "cell5"> </td> </tr> <tr> <td id = "cell6"> </td> <td id = "cell7"> </td> <td id = "cell8"> </td> </tr> </tbody> </table> </div> <div class = "col-md-2" id = "rightboard"> </div> </div> <div class = "mybutton text-center"> <button type = "button" class = "playerPick" value = "X" id = "x"> X </button> <button type = "button" id = "reset">Reset</button> <button type = "button" class = "playerPick" id = "o" value = "O"> O </button> </div> </div> <script> function fetchBoard() { var board; board = ['', '', '', '', '', '', '', '', '']; $("#tictac td").each(function (index) { board[index] = $(this).text(); }); return board; } function checkRow(a, b, c) { if (a === 'X' && b === 'X' && c === 'X') { return 1; } else if (a === 'O' && b === 'O' && c === 'O') { return -1; } else { return 0; } } function checkWin(board) { return checkRow(board[0], board[1], board[2]) + checkRow(board[3], board[4], board[5]) + checkRow(board[6], board[7], board[8]) + checkRow(board[0], board[3], board[6]) + checkRow(board[1], board[4], board[7]) + checkRow(board[2], board[5], board[8]) + checkRow(board[0], board[4], board[8]) + checkRow(board[2], board[4], board[6]); } function selectMove(board) { var i, options; options = []; for (i = 0; i < 9; i += 1) { if (board[i] === '') { options.push(i); } } if (options.length === 0) { return -1; } else { return options[Math.floor(Math.random() * options.length)]; } } function showGameOver(result) { var target; target = $("#result"); if (result > 0) { target.text("X win!"); } else if (result < 0) { target.text("O win!"); } else { target.text("Draw"); } } $(document).ready(function () { var ordi = "O"; var ordiVal = "O"; var player = "X"; $(".playerPick").click(function() { player = $(this).val(); ordi = ""; if (player == "X") { ordi = "O"; ordiVal = "O"; $("#tictac td").text(''); } else { ordi = "X"; ordiVal = "X" $("#tictac td").text(''); } $("#result").text("Você vai jogar como " + player); }); $("#tictac td").click(function() { var xCell, board, result, oLocation, oCell; xCell = $(this); if (xCell.text() !== '' || checkWin(fetchBoard()) !== 0) { return; } xCell.text(player); board = fetchBoard(); result = checkWin(board); if (result !== 0) { showGameOver(result); return; } ordi = selectMove(board); if (ordi < 0) { showGameOver(0); return; } board[ordi] = ordi; oCell = $("#cell" + ordi); oCell.text(ordiVal); board = fetchBoard(); result = checkWin(board); if (result !== 0) { showGameOver(result); return; } }); $("#reset").click(function() { $("#tictac td").text(''); $("#result").text("Você vai jogar como " + player); }); }); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Aceitar somente 10 Números em um Textbox
Tutorial para Criar um Relógio Digital >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino