computer vs computer (RANDOM) 🤖

thunder-007 · May 17, 2022 · b806b9f · b806b9f
1 parent 8b40d62
commit b806b9f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -3,16 +3,17 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Bootstrap demo</title>
+    <title>Tic-Tac-Toe</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
     <link href="style.css" rel="stylesheet">
 </head>
 <body>
 <section>
-    <h1 class="text-center my-5">Tic-Tac-Toe-AI</h1>
+    <h1 class="text-center my-5" id = "title">Tic-Tac-Toe-AI</h1>
     <div class="container" id="p5canvas">
     </div>
+    <h1 class="text-center my-5" id="result_message" style="font-family: Cambria,cursive"></h1>
 </section>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"

diff --git a/p5script.js b/p5script.js
@@ -1,14 +1,70 @@
 let board = [
-    ['X', 'O', 'X'],
-    ['O', 'X', 'X'],
-    ['X', 'O', 'O']
+    ['', '', ''],
+    ['', '', ''],
+    ['', '', '']
 ];
+let available_spots = [];
+let players = ['X', 'O'];
+let curr_player_index = Math.round(Math.random());
+let result_message = document.getElementById("result_message");
+
 
 function setup() {
     canvas = createCanvas(300, 300);
     canvas.parent('p5canvas');
+    frameRate(10);
+    for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 3; col++) {
+            available_spots.push([row, col]);
+        }
+    }
+}
+
+function checkWinner() {
+    let winner = null;
+    for (let index = 0; index < 3; index++) {
+        if (board[index][0] === board[index][1] && board[index][1] === board[index][2] && board[index][0] !== '') {
+            winner = board[index][0];
+        } else if (board[0][index] === board[1][index] && board[1][index] === board[2][index] && board[0][index] !== '') {
+            winner = board[0][index];
+        }
+    }
+    if (board[0][0] === board[1][1] && board[1][1] === board[2][2] && board[0][0] !== '') {
+        winner = board[0][0];
+    } else if (board[0][2] === board[1][1] && board[1][1] === board[2][0] && board[1][1] !== '') {
+        winner = board[0][2];
+    }
+    return winner;
+}
+
+function nextTurn() {
+    if (available_spots.length) {
+        let random_index = floor(random(available_spots.length));
+        let curr_spot = available_spots.splice(random_index, 1)[0];
+        let curr_x = curr_spot[0];
+        let curr_y = curr_spot[1];
+        board[curr_x][curr_y] = players[curr_player_index];
+        curr_player_index ^= 1;
+    } else {
+        return false;
+    }
+    return true;
 }
+
 function draw() {
+    next_exists = nextTurn();
+    winner = checkWinner();
+    let result = "";
+    if (winner != null) {
+        result = "Winner is " + winner;
+        result_message.innerText = result;
+        noLoop();
+    }
+    if (!next_exists) {
+        result = "Draw";
+        result_message.innerText = result;
+        noLoop();
+    }
     let one_by_three_width = width / 3;
     let one_by_three_height = height / 3;
     line(0, 0, 0, height);
@@ -27,12 +83,12 @@ function draw() {
             if (curr_mark === 'O') {
                 ellipseMode(CENTER);
                 fill(0, 255, 25);
-                ellipse(curr_width + one_by_three_width / 2, curr_height + one_by_three_height / 2, Math.min(width ,height)/ 6);
+                ellipse(curr_width + one_by_three_width / 2, curr_height + one_by_three_height / 2, Math.min(width, height) / 6);
             } else if (curr_mark === 'X') {
                 start_x = curr_width + width / 12;
                 start_y = curr_height + height / 12;
-                line(start_x, start_y, start_x + width / 6,start_y+height/6);
-                line(start_x,start_y+height/6,start_x + width / 6,start_y);
+                line(start_x, start_y, start_x + width / 6, start_y + height / 6);
+                line(start_x, start_y + height / 6, start_x + width / 6, start_y);
             }
         }
     }

diff --git a/style.css b/style.css
@@ -1,4 +1,4 @@
-#p5canvas{
+#p5canvas {
     display: flex;
     align-items: center;
     justify-content: center;