JSFiddle - React, Tailwind, and code Playground

by mboguslaw97

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<title>tic-tac-toe</title>
		<link rel="stylesheet" type="text/css" href="tictactoe.css"/>
		<script>
			var turn = 1;
			var board = [];
			var winningCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

			function canvasClicked(canvasNum){
				cID = "canvas" + canvasNum;
				c = document.getElementById(cID);
				cxt = c.getContext("2d");

				if(board[canvasNum] == null){
					if(turn % 2 == 0){
						board[canvasNum] = 'O';
						cxt.beginPath();
						cxt.arc(25,25,20,0,Math.PI*2,true);
						cxt.stroke();
						cxt.closePath();
						checkForWinner('O');
					}
					else{
						board[canvasNum] = 'X';
						cxt.beginPath();
						cxt.moveTo(10,10);
						cxt.lineTo(40,40);
						cxt.moveTo(40,10);
						cxt.lineTo(10,40);
						cxt.stroke();
						cxt.closePath();
						checkForWinner('X');
					}
					turn ++;
				}
				else{
					alert("You cannot move there.");
				}
			}

			function checkForWinner(letter){
				for(var a=0; a<winningCombos.length; a++){
					for(var b=0; b<winningCombos[a].length; b++){
						if(board[winningCombos[a][b]] != letter){
							break;
						}
						else if(b == winningCombos[a].length - 1){
							alert(letter + "'s Win!");
							answer = confirm("Would you like to play again?");
							if(answer == true){
								location.reload(true);
							}
						}
					}
				}		
			}

		</script>
	</head>
	<body>
		<h1>tic-tac-toe</h1>
		<canvas id="canvas0" width="50" height="50" onclick="canvasClicked(0)"></canvas>
		<canvas id="canvas1" width="50" height="50" onclick="canvasClicked(1)"></canvas>
		<canvas id="canvas2" width="50" height="50" onclick="canvasClicked(2)"></canvas>	
		<br/>
		<canvas id="canvas3" width="50" height="50" onclick="canvasClicked(3)"></canvas>
		<canvas id="canvas4" width="50" height="50" onclick="canvasClicked(4)"></canvas>
		<canvas id="canvas5" width="50" height="50" onclick="canvasClicked(5)"></canvas>	
		<br/>
		<canvas id="canvas6" width="50"...

CSS

canvas{
	border: 1px solid black;
}