tic tac toe javascript – Tic-Tac-Toe is a main 2 player smart game in which the players fill up 9 blocks empty rectangles type in a basic table with either an X player or an O player when it is their turn. In this article we take a look at creating an advanced Pure JavaScript tic tac toe game using CSS and HTML.
tic tac toe javascript – Code a Tic Tac Toe Game With JavaScript
We needs to track any clicks that happen on our units of Tic Tac Toe are built using nine div tags. All the div tags are grouped into a single HTML div tag with data-unit-index board with tic tac toe javascript. also you can read : 3 Best Online Games For Your Phone
Tic Tac Toe HTML Code
index.html
Tic Tac Toe
Tic Tac Toe JavaScript Code : tic tac toe javascript
main.js
const positionDisplay = document.querySelector(".activity--position"); let ticTacCurrent = true; let ActiveUser = "X"; let ticTacPhase = ["", "", "", "", "", "", "", "", ""]; const winningMessage = () => `Player ${ActiveUser} has won!`; const drawMessage = () => `Game ended in a draw!`; const ActiveUserTurn = () => `It's ${ActiveUser}'s turn`; positionDisplay.innerHTML = ActiveUserTurn(); const winningConditions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; function handleUnitPlayed(clickedUnit, clickedUnitIndex) { ticTacPhase[clickedUnitIndex] = ActiveUser; clickedUnit.innerHTML = ActiveUser; } function handlePlayerChange() { ActiveUser = ActiveUser === "X" ? "O" : "X"; positionDisplay.innerHTML = ActiveUserTurn(); } function handleResultValidation() { let roundWon = false; for (let i = 0; i <= 7; i++) { const winCondition = winningConditions[i]; let a = ticTacPhase[winCondition[0]]; let b = ticTacPhase[winCondition[1]]; let c = ticTacPhase[winCondition[2]]; if (a === "" || b === "" || c === "") { continue; } if (a === b && b === c) { roundWon = true; break; } } if (roundWon) { positionDisplay.innerHTML = winningMessage(); ticTacCurrent = false; return; } let roundDraw = !ticTacPhase.includes(""); if (roundDraw) { positionDisplay.innerHTML = drawMessage(); ticTacCurrent = false; return; } handlePlayerChange(); } function handleUnitClick(clickedUnitEvent) { const clickedUnit = clickedUnitEvent.target; const clickedUnitIndex = parseInt( clickedUnit.getAttribute("data-unit-index") ); if (ticTacPhase[clickedUnitIndex] !== "" || !ticTacCurrent) { return; } handleUnitPlayed(clickedUnit, clickedUnitIndex); handleResultValidation(); } function handleRenewActivity() { ticTacCurrent = true; ActiveUser = "X"; ticTacPhase = ["", "", "", "", "", "", "", "", ""]; positionDisplay.innerHTML = ActiveUserTurn(); document.querySelectorAll(".unit").forEach((unit) => (unit.innerHTML = "")); } document .querySelectorAll(".unit") .forEach((unit) => unit.addEventListener("click", handleUnitClick)); document .querySelector(".activity--renew") .addEventListener("click", handleRenewActivity);
Tic Tac Toe CSS Code
main.css
body { font-family: "Arial", sans-serif; } section { text-align: center; } .activity--title { font-size: 100px; color: #d7a62f; margin: 10px auto; } .activity--container { display: grid; grid-template-columns: repeat(3, auto); width: 306px; margin: 10px auto; background-color: #11213a; color: #04c0b2; } .unit { font-family: "Permanent Marker", cursive; width: 100px; height: 100px; box-shadow: 2px 2px 2px 2px #ecd7ba; border: 2px solid #ecd7ba; cursor: pointer; line-height: 100px; font-size: 60px; } .activity--position { font-size: 50px; color: #d7a62f; margin: 20px auto; } .activity--renew { background-color: #f7e4ac; width: 200px; height: 50px; font-size: 25px; color: #5586e2; box-shadow: 2px 2px 2px 2px #d86c23; border: 2px solid #d86c23; cursor: pointer; }
Full Source Code : Simple Tic-Tac-Toe JavaScript game for beginners
tic tac toe javascript game for beginners using HTML, CSS.
index.html
tic tac toe javascript - Pure and Simple - Tic Tac Toe with Javascript - www.pakainfo.com Tic Tac Toe
I hope you get an idea about tic tac toe javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.