We Keep Coding

Simulate computer's move and update player's turn with score

I wrote a tic-tac-toe game in JavaScript. I want to simulate the computer's turn and also update the score of the player with turn.
How do I write this code? I wrote some code which works with a player X and O but they don't get updated. I want to see which player's turn is and the score for each player
const gameState = {
currentPlayer: 'x',
players: ['x', 'o'],
board: [
[null, null, null],
[null, null, null],
[null, null, null]
]
}
var turn = 1;
var P1Score = 0;
var p2Score = 0;
function checkWinner(player) {
if ($(".row-1 .cell." + player).length === 3 ||
$(".row-2 .cell." + player).length === 3 ||
$(".row-3 .cell." + player).length === 3 ||
$(".col1." + player).length === 3 ||
$(".col2." + player).length === 3 ||
$(".col3." + player).length === 3 ||
($("#1").hasClass(player) &&
$("#5").hasClass(player) &&
$("#9").hasClass(player)) ||
($("#3").hasClass(player) &&
$("#5").hasClass(player) &&
$("#7").hasClass(player))) {
$(".cell ").empty();
$(".cell").removeClass("x");
$(".cell").removeClass("o");
$(".cell").css('background', 'blue')
return true;
}
}
$('.cell').click(function() {
if (gameState.currentPlayer == "x" && !$(this).hasClass("o")) {
$(this).text("x")
$(this).addClass("x")
$(".x").css('background', 'gold')
if (checkWinner("x")) {
alert(`${gameState.currentPlayer}is the winner!.Start a new game`)
} else checkTie()
} else if (!$(this).hasClass("x")) {
$(this).text("o")
$(this).addClass("o")
if (checkWinner("o")) {
alert(`${gameState.currentPlayer}is the winner!. Start a new game`)
} else checkTie()
}
changePlayer();
});
function changePlayer(){
if( gameState.currentPlaye == 'x') {
gameState.currentPlayer = 'o'
} else {
gameState.currentPlayer = 'x'
};
};
function checkTie() {
if ($(".x").length + $(".o").length === 9) {
$(".cell ").empty();
$(".x").removeClass("x");
$(".o").removeClass("o");
alert("Its a tie")
};
};
$('.restart').click(function() {
$(".cell ").empty();
$(".cell").removeClass("x");
$(".cell").removeClass("o");
$(".cell").css('background', 'blue')
});

JavaScript - Moving a character around using WASD but trouble breaking down movement into simpler functions

I'm making a puzzle game where the user uses WASD to move a character up, left, down, right respectively. It works fine at the moment but I was wondering if there was a way to break the code down into more intuitive functions. Below is my code:
function move(e)
{
for (var y = 0; y < mapHeight; y++) {
for (var x = 0; x < mapWidth; x++) {
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
if (map[y][x] == "#" || map[y][x] == "+") {
break;
}
}
var player_x = x;
var player_y = y;
if (e.key == 'w') {
var player_new_x = player_x;
var player_new_y = player_y - 1;
if (moveBox(player_new_x, player_new_y, "up") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 's') {
var player_new_x = player_x;
var player_new_y = player_y + 1;
if (moveBox(player_new_x, player_new_y, "down") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'a') {
var player_new_x = player_x - 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "left") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else if (e.key == 'd') {
var player_new_x = player_x + 1;
var player_new_y = player_y;
if (moveBox(player_new_x, player_new_y, "right") === false) {
return;
}
if (map[player_new_y][player_new_x] == " " ||
map[player_new_y][player_new_x] == ".") {
if (map[player_new_y][player_new_x] == " ") {
map[player_new_y][player_new_x] = "#";
} else if (map[player_new_y][player_new_x] == ".") {
map[player_new_y][player_new_x] = "+";
}
if (map[player_y][player_x] == "#") {
map[player_y][player_x] = " ";
} else if (map[player_y][player_x] == "+") {
map[player_y][player_x] = ".";
}
}
} else {
return;
}
render();
}
Is it possible to make four functions, one for each of the movement keys? Any help would be much appreciated

Yes
It´s possible to do what you want, 4 different functions
But ... you should intercept the events keydown (when the user presses the key) and keyup (when the user releases the key)
As long as the key is "pressed" you do the movement
You can create an object like this
let move = { moveH : 0 , moveV :0 }
When the keydown event is detected for "a" -> {moveH : -1, moveV :0}
"s" -> { moveH :0 , moveV :1 }
"w" -> { moveH :0 , moveV :-1 }
"d" -> { moveH :1 , moveV :0 }
When the keyup event is detected .. for any key -> {moveH :0 , moveV:0 }
Meanwhile
apply the move to the object on the screen
something like
stuff.position = { x : stuff.position.x + move.moveH , y: stuff.position.y + move.moveV }

Javascript Minimax Function Exceedingly Slow

After initiating the tic-tac-toe AI move (it's currently written only to assess if miniMax can successfully run), it takes about 1 - 1.5 minutes to complete in firefox or chrome. Other tic-tac-toe game's minimax functions run on my computer in a fraction of the time.
Logging output has not led closer to the solution. Have verified that all terminal states return a score. Is there an obvious error here?
Codepen
$(document).ready(function() {
var state = {
status: "inProgress",
turn: "human", //can be human or AI
game: 1,
turnSwitch: function() {
if (this.turn == "human") {
return (this.turn = "AI");
} else if (this.turn == "AI") {
return (this.turn = "human");
}
}
};
//AI will use minimx algorithm to determine best possible move
function player(name, symbol) {
this.name = name;
this.symbol = symbol;
}
var human = new player("human", "X");
var AI = new player("AI", "O");
var board = {
board: [],
createBoard: function() {
for (let i = 0; i < 9; i++) {
this.board.push(i);
}
return this.board;
},
resetBoard: function() {
this.board = [];
createBoard();
},
//checks board for terminal state
terminalTest: function() {
for (let i = 0; i < 7; i += 3) {
if (
this.board[i] == this.board[i + 1] &&
this.board[i] == this.board[i + 2]
) {
if (typeof this.board[i] !== "number") {
return this.board[i];
}
}
}
for (let j = 0; j < 3; j++) {
if (
this.board[j] == this.board[j + 3] &&
this.board[j] == this.board[j + 6]
) {
if (typeof this.board[j] !== "number") {
return this.board[j];
}
}
}
if (
(this.board[0] == this.board[4] && this.board[0] == this.board[8]) ||
(this.board[2] == this.board[4] && this.board[2] == this.board[6])
) {
if (typeof this.board[4] !== "number") {
return this.board[4];
}
}
},
//checks for possible moves
findEmptyIndicies: function() {
return this.board.filter(a => typeof a == "number");
}
};
function miniMax(boardCurrent, player) {
//store all possible moves
var availableMoves = boardCurrent.findEmptyIndicies();
console.log("available moves length " + availableMoves.length);
//if terminal state, return score
var terminalCheck = boardCurrent.terminalTest();
if (terminalCheck === "X") {
//console.log(boardCurrent.board + " X wins score: -10")
return human.symbol == "X" ? { score: -10 } : { score: 10 };
} else if (terminalCheck === "O") {
//console.log(boardCurrent.board + " ) wins score: 10")
return human.symbol == "X" ? { score: 10 } : { score: -10 };
} else if (availableMoves.length === 0) {
console.log("availmoves length 0 " + availableMoves.length);
//console.log(boardCurrent.board + " score: 0")
return { score: 0 };
}
//array to store objects containing index and score through each iteration of available moves
var movesArray = [];
for (var i = 0; i < availableMoves.length; i++) {
//create object to store return score from each index branch
var move = {};
move.index = boardCurrent.board[availableMoves[i]];
boardCurrent.board[availableMoves[i]] = player.symbol;
//returned score from leaf node if conditionials at top of function are met
if (player.name == "AI") {
var miniMaxReturn = miniMax(boardCurrent, human);
move.score = miniMaxReturn.score;
console.log("move score " + move.score);
} else {
var miniMaxReturn = miniMax(boardCurrent, AI);
move.score = miniMaxReturn.score;
console.log("move score " + move.score);
}
boardCurrent.board[availableMoves[i]] = move.index;
movesArray.push(move);
}
var bestMove;
console.log("moves array length " + movesArray.length);
if (player.name === "AI") {
let bestScore = -1000;
for (let i = 0; i < movesArray.length; i++) {
if (movesArray[i].score > bestScore) {
bestScore = movesArray[i].score;
bestMove = i;
}
}
} else if (player.name === "human") {
let bestScore = 1000;
for (let i = 0; i < movesArray.length; i++) {
if (movesArray[i].score < bestScore) {
bestScore = movesArray[i].score;
bestMove = i;
}
}
}
return movesArray[bestMove];
}
/**function AIMove() {
console.log("ai move initiated");
var AIPosition = miniMax(board, AI);
//var index = AIposition.index;
//console.log(AIposition);
//$("#" + index).html(AI.symbol);
}**/
$(".cell").click(displayMove);
function displayMove() {
if (state.turn == "human") $(this).html(human.symbol);
board.board[this.id] = human.symbol;
state.turn = "AI";
miniMax(board, AI);
//AIMove();
console.log("AI move complete");
}
$(".cell").click(displayMove);
//on window load create board
board.createBoard();
});

why I'm getting "max call stack size exceeded" error

I'm working on minimax part of a tic tac toe game, and I keep getting "max call stack size exceeded" error. I isolated the bug to line # 110 which is emptyIndexies(board) function. But I don't see anything wrong with the function. I tested it on the console, and the board seems to update when I click on it; however, the computer turn don't work. Here's the code
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var player, sqrId, user, computer, row, col;
const ARR_LENGTH = 9;
$(document).ready(function() {
//1 checkbox event listener
$(".checkBox").click(function() {
if($(this).is(":checked")) {
user = $(this).val();
player = user;
computer = (user == 'X') ? 'O' : 'X';
}
});
//2 square even listener
$(".square").click(function() {
sqrId = $(this).attr("id");
playerMove();
minimax(board);
if(checkWinner(board, turn)) {
alert(turn+" Wins the game!");
resetBoard();
}
if(!checkDraw()) {
alert("It's a draw!");
}
player = (player == user) ? computer : user;
});
//reset board
$(".reset").click(function() {
resetBoard();
})
});
//player move
function playerMove() {
if($("#"+sqrId).text() == "") {
$("#"+sqrId).text(player);
board[sqrId] = player;
console.log(board);
}
else {
alert("Wrong move");
}
}
/* computer AI generate random number between 0 - 8 */
function computerAI() {
var random;
var min = 0, max = 8;
do {
random = Math.floor(Math.random() * (max + min));
}while($("#"+random).text() != "")
$("#"+random).text(computer);
row = getRow();
col = getCol();
board[row][col] = computer;
}
//getting row number
function getRow() {
return Math.floor(sqrId / ARR_LENGTH);
}
//getting col number
function getCol() {
return sqrId % ARR_LENGTH;
}
/* checking for winner */
// winning combinations using the board indexies
function winning(board){
if (
(board[0] == player && board[1] == player && board[2] == player) ||
(board[3] == player && board[4] == player && board[5] == player) ||
(board[6] == player && board[7] == player && board[8] == player) ||
(board[0] == player && board[3] == player && board[6] == player) ||
(board[1] == player && board[4] == player && board[7] == player) ||
(board[2] == player && board[5] == player && board[8] == player) ||
(board[0] == player && board[4] == player && board[8] == player) ||
(board[2] == player && board[4] == player && board[6] == player)
) {
return true;
} else {
return false;
}
}
function resetBoard() {
$(".square").text("");
$(".checkBox").prop("checked", false);
user = "";
turn = "";
computer = "";
for(var i = 0; i < ARR_LENGTH; i++) {
board[i] = "";
}
}
// returns list of the indexes of empty spots on the board
function emptyIndexies(board){
return board.filter(s => s != "O" && s != "X");
}
// the main minimax function
function minimax(newBoard, player){
//available spots
var availSpots = emptyIndexies(newBoard);
// checks for the terminal states such as win, lose, and tie
//and returning a value accordingly
if (winning(newBoard, user)){
return {score:-10};
}
else if (winning(newBoard, computer)){
return {score:10};
}
else if (availSpots.length === 0){
return {score:0};
}
// an array to collect all the objects
var moves = [];
// loop through available spots
for (var i = 0; i < availSpots.length; i++){
//create an object for each and store the index of that spot
var move = {};
move.index = newBoard[availSpots[i]];
// set the empty spot to the current player
newBoard[availSpots[i]] = player;
/*collect the score resulted from calling minimax
on the opponent of the current player*/
if (player == computer){
var result = minimax(newBoard, user);
move.score = result.score;
}
else{
var result = minimax(newBoard, computer);
move.score = result.score;
}
// reset the spot to empty
newBoard[availSpots[i]] = move.index;
// push the object to the array
moves.push(move);
}
// if it is the computer's turn loop over the moves and choose the move with the highest score
var bestMove;
if(player === computer){
var bestScore = -10000;
for(var i = 0; i < moves.length; i++){
if(moves[i].score > bestScore){
bestScore = moves[i].score;
bestMove = i;
}
}
}else{
// else loop over the moves and choose the move with the lowest score
var bestScore = 10000;
for(var i = 0; i < moves.length; i++){
if(moves[i].score < bestScore){
bestScore = moves[i].score;
bestMove = i;
}
}
}
// return the chosen move (object) from the moves array
return moves[bestMove];
}

Why will my Javascript not run in IE

Below is my code. It is supposed to filter a table. It functions great in everything but IE. Can you help?
Perhaps there is a missing tag or something. I've been over it a number of times and could really do with someone's help please!
<script type="text/javascript">
function hasPath(element, cls) {
return (' ' + element.getAttribute('pathway')).indexOf(cls) > -1;
}
function hasLevel(element, cls) {
return (' ' + element.getAttribute('level')).indexOf(cls) > -1;
}
function hasBody(element, cls) {
return (' ' + element.getAttribute('body')).indexOf(cls) > -1;
}
function QualificationSearch() {
var imgdiv = document.getElementById("Chosen_Pathway_img");
var p = document.getElementById("PathwaySelect");
var pathway = p.options[p.selectedIndex].value;
if (pathway == "ALLPATHS") {
pathway = "";
imgdiv.src = "/templates/superb/images/QualChecker/pic_0.png"
}
if (pathway == "ES") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_1.png"
}
if (pathway == "HOUSING") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_2.png"
}
if (pathway == "PLAYWORK") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_3.png"
}
if (pathway == "SC") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_4.png"
}
if (pathway == "YW") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_5.png"
}
var a = document.getElementById("AwardingBodySelect");
var awardingBody = a.options[a.selectedIndex].value;
if (awardingBody == "ALLBODIES") {
awardingBody = "";
}
var levelGroup = document.getElementsByName("LevelGroup");
var chosenLevel = ""
for (var g = 0; g < levelGroup.length; g++) {
if (levelGroup[g].checked) {
chosenLevel += levelGroup[g].value + " ";
}
}
if (chosenLevel == undefined) {
var chosenLevel = "";
} else {
var splitLevel = chosenLevel.split(" ");
var levelA = splitLevel[0];
var levelB = splitLevel[1];
var levelC = splitLevel[2];
var levelD = splitLevel[3];
if (levelA == "") {
levelA = "NOLVL"
}
if (levelB == "") {
levelB = "NOLVL"
}
if (levelC == "") {
levelC = "NOLVL"
}
if (levelD == "") {
levelD = "NOLVL"
}
}
var fil = document.getElementsByName("QList");
for (var i = 0; i < fil.length; i++) {
fil.item(i).style.display = "none";
if ((hasBody(fil.item(i), awardingBody) == true || awardingBody == "") && (hasPath(fil.item(i), pathway) == true || pathway == "") && ((hasLevel(fil.item(i), levelA) == true || hasLevel(fil.item(i), levelB) == true || hasLevel(fil.item(i), levelC) == true || hasLevel(fil.item(i), levelD) == true) || chosenLevel == "")) {
fil.item(i).style.display = "block";
}
}
}
</script>

Check your semicolons. IE is far more strict on that kind of stuff than FF.