HTML
CSS
JS
Edit on Codewith.it
<!DOCTYPE html> <html> <head> <title>Tris!</title> <style> td { width: 100px; height: 100px; text-align: center; font-size: 48px; cursor: pointer; border: 1px solid black; } td:hover { background-color: whitesmoke; } table { margin: 0 auto; border-collapse: collapse; } h1 { text-align: center; } </style> </head> <body> <h1>Tris!</h1> <table> <tr> <td onclick="mossa(0, 0)"></td> <td onclick="mossa(0, 1)"></td> <td onclick="mossa(0, 2)"></td> </tr> <tr> <td onclick="mossa(1, 0)"></td> <td onclick="mossa(1, 1)"></td> <td onclick="mossa(1, 2)"></td> </tr> <tr> <td onclick="mossa(2, 0)"></td> <td onclick="mossa(2, 1)"></td> <td onclick="mossa(2, 2)"></td> </tr> </table> </body> </html>
const xchar = "✖"; const ochar = "〇"; var giocatore = xchar; var schema = [ ['', '', ''], ['', '', ''], ['', '', ''] ]; function mossa(x, y) { if (schema[x][y] === '') { schema[x][y] = giocatore; let cell = document.getElementsByTagName('td')[x * 3 + y]; cell.innerText = giocatore; if (haiVinto()) { alert(cell.innerText + ' ha vinto'); resetGioco(); } else if (pareggio()) { alert('Pareggio'); resetGioco(); } else { giocatore = giocatore === xchar ? ochar : xchar; } } } function haiVinto() { for (let i = 0; i < 3; i++) { if ( (schema[i][0] !== '' && schema[i][0] === schema[i][1] && schema[i][0] === schema[i][2]) || (schema[0][i] !== '' && schema[0][i] === schema[1][i] && schema[0][i] === schema[2][i]) ) { return true; } } if ( (schema[0][0] !== '' && schema[0][0] === schema[1][1] && schema[0][0] === schema[2][2]) || (schema[0][2] !== '' && schema[0][2] === schema[1][1] && schema[0][2] === schema[2][0]) ) { return true; } return false; } function pareggio() { for (let row = 0; row < 3; row++) { for (let col = 0; col < 3; col++) { if (schema[row][col] === '') { return false; } } } return true; } function resetGioco() { schema = [ ['', '', ''], ['', '', ''], ['', '', ''] ]; giocatore = xchar; let cells = document.getElementsByTagName('td'); for (let i = 0; i < cells.length; i++) { cells[i].innerText = ''; } }