123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- 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;
- }
|