Novice Tic Tac Toe

index.html

<div class="container">
  <section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        TicTacToe
      </h1>
      <h2 class="subtitle">
        by Ridha Watanabe
      </h2>
    </div>
  </div>
</section>
<input id="clear" type="button" value="Clear" onClick="resetter()"></input>
<input name="icon" id="cross" type="radio" onClick="xChoice()">Cross</input>
<input name="icon" id="circle" type="radio" onClick="oChoice()">Circle</input>
<div id="board">
  <div id="1" class="box" onClick="clicker(this.id)"></div>
  <div id="2" class="box" onClick="clicker(this.id)"></div>
  <div id="3" class="box" onClick="clicker(this.id)"></div>
  <div id="4" class="box" onClick="clicker(this.id)"></div>
  <div id="5" class="box" onClick="clicker(this.id)"></div>
  <div id="6" class="box" onClick="clicker(this.id)"></div>
  <div id="7" class="box" onClick="clicker(this.id)"></div>
  <div id="8" class="box" onClick="clicker(this.id)"></div>
  <div id="9" class="box" onClick="clicker(this.id)"></div>
</div>
</div>

novice-tic-tac-toe.markdown

Novice Tic Tac Toe

A Pen by Ridha Watanabe on CodePen.

License.

script.js

var playerIcon;
var botIcon;

xChoice();

function xChoice() {
  document.getElementById("cross").checked = true;
  playerIcon = "X";
  botIcon = "O";
}

function oChoice() {
  document.getElementById("circle").checked = true;
  playerIcon = "O";
  botIcon = "X";
}

function boxMatrix() {
  var box = [];
  for (var i = 1; i <= 9; i++) {
    box.push(document.getElementById(i).innerHTML);
  }
  return box;
}

function emptyBoxes() {
  var boxValueCount = 0;
  for (var i = 1; i <= 9; i++) {
    if (document.getElementById(i).innerHTML === "") {
      boxValueCount++;
    }
  }
  return boxValueCount;
}

function clicker(id) {
  if (emptyBoxes() == 1) {
    me(id);
    checker();
    alert("Tie");
    resetter();
  } else {
    me(id);
    checker();
    robot();
    checker();
  }
}

function me(id) {
  while (document.getElementById(id).innerHTML !== "") {
    clicker();
  }
  document.getElementById(id).innerHTML = playerIcon;
}

function robot() {
  var rand = Math.floor(Math.random() * 9) + 1;
  while (document.getElementById(rand).innerHTML !== "") {
    rand = Math.floor(Math.random() * 9) + 1;
  }
  document.getElementById(rand).innerHTML = botIcon;
}

function resetter() {
  var i;
  for (i = 1; i <= 9; i++) {
    document.getElementById(i).innerHTML = "";
  }
  throw "All scripts stopped";
}

function strip(symbol, array) {
  var strippedArray = [];
  for (var i = 0; i < 9; i++) {
    if (array[i] == symbol) {
      strippedArray.push("");
    } else {
      strippedArray.push(array[i]);
    }
  }
  return strippedArray;
}

function checker() {
  if (
    (boxMatrix()[0] == playerIcon &&
      boxMatrix()[1] == playerIcon &&
      boxMatrix()[2] == playerIcon) ||
    (boxMatrix()[3] == playerIcon &&
      boxMatrix()[4] == playerIcon &&
      boxMatrix()[5] == playerIcon) ||
    (boxMatrix()[6] == playerIcon &&
      boxMatrix()[7] == playerIcon &&
      boxMatrix()[8] == playerIcon) ||
    (boxMatrix()[0] == playerIcon &&
      boxMatrix()[3] == playerIcon &&
      boxMatrix()[6] == playerIcon) ||
    (boxMatrix()[1] == playerIcon &&
      boxMatrix()[4] == playerIcon &&
      boxMatrix()[7] == playerIcon) ||
    (boxMatrix()[2] == playerIcon &&
      boxMatrix()[5] == playerIcon &&
      boxMatrix()[8] == playerIcon) ||
    (boxMatrix()[0] == playerIcon &&
      boxMatrix()[4] == playerIcon &&
      boxMatrix()[8] == playerIcon) ||
    (boxMatrix()[2] == playerIcon &&
      boxMatrix()[4] == playerIcon &&
      boxMatrix()[6] == playerIcon)
  ) {
    alert("You win");
    resetter();
  } else if (
    (boxMatrix()[0] == botIcon &&
      boxMatrix()[1] == botIcon &&
      boxMatrix()[2] == botIcon) ||
    (boxMatrix()[3] == botIcon &&
      boxMatrix()[4] == botIcon &&
      boxMatrix()[5] == botIcon) ||
    (boxMatrix()[6] == botIcon &&
      boxMatrix()[7] == botIcon &&
      boxMatrix()[8] == botIcon) ||
    (boxMatrix()[0] == botIcon &&
      boxMatrix()[3] == botIcon &&
      boxMatrix()[6] == botIcon) ||
    (boxMatrix()[1] == botIcon &&
      boxMatrix()[4] == botIcon &&
      boxMatrix()[7] == botIcon) ||
    (boxMatrix()[2] == botIcon &&
      boxMatrix()[5] == botIcon &&
      boxMatrix()[8] == botIcon) ||
    (boxMatrix()[0] == botIcon &&
      boxMatrix()[4] == botIcon &&
      boxMatrix()[8] == botIcon) ||
    (boxMatrix()[2] == botIcon &&
      boxMatrix()[4] == botIcon &&
      boxMatrix()[6] == botIcon)
  ) {
    alert("O win");
    resetter();
  }
}

style.css

#board{
  width:307px;
  height:307px;
}

.box{
  width:100px;
  height:100px;
  float:left;
  background-color:pink;
  margin-top:1px;
  margin-left:1px;
}