JSFiddle - React, Tailwind, and code Playground
JavaScript
"use strict";
// this is nice, effective trick:
// With "use strict" on the browser will complain if we use a variable
// before defining it. Here we define some variables. Throughout your
// program you MUST use these variables (instead of re-typing the image names
// This way if you make a typo the browser will complain about an undefined
// variable (unlike making a typo in the image name, which will produce a much
// harder to find error)
var PLAYER_X = "Images/x.gif";
var PLAYER_O = "Images/o.gif";
var BLANK = "Images/blank.gif";
var currentPlayer = PLAYER_X;
var gameInProgress = true;
// Thess will be the array that the represents the 'board'
// There's one array for the top row, one for the middle row, and one for the bottom
var topRow = [BLANK, BLANK, BLANK]; // each element contains either PLAYER_X, PLAYER_O, or BLANK
var middleRow = [BLANK, BLANK, BLANK]; // ditto
var bottomRow = [BLANK, BLANK, BLANK]; // also ditto
function updateDisplay(){
if(currentPlayer == PLAYER_X ) {
$("#currentPlayer").html("It is Player_X's turn");
} else {
$("#currentPlayer").html("It is Player_O's turn");
}
}
function renderBoard() {
var col;
var eltId;
for( col = 0; col < 3; col++) {
// top row:
eltId = "#0_" + col;
if( topRow[col] == BLANK) {
topRow[col] = $(eltId).attr('src', BLANK);
} else if (topRow[col] == PLAYER_X) {
topRow[col] = $(eltId).attr('src', PLAYER_X);
} else if (topRow[col] == PLAYER_O) {
topRow[col] = $(eltId).attr('src', PLAYER_O);
}
}
for( col = 0; col < 3; col++) {
// middle row:
eltId = "#1_" + col;
if( middleRow[col] == BLANK) {
middleRow[col] = $(eltId).attr('src', BLANK);
} else if (middleRow[col] == PLAYER_X) {
middleRow[col] = $(eltId).attr('src', PLAYER_X);
} else if (middleRow[col] == PLAYER_O) {
...