# VBForums CodeBank > Codebank - Game Programming >  [HTML5, CSS3, JavaScript] Tic-Tac-Toe

## dday9

I've decided to make a simple web-based tic-tac-toe game. The AI is incredibly simple, it just gets a random available ID.



```
<!DOCTPYE html>
<html>
	<head>
		<style>
			label {
				display: inline-block;
				vertical-align: middle;
				cursor: pointer;
				background: #fff;
				border: 1px solid #888;
				border-radius: 20px;
				margin: 0px;
				padding: 0px;
				height: 140px;
				width: 140px;
			}

			/* default and unchecked */
			label input[type="checkbox"], label input[type="checkbox"] ~ svg {
				display: none;
			}

			/* hover and checked */
			label:hover input[type="checkbox"]:not([disabled]) + svg.hoverX,
			label input[type="checkbox"]:disabled:not(:indeterminate) ~ svg.checkedX,
			label input[type="checkbox"]:indeterminate ~ svg.checkedO {
				display: inline-block;
			}
		</style>
		<script>
		// store all of the input id's in a row/column format
		var ids = ['00', '01', '02', '10', '11', '12', '20', '21', '22'];

		window.onload=function() {
			// bind the onchange event for each id
			for (i = 0; i < ids.length; i++) {
					document.getElementById(ids[i]).onchange=checkbox_change;
			}
		}

		function checkbox_change() {
			// disable the checkbox
			this.disabled = true;
			
			// remove the id from the array
			ids.splice(ids.indexOf(this.id), 1)
			
			// check for player winning
			if (isWinner()) {
				alert('You won!');
			} else {
				// ai portion (just select a random available id)
				var id = ids[Math.floor(Math.random()*ids.length)];
				
				// disable the checkbox
				var cb = document.getElementById(id);
				cb.disabled = true;
				cb.checked = true;
				cb.indeterminate = true;
				
				// check for a cpu win
				if (isWinner()) {
					alert('The CPU won.');
				}
			}
		}

		function isWinner() {
			var row0column0 = document.getElementById('00');
			var row0column1 = document.getElementById('01');
			var row0column2 = document.getElementById('02');
			var row1column0 = document.getElementById('10');
			var row1column1 = document.getElementById('11');
			var row1column2 = document.getElementById('12');
			var row2column0 = document.getElementById('20');
			var row2column1 = document.getElementById('21');
			var row2column2 = document.getElementById('22');
			
			var horizontalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row0column1.disabled && !(row0column1.indeterminate) && row0column2.disabled  && !(row0column2.indeterminate)) || (row1column0.disabled && !(row1column0.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row1column2.disabled  && !(row1column2.indeterminate)) || (row2column0.disabled && !(row2column0.indeterminate) && row2column1.disabled && !(row2column1.indeterminate) && row2column2.disabled  && !(row2column2.indeterminate));
			var verticalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row1column0.disabled && !(row1column0.indeterminate) && row2column0.disabled && !(row2column0.indeterminate)) || (row0column1.disabled && !(row0column1.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column1.disabled && !(row2column1.indeterminate)) || (row0column2.disabled && !(row0column2.indeterminate) && row1column2.disabled && !(row1column2.indeterminate) && row2column2.disabled && !(!row2column2.indeterminate));
			var diagonalPlayer = (row0column0.disabled && !(row0column0.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column2.disabled && !(row2column2.indeterminate)) || (row0column2.disabled && !(row0column2.indeterminate) && row1column1.disabled && !(row1column1.indeterminate) && row2column0.disabled && !(row2column0.indeterminate));
			
			var horizontalCpu = (row0column0.disabled && row0column0.indeterminate && row0column1.disabled && row0column1.indeterminate && row0column2.disabled  && row0column2.indeterminate) || (row1column0.disabled && row1column0.indeterminate && row1column1.disabled && row1column1.indeterminate && row1column2.disabled  && row1column2.indeterminate) || (row2column0.disabled && row2column0.indeterminate && row2column1.disabled && row2column1.indeterminate && row2column2.disabled  && row2column2.indeterminate);
			var verticalCpu = (row0column0.disabled && row0column0.indeterminate && row1column0.disabled && row1column0.indeterminate && row2column0.disabled && row2column0.indeterminate) || (row0column1.disabled && row0column1.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column1.disabled && row2column1.indeterminate) || (row0column2.disabled && row0column2.indeterminate && row1column2.disabled && row1column2.indeterminate && row2column2.disabled && !row2column2.indeterminate);
			var diagonalCpu = (row0column0.disabled && row0column0.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column2.disabled && row2column2.indeterminate) || (row0column2.disabled && row0column2.indeterminate && row1column1.disabled && row1column1.indeterminate && row2column0.disabled && row2column0.indeterminate);
			
			return (horizontalPlayer || verticalPlayer || diagonalPlayer || horizontalCpu || verticalCpu || diagonalCpu);
		}
		</script>
		<title>Tic-Tac-Toe</title>
	</head>
	<body>
		<section>
			<label>
				<input id="00" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="01" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="02" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
		</section>
		<section>
			<label>
				<input id="10" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="11" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="12" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
		</section>
		<section>
			<label>
				<input id="20" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="21" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
			<label>
				<input id="22" type="checkbox" />
				<!-- hover -->
				<svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
				</svg>

				<!-- checked -->  
				<svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
					<line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
					<line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
				</svg>
				<svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
					<rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
					<circle cx="70" cy="70" r="60" stroke="rgb(255,255,255)" stroke-width="10" fill="transparent" />
				</svg>
			</label>
		</section>
	</body>
</html>
```

Fiddle: https://codepen.io/anon/pen/MvveYN

----------

