tic tac toe game (js)

0
votes

i'm making a tic tac toe game using html/css/js and i have a problem with my tie option, i have 2 problems with it, 1: if one of the players win in the last turn it still shows tie 2: even if it is a tie in the end and i keep pressing the buttons the 'X' changes to 'O' which it shouldnt. there is a move board which updates also by the tie value (but its not relevent to my problem). how can i fix those issues?

my html:

<body onload="startGame();">
    <h1>Tic tac toe</h1>
    <div id="message"></div>
      <table>
        <tr>
            <td id="square1" class ="square" onclick = "nextMove(this);"></td>
            <td id="square2" class ="square" onclick = "nextMove(this);"></td>
            <td id="square3" class ="square" onclick = "nextMove(this);"></td>
        </tr>   
        <tr>
            <td id="square4" class ="square" onclick = "nextMove(this);"></td>
            <td id="square5" class ="square" onclick = "nextMove(this);"></td>
            <td id="square6" class ="square" onclick = "nextMove(this);"></td>
        </tr>   
        <tr>
            <td id="square7" class ="square" onclick = "nextMove(this);"></td>
            <td id="square8" class ="square" onclick = "nextMove(this);"></td>
            <td id="square9" class ="square" onclick = "nextMove(this);"></td>
        </tr>   

      </table>
    <div id="moves">
        <p id = "one"></p>
        <p id = "two"></p>
        <p id = "tree"></p>
        <p id = "four"></p>
        <p id = "five"></p>
        <p id = "six"></p>
        <p id = "seven"></p>
        <p id = "eight"></p>
        <p id = "nine"></p>
    </div>

and js:

var tie = 0;
var move = 0;
var  lastMove;
var oneOne = false;
function startGame(){
    for(var i =1; i < 10 ; i++){ //clears all squares
        clearBox(i)
    }
    clearMoves(); //clears move board
    tie=0;  
    move = 0;
    document.turn = "X";  //50% that x will start (explanation on the next line)

    if(Math.random() < 0.5){ //50% that o will start
        document.turn = "O";
    }
    document.winner = null;
    setMessage(document.turn + " gets to start");
}

function setMessage(msg){
        document.getElementById("message").innerText = msg;

}

function setMoves(num){
        if(num == 1)    
            document.getElementById("one").innerText = "player " + document.turn + " selected " + lastMove + " tie: " + tie+ "one"+ oneOne;
        else if (num == 2)
            document.getElementById("two").innerText = "player " + document.turn + " selected " + lastMove+ " tie: " + tie+"one"+ oneOne;
        else if (num == 3)
            document.getElementById("tree").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 4)
            document.getElementById("four").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 5)
            document.getElementById("five").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 6)
            document.getElementById("six").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 7)
            document.getElementById("seven").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 8)
            document.getElementById("eight").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;
        else if (num == 9 && document.winner != null)
            document.getElementById("nine").innerText = "player " + document.turn + " selected " + lastMove+ "tie:" + tie+"one"+ oneOne;


}

function clearMoves()  //clear all fields
{   
        document.getElementById("one").innerText = "";
        document.getElementById("two").innerText = "";
        document.getElementById("tree").innerText = "";
        document.getElementById("four").innerText = "";
        document.getElementById("five").innerText = "";
        document.getElementById("six").innerText = "";
        document.getElementById("seven").innerText = "";
        document.getElementById("eight").innerText = "";
        document.getElementById("nine").innerText = "";
}

function nextMove(square){
    move++;
    if(square.innerText == "" && document.winner == null){
        tie++;
    }
    lastMove = square.id;

    if (document.winner == null && tie > 8){
        setMessage("its a tie");
        square.innerText = document.turn;
    }
    else if(document.winner != null){ //game over someone won
        setMessage(document.winner + " already won the game, please start over");
    }
    else if(square.innerText == ""){   //square not used
        square.innerText = document.turn;
        switchTurn();
    }else{
        setMessage("That square is already used!");
    }
    if (document.winner == null && move < 10){ //update move board
        setMoves(tie);
    }

}


function switchTurn(){
    if(tie == 9){
        setMessage("tie");
    }
    else if(checkForWinner(document.turn)){
        setMessage(document.turn + " Won!!!");
        document.winner = document.turn;
    }
    else if(document.turn == "X" && tie != 9){
        document.turn = "O";
        setMessage("its " + document.turn + " turn");
    }else{
        document.turn = "X";
        setMessage("its " + document.turn + " turn");
    }

}

function clearBox(number){
    document.getElementById("square" + number).innerText = "";
}

function checkForWinner(move){
    var result = false;
    if(checkRow(1,2,3,move) || checkRow(4,5,6,move) || checkRow(7,8,9,move) //rows
        ||  checkRow(1,4,7,move) || checkRow(2,5,8,move) || checkRow(3,6,9,move) //cols
        ||  checkRow(1,5,9,move) || checkRow(3,5,7,move)){ //diagonal
        result = true;
    }
    return result;
}

function checkRow(a, b, c, move){
    var result = false;
    if(getBox(a) == move && getBox(b) == move && getBox(c) == move)
        result = true;
    return result;

}

function getBox(number){
    return document.getElementById("square" + number).innerText;
}

thanks!!!

2
javascripthtmlfunctionlogic

2 Answers

2
votes

A simple solution would be to return on these checks. If that first if conditional consists of a completed action, return inside of it. Otherwise you will continue to do checks.

Before a move is made, you should check to see if the game is over and return if so. That should solve problems for

Even if it is a tie in the end and i keep pressing the buttons the 'X' changes to 'O' which it shouldn't..

The overall check before moving should help prevent a lot of issues and javascript requires strict returns to exit.

-1
votes

var picArray=["circle.png","cross.png"]; // for storing images of cross 
 and circle
var winArray = 
 "123","132","213","231","321","312","456","465","546","564","645","654","789","798","897","879","987","978","147","174","417","471","714","741","258","285","825","852","528","582","396","369","639","693","936","963","159","195","915","951","591","519","357","375","537","573","735","753"];
// stores all possible test cases on which the user wins
var clicked_button_zero=[]; // stores the numerical ID of the image 
button of zero button
var clicked_button_one=[]; //stores the numerical ID of the image button 
having of cross button
var clicked=[]; //stores which places are already clicked
var i=1;
function change(id) //called upon the clicking of the buttons
{
	if($.inArray(id,clicked)==-1 ) //checks whether it has been clicked 
or not
	{
 //If not clicked then it enters this block
		if(i==0)
		{
			i=1;
			var temp=id.substr(3,4);
			clicked_button_one.push(temp);
			clicked.push(id);
		}
		else if(i==1)
		{
			i=0;
			var temp=id.substr(3,4);
			clicked_button_zero.push(temp);
			clicked.push(id);
		}
		$("#"+id).attr("src",picArray[i]);
		$("#"+id).attr("value",i);						
		checkArray();
	}
	else 
	{
//If clicked then it enters this block
			alert("This has been marked");
	}
	}
	
function checkArray() //for checking whether it is win or loss
{
	var subset_zero = combination(clicked_button_zero);
    //array for storing all combinations of the values present having 
     value 0
	var subset_one=combination(clicked_button_one);
    //array for storing all combinations of the values present having 
     value 1
	var flag1=check(subset_zero); 
	var flag2=check(subset_one);
	if(flag1==1)
	{
		alert("0 wins");
		location.reload(); //reloads the webpage
	}
	if(flag2==1)
	{
		alert("1 wins");
		location.reload();
	}
}
function check(arr) //it checks the array 'arr' against 'winArray'
{
	var i;
	for(i=0;i<arr.length;i++)
	{
		if($.inArray(arr[i],winArray)!=-1)
		{
			return 1;
		}
	}
}

function combination (arr) //returns all possible combination of values
{

  let i, j, temp
  let result = []
  let arrLen = arr.length
  let power = Math.pow
  let combinations = power(2, arrLen)
			  
  for (i = 0; i < combinations;  i++) {
    temp = ''
    
    for (j = 0; j < arrLen; j++) {
      if ((i & power(2, j))) {
        temp += arr[j]
      }
    }
    result.push(temp)
  }
  return result;
}
button{
	width:200px;
	border-radius: 20px;
	height:50px;
}
img{
	height:220px;
	width:220px;
}
<html>
<head>
	<title>
		Tic Tac Toe
	</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div>
		<center>
		<table>
			<tr>
				<td><img src="question.png" id="img1" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img2" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img3" onclick="change(this.id)"></td>
			</tr>
			<tr>
				<td><img src="question.png" id="img4" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img5" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img6" onclick="change(this.id)"></td>
			</tr>
			<tr>
				<td><img src="question.png" id="img7" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img8" onclick="change(this.id)"></td>
				<td><img src="question.png" id="img9" onclick="change(this.id)"></td>
			</tr>

		</table>
		
		<button onclick="location.reload()">Reset</button>
	</center>
	</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</html>