157 lines
3.8 KiB
JavaScript
157 lines
3.8 KiB
JavaScript
"use strict"
|
|
let playerTurn = true;
|
|
let computerMoveTimeout = 0;
|
|
|
|
const gameStatus = {
|
|
MORE_MOVES_LEFT: 1,
|
|
HUMAN_WINS: 2,
|
|
COMPUTER_WINS: 3,
|
|
DRAW_GAME: 4
|
|
};
|
|
|
|
window.addEventListener("DOMContentLoaded", domLoaded);
|
|
|
|
function domLoaded() {
|
|
// Setup the click event for the "New game" button
|
|
const newBtn = document.getElementById("newGameButton");
|
|
newBtn.addEventListener("click", newGame);
|
|
|
|
// Create click-event handlers for each game board button
|
|
const buttons = getGameBoardButtons();
|
|
for (let button of buttons) {
|
|
button.addEventListener("click", function () { boardButtonClicked(button); });
|
|
}
|
|
|
|
// Clear the board
|
|
newGame();
|
|
}
|
|
|
|
// Returns an array of 9 <button> elements that make up the game board. The first 3
|
|
// elements are the top row, the next 3 the middle row, and the last 3 the
|
|
// bottom row.
|
|
function getGameBoardButtons() {
|
|
return document.querySelectorAll("#gameBoard > button");
|
|
}
|
|
|
|
function checkForWinner() {
|
|
|
|
const buttons = getGameBoardButtons();
|
|
|
|
// Ways to win
|
|
const possibilities = [
|
|
[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
|
|
[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
|
|
[0, 4, 8], [2, 4, 6] // diagonals
|
|
];
|
|
|
|
// Check for a winner first
|
|
for (let indices of possibilities) {
|
|
if (buttons[indices[0]].innerHTML !== "" &&
|
|
buttons[indices[0]].innerHTML === buttons[indices[1]].innerHTML &&
|
|
buttons[indices[1]].innerHTML === buttons[indices[2]].innerHTML) {
|
|
|
|
// Found a winner
|
|
if (buttons[indices[0]].innerHTML === "X") {
|
|
return gameStatus.HUMAN_WINS;
|
|
}
|
|
else {
|
|
return gameStatus.COMPUTER_WINS;
|
|
}
|
|
}
|
|
}
|
|
|
|
// See if any more moves are left
|
|
let foundEmpty = false;
|
|
for (let button of buttons) {
|
|
if (button.innerHTML !== "X" && button.innerHTML !== "O") {
|
|
return gameStatus.MORE_MOVES_LEFT;
|
|
}
|
|
}
|
|
|
|
// If no winner and no moves left, then it's a draw
|
|
return gameStatus.DRAW_GAME;
|
|
}
|
|
|
|
function newGame() {
|
|
// TODO: Complete the function
|
|
clearTimeout();
|
|
let buttons = document.getElementById("gameBoard").getElementsByTagName("button");
|
|
for (let i = 0; i < buttons.length ; i++){
|
|
buttons[i].innerHTML = "";
|
|
buttons[i].disabled = false;
|
|
buttons[i].classList.remove("x");
|
|
buttons[i].classList.remove("o");
|
|
}
|
|
playerTurn = true;
|
|
document.querySelector("#turnInfo").innerHTML = "Your turn";
|
|
}
|
|
|
|
function boardButtonClicked(button) {
|
|
// TODO: Complete the function
|
|
if (playerTurn){
|
|
button.innerHTML = "X";
|
|
button.classList.add("x");
|
|
button.disabled = true;
|
|
switchTurn();
|
|
}
|
|
}
|
|
|
|
//2 is human
|
|
//3 is computer
|
|
|
|
function switchTurn() {
|
|
// TODO: Complete the function
|
|
let winner = checkForWinner();
|
|
let turnInfo = document.querySelector("#turnInfo");
|
|
|
|
if (winner === 2){
|
|
//human win
|
|
console.log("Player wins!!!");
|
|
turnInfo.innerHTML = "You win!";
|
|
playerTurn = false;
|
|
|
|
}
|
|
else if (winner === 3){
|
|
//computer win
|
|
playerTurn = false;
|
|
turnInfo.innerHTML = "Computer wins!";
|
|
}
|
|
else if (winner === 4){
|
|
playerTurn = false;
|
|
turnInfo.innerHTML = "Draw game";
|
|
}
|
|
else{
|
|
|
|
if (playerTurn){
|
|
|
|
playerTurn = false;
|
|
turnInfo.innerHTML = "Computer's turn";
|
|
let computerMoveTimeout = setTimeout(makeComputerMove, 1000);
|
|
}
|
|
else{
|
|
playerTurn = true;
|
|
turnInfo.innerHTML = "Your turn";
|
|
}
|
|
}
|
|
}
|
|
|
|
function makeComputerMove() {
|
|
// TODO: Complete the function
|
|
//choose random available button sett to O
|
|
let btns = getGameBoardButtons();
|
|
let availableBtns = [];
|
|
|
|
for (let i = 0; i < btns.length; i++){
|
|
if (btns[i].disabled === false){
|
|
availableBtns.push(btns[i]);
|
|
}
|
|
}
|
|
|
|
let btn = availableBtns[Math.floor(Math.random() * availableBtns.length)];
|
|
|
|
btn.innerHTML = "O";
|
|
btn.classList.add("o");
|
|
btn.disabled=true;
|
|
switchTurn();
|
|
}
|