So far I’ve only been trying to create the functions for the players turn, the computers turn, and to display the tic tac toe board before the game starts.
I’m not done yet and the functions are working fine, but the issue comes up when I execute compTurn() after playerTurn() with the while loop in the compTurn() function. The window freezes and I cant do anything except rerun the entire code.
I cant find the issue with the whileloop.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Hello World!</h1>
<p>This is your space to practice, get creative, and build your own projects from scratch.</p>
<button onclick="displayTable()">Display Tic Tac Toe Boe</button>
<button onclick="playerTurn()">Player Turn</button>
<button onclick="compTurn()">Comp Turn</button>
<script src="script.js"></script>
</body>
</html>
javascript file
//tic tac toe
const playerUser = 'X'
const playerComp = 'O'
let rowTop = [1, 2, 3]
let rowMid = [4, 5, 6]
let rowLow = [7, 8, 9]
function displayTable(){
console.log(rowTop)
console.log(rowMid)
console.log(rowLow)
}
function playerTurn(){
console.log(`----------------------`)
let change = window.prompt(`Please choose a spot`)
change = Number(change);
/*while(change === NaN){
window.alert('not a number')
change = window.prompt(`Please choose a spot`)
change = Number(change);
}*/
for(let i = 0; i < 3; i++){
if(rowTop[i] === change){
rowTop[i] = playerUser
}
else if(rowMid[i] === change){
rowMid[i] = playerUser
}
else if(rowLow[i] === change){
rowLow[i] = playerUser
}
}
displayTable()
console.log(`----------------------`)
}
function compTurn(){
console.log(`----------------------`)
let compChange = Math.floor(Math.random() * 9) + 1;
for(let a = 0; a < 3; a++){
/*while(rowTop[a] === playerUser || rowMid[a] === playerUser || rowLow[a] === playerUser){
compChange = Math.floor(Math.random() * 9) + 1;
}*/
/*while(rowTop[a] === 'X' || rowMid[a] === 'X' || rowLow[a] === 'X' || rowTop[a] === 'O' || rowMid[a] === 'O' || rowLow[a] === 'O'){
compChange = Math.floor(Math.random() * 9) + 1;
}*/
if(rowTop[a] === compChange){
rowTop[a] = playerComp
}
else if(rowMid[a] === compChange){
rowMid[a] = playerComp
}
else if(rowLow[a] === compChange){
rowLow[a] = playerComp
}
}
displayTable()
console.log(`----------------------`)
}
I tried rewriting the while loops but still had the same problem
/*while(rowTop[a] === playerUser || rowMid[a] === playerUser || rowLow[a] === playerUser){
compChange = Math.floor(Math.random() * 9) + 1;
}*/
/*while(rowTop[a] === 'X' || rowMid[a] === 'X' || rowLow[a] === 'X' || rowTop[a] === 'O' || rowMid[a] === 'O' || rowLow[a] === 'O'){
compChange = Math.floor(Math.random() * 9) + 1;
}*/