API tools faq
paste
Advertisement
NelloRizzo

Tris

NelloRizzo
Apr 17th, 2020
543
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Tic Tac Toe</title>
  6.     <style>
  7.         table.tris {
  8.             width: 300px;
  9.             height: 300px;
  10.             border: 1px dashed black;
  11.         }
  12.  
  13.             table.tris td {
  14.                 border-radius: 50px;
  15.                 border: 1px solid brown;
  16.                 margin: 0;
  17.                 width: 100px;
  18.                 height: 100px;
  19.                 padding: 5px;
  20.             }
  21.  
  22.         .player0 {
  23.             background-color: red;
  24.         }
  25.  
  26.         .player1 {
  27.             background-color: yellow;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h1>Tris</h1>
  33.     <table class="tris">
  34.         <tr><td></td><td></td><td></td></tr>
  35.         <tr><td></td><td></td><td></td></tr>
  36.         <tr><td></td><td></td><td></td></tr>
  37.     </table>
  38.     <button id="start_game">Inizia partita</button>
  39.     <div id="feedback">&Egrave; il turno del giocatore <span id="player">&nbsp;&nbsp;&nbsp;</span></div>
  40.  
  41.     <script src="node_modules/jquery/dist/jquery.js"></script>
  42.     <script>
  43.         var running = false; // indica se la partita è in corso
  44.         var player; // prossimo giocatore
  45.  
  46.         // mostra a video le informazioni di gioco
  47.         function displayInfo() {
  48.             if (running) { // se sono in gioco
  49.                 $("#start_game").prop("disabled", true); // disabilita il pulsante di avvio
  50.                 $("#feedback").show(); // mostra un feedback
  51.                 $("#player").removeClass("player0"); // pulisce lo span del prossimo giocatore
  52.                 $("#player").removeClass("player1");
  53.                 $("#player").addClass("player" + player); // mostra il prossimo giocatore
  54.             }
  55.             else { // non sono in gioco
  56.                 $("#start_game").prop("disabled", false); // abilita il pulsante di avvio
  57.                 $("#feedback").hide(); // nasconde il div di feedback
  58.             }
  59.         }
  60.  
  61.         function init() { // inizializza il tabellone
  62.             $("td").removeClass("player0");
  63.             $("td").removeClass("player1");
  64.             running = false;
  65.             displayInfo();
  66.         }
  67.  
  68.         function startGame() { // inizia la partita
  69.             running = true;
  70.             player = 0;
  71.             displayInfo();
  72.         }
  73.  
  74.         $(function () { // gestore del gioco
  75.             init();
  76.             displayInfo();
  77.             $("#start_game").click(function () { startGame(); }); // inizia la partita
  78.             $("td").click(function () { // click su una cella della tabella
  79.                 if (running) { // sono in partita
  80.                     $(this).addClass("player" + player); // colora la cella
  81.                     var check = checkWin(player); // controlla se c'è vittoria
  82.                     if (check > 0) { // il giocatore corrente ha vinto
  83.                         winner(player);
  84.                     }
  85.                     else if (check < 0) { // partita patta
  86.                         draw(player);
  87.                     }
  88.                     else { // nessuno ha ancora vinto e la partita non è pari
  89.                         // 0 -> 1 % 2 = 1
  90.                         // 1 -> 2 % 2 = 0
  91.                         player = (player + 1) % 2; // prossimo giocatore
  92.                         displayInfo();
  93.                     }
  94.                 }
  95.             })
  96.         });
  97.         function draw() { alert("Partita pari"); init(); } // indica partita patta
  98.         function winner(player) { alert("Il giocatore " + player + " ha vinto"); init(); } // indica vittoria
  99.         function checkWin(player) { // controlla vincita
  100.             var className = "player" + player;
  101.             var table = []; // tabella per il controllo vincite
  102.             table[0] = [0, 0, 0];
  103.             table[1] = [0, 0, 0];
  104.             table[2] = [0, 0, 0];
  105.             // inizia la tabella per il controllo vincite
  106.             var rows = $("table.tris tr");
  107.             var checked = 0;
  108.             for (var row = 0; row < rows.length; ++row) {
  109.                 var cols = $(rows[row]).find("td");
  110.                 for (var col = 0; col < cols.length; ++col) {
  111.                     if ($(cols[col]).hasClass("player1") || $(cols[col]).hasClass("player0"))
  112.                         // conta le celle piene
  113.                         ++checked;
  114.                     // controlla se la cella è marcata dal giocatore passato come parametro
  115.                     if ($(cols[col]).hasClass(className)) table[row][col] = 1;
  116.                 }
  117.             }
  118.             // faccio un po' di conti
  119.             for (var row = 0; row < 3; ++row) {
  120.                 var sum = table[row][0] + table[row][1] + table[row][2];
  121.                 if (sum == 3) return 1;
  122.             }
  123.             for (var col = 0; col < 3; ++col) {
  124.                 var sum = table[0][col] + table[1][col] + table[2][col];
  125.                 if (sum == 3) return 1
  126.             }
  127.             if (table[0][0] + table[1, 1] + table[2, 2] == 3
  128.                 || table[2][0] + table[1][1] + table[0][2] == 3)
  129.                 return 1;
  130.             if (checked == 9) return -1;
  131.             return 0;
  132.         }
  133.     </script>
  134.  
  135.  
  136. </body>
  137. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!