|
|
@@ -0,0 +1,153 @@
|
|
|
+var board = [
|
|
|
+ [null, null, null],
|
|
|
+ [null, null, null],
|
|
|
+ [null, null, null],
|
|
|
+];
|
|
|
+var player = "X";
|
|
|
+var cpu = "O";
|
|
|
+var running = true;
|
|
|
+var ended = false;
|
|
|
+
|
|
|
+$(document).ready(function () {
|
|
|
+ $("#selection-x").on("click", function () {
|
|
|
+ if (!running) {
|
|
|
+ player = "X";
|
|
|
+ cpu = "O";
|
|
|
+ $(this).removeClass("selected");
|
|
|
+ $(this).addClass("selected");
|
|
|
+ $("#selection-o").removeClass("selected");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#selection-o").on("click", function () {
|
|
|
+ console.log(running);
|
|
|
+ if (!running) {
|
|
|
+ player = "O";
|
|
|
+ cpu = "X";
|
|
|
+ $(this).removeClass("selected");
|
|
|
+ $(this).addClass("selected");
|
|
|
+ $("#selection-x").removeClass("selected");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#restart").on("click", function () {
|
|
|
+ if (!ended) {
|
|
|
+ running = false;
|
|
|
+ $("#state").text("State: Stopped");
|
|
|
+ board = board.map(function (current, x) {
|
|
|
+ return current.map(function (current2, y) {
|
|
|
+ var $li = $("ul").find(
|
|
|
+ "[data-x='" + x + "'][data-y='" + y + "']"
|
|
|
+ );
|
|
|
+ $li.text("");
|
|
|
+ return (current2 = null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ running = true;
|
|
|
+ $("#state").text("State: Running");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".spot").on("click", function () {
|
|
|
+ if (running) {
|
|
|
+ var $li = $(this);
|
|
|
+ var x = parseInt($li.data("x"));
|
|
|
+ var y = parseInt($li.data("y"));
|
|
|
+ var $X = $('<i class="fa fa-times fa-5x"></i>');
|
|
|
+ var $O = $('<i class="fa fa-circle-o fa-5x"></i>');
|
|
|
+ if (board[x][y] === null) {
|
|
|
+ board[x][y] = player;
|
|
|
+ var $symbol = player === "X" ? $X : $O;
|
|
|
+ $symbol.appendTo($li);
|
|
|
+
|
|
|
+ if (!check()) {
|
|
|
+ bot();
|
|
|
+ } else {
|
|
|
+ endGame();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+function endGame() {
|
|
|
+ running = false;
|
|
|
+ $("#state").text("State: Stopped");
|
|
|
+ ended = true;
|
|
|
+ $(".spot").css({
|
|
|
+ color: "purple",
|
|
|
+ });
|
|
|
+ setTimeout(function () {
|
|
|
+ board = board.map(function (current, x) {
|
|
|
+ return current.map(function (current2, y) {
|
|
|
+ var $li = $("ul").find(
|
|
|
+ "[data-x='" + x + "'][data-y='" + y + "']"
|
|
|
+ );
|
|
|
+ $li.text("");
|
|
|
+ return (current2 = null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ running = true;
|
|
|
+ $("#state").text("State: Running");
|
|
|
+ $(".spot").removeAttr("style");
|
|
|
+ ended = false;
|
|
|
+ }, 5000);
|
|
|
+}
|
|
|
+
|
|
|
+function bot() {
|
|
|
+ var X = Math.floor(Math.random() * 3);
|
|
|
+ var Y = Math.floor(Math.random() * 3);
|
|
|
+ if (board[X][Y] !== null) {
|
|
|
+ bot();
|
|
|
+ } else {
|
|
|
+ board[X][Y] = cpu;
|
|
|
+ var $li = $("ul").find("[data-x='" + X + "'][data-y='" + Y + "']");
|
|
|
+ var $X = $('<i class="fa fa-times fa-5x"></i>');
|
|
|
+ var $O = $('<i class="fa fa-circle-o fa-5x"></i>');
|
|
|
+ var $symbol = cpu === "X" ? $X : $O;
|
|
|
+ $symbol.appendTo($li);
|
|
|
+
|
|
|
+ if (check()) {
|
|
|
+ endGame();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function check() {
|
|
|
+ var boardFull = true;
|
|
|
+ for (var i = 0; i < board.length; i++) {
|
|
|
+ if (board[i].indexOf(null) > -1) {
|
|
|
+ boardFull = false;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ board[i][0] !== null &&
|
|
|
+ board[i][0] === board[i][1] &&
|
|
|
+ board[i][1] === board[i][2]
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ board[0][i] !== null &&
|
|
|
+ board[0][i] === board[1][i] &&
|
|
|
+ board[1][i] === board[2][i]
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ board[0][0] !== null &&
|
|
|
+ board[0][0] === board[1][1] &&
|
|
|
+ board[1][1] === board[2][2]
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ board[0][2] !== null &&
|
|
|
+ board[0][2] === board[1][1] &&
|
|
|
+ board[1][1] === board[2][0]
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ return boardFull;
|
|
|
+}
|
Kristian Vos
2 years ago