Home  • Programming • JavaScript

Tic Tac Tao games. Banglay bola hoy katagolla.

<!DOCTYPE html>
<html>
	<head>
		<style>
			td {
				border:2px solid green;
				width:80px;
				height:80px;
				text-align:center;
				font-size:60px;
				font-weight:bold;
				color:red;
			}
		</style>
		<script>
			function startGame(){
				document.turn = "X";
				document.winner = null;
				message("It is " + document.turn + "'s turn");
				for (var i = 1; i <= 9; i = i + 1){
					clearValue(i);
				}
			}
			function message(msg){
				document.getElementById("msg1").innerHTML = msg;
			}
			function nextMove(dis){
				if(document.winner != null){
					message(document.turn + " allready won the match")
					}
				else if(dis.innerHTML==""){
					dis.innerHTML = document.turn;
					switchDis()
				}
				else{
					message("It has already fil up")
				}
				
				
			}
			function switchDis(){
				if(checkWiner(document.turn)){
					message("Congratulation ! " + document.turn + " win the match");
					document.winner = document.turn;
				}
				else{
					if(document.turn == "X"){
						document.turn = "O"
					} else {
						document.turn = "X"
					}
					message("It is " + document.turn + "'s turn");
				}
			}
			function checkWiner(move){
				var result = false;
				if (checkRow(1,2,3,move) ||
					checkRow(4,5,6,move) ||
					checkRow(7,8,9,move) ||
					checkRow(1,4,7,move) ||
					checkRow(2,5,8,move) ||
					checkRow(3,6,9,move) ||
					checkRow(1,5,9,move) ||
					checkRow(3,5,7,move) ){
					result = true;
					}
				return result;
					
			}
			function checkRow(a,b,c,move){
				var result = false;
				if((getValue(a)==move)&&(getValue(b)==move)&&(getValue(c)==move)){
					result = true;
				}
				return result;
			}
			function getValue(num){
				return document.getElementById("t"+num).innerHTML;
			}
			function clearValue(num){
				document.getElementById("t"+num).innerHTML = "";
			}
			
		</script>
	</head>
	<body onload="startGame()">
		<div id="msg1"> Message </div>
		<table>
			<tr>
				<td id="t1" onclick="nextMove(this)"></td>
				<td id="t2" onclick="nextMove(this)"></td>
				<td id="t3" onclick="nextMove(this)"></td>
			</tr>
			<tr>
				<td id="t4" onclick="nextMove(this)"></td>
				<td id="t5" onclick="nextMove(this)"></td>
				<td id="t6" onclick="nextMove(this)"></td>
			</tr>
			<tr>
				<td id="t7" onclick="nextMove(this)"></td>
				<td id="t8" onclick="nextMove(this)"></td>
				<td id="t9" onclick="nextMove(this)"></td>
			</tr>
		</table>
		<input type="button" value="Restart game" onclick="startGame()"/>
	</body>
</html>

Share

About Author
Hafizur  Rahamn
Copyright © 2024. Powered by Intellect Software Ltd