CodePen

HTML

            
              <CENTER>
<INPUT TYPE="BUTTON" ID="0_0" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="0_1" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="0_2" VALUE=" " ONCLICK="squareClicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="1_0" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="1_1" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="1_2" VALUE=" " ONCLICK="squareClicked(this);">
<BR>
<INPUT TYPE="BUTTON" ID="2_0" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="2_1" VALUE=" " ONCLICK="squareClicked(this);">
<INPUT TYPE="BUTTON" ID="2_2" VALUE=" " ONCLICK="squareClicked(this);">
<BR>
<P ID="status">X's turn</P>
<br>
<INPUT TYPE="BUTTON" ID="NEWGAME" VALUE="New Game" ONCLICK="newgame();">
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var gameOver = false;
var numMoves = 0;
var xTurn = true;
var computerTurn = false;

function squareClicked(square)
{
if(gameOver)
{
alert("The game is already over.");
return;
}

var status = document.getElementById('status');
var value = square.value;

if(value != 'X' && value != 'O')
{
if(xTurn)
{
numMoves++;
square.value = 'X';
xTurn = false;
computerTurn = true;
status.innerHTML = 'O\'s turn';
makeComputerMove();
}
else if(computerTurn == true)
{
status.innerHTML = 'X\'s turn';
xTurn = true;
computerTurn = false;
numMoves++;
square.value = 'O';
}
}
else
{
alert('That square has already been played.');
}

var winner = checkWin();
if(winner == true)
{
if(numMoves == 9)
{
status.innerHTML = 'Tie Game!';
}
else
{
gameOver = true;
}
}
}

function makeComputerMove()
{
var a0 = document.getElementById("0_0");
var a1 = document.getElementById("0_1");
var a2 = document.getElementById("0_2");

var a0 = document.getElementById("1_0");
var a1 = document.getElementById("1_1");
var a2 = document.getElementById("1_2");

var a0 = document.getElementById("2_0");
var a1 = document.getElementById("2_1");
var a2 = document.getElementById("2_2");

var got = false;

while(got == false)
{
var n = Math.floor(Math.random()*9)

switch(n)
{
case 0:
{
if(a0.value == " ")
{
squareClicked("0_0");
got = true;
}
break;
}
case 1:
{
if(a1.value == " ")
{
squareClicked("0_1");
got = true;
}
break;
}
case 2:
{
if(a2.value == " ")
{
squareClicked("0_2");
got = true;
}
break;
}
case 3:
{
if(b0.value == " ")
{
squareClicked("1_0");
got = true;
}
break;
}
case 4:
{
if(b1.value == " ")
{
squareClicked("1_1");
got = true;
}
break;
}
case 5:
{
if(b2.value == " ")
{
squareClicked("1_2");
got = true;
}
break;
}
case 6:
{
if(c0.value == " ")
{
squareClicked("2_0");
got = true;
}
break;
}
case 7:
{
if(c1.value == " ")
{
squareClicked("2_1");
got = true;
}
break;
}
case 8:
{
if(c2.value == " ")
{
squareClicked("2_2");
got = true;
}
break;
}
}
}

computerTurn = false;
}


function newgame()
{
var status = document.getElementById('status');

xTurn = true;
status.innerHTML = 'X\'s turn';
gameOver = false;
computerTurn = false;

for(var x = 0; x < 3; x++)
{
for(var y = 0; y < 3; y++)
{
document.getElementById(x + '_' + y).value = ' ';
}
}
}

function checkWin()
{
var status = document.getElementById('status');
var val0;
var val1;
var val2;

// check columns
for(var y = 0; y < 3; y++)
{
val0 = document.getElementById('0_'+y).value;
val1 = document.getElementById('1_'+y).value;
val2 = document.getElementById('2_'+y).value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}
}

// check rows
for(var x = 0; x < 3; x++)
{
val0 = document.getElementById(x + '_0').value;
val1 = document.getElementById(x + '_1').value;
val2 = document.getElementById(x + '_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}
}

// check top left to lower right diagonal
val0 = document.getElementById('0_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('2_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}

// check lower left to top right diagonal
val0 = document.getElementById('2_0').value;
val1 = document.getElementById('1_1').value;
val2 = document.getElementById('0_2').value;
if(val0 == 'X' && val1 == 'X' && val2 == 'X')
{
status.innerHTML = "X WINS!";
return true;
}
else if(val0 == 'O' && val1 == 'O' && val2 == 'O')
{
status.innerHTML = "O WINS!";
return true;
}

// no winner yet
return false;
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................