A game of TicTacToe written in JavaScript ⭕

Показать описание

#JavaScript #TicTacToe #game

JavaScript TicTacToe game practice tutorial example explained

Bro Code

Рекомендации по теме

Комментарии

const cells =
const statusText =
const restartBtn =
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let options = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let running = false;

initializeGame();

function initializeGame(){
cells.forEach(cell => cell.addEventListener("click", cellClicked));
restartBtn.addEventListener("click", restartGame);
statusText.textContent = `${currentPlayer}'s turn`;
running = true;
}
function cellClicked(){
const cellIndex =

if(options[cellIndex] != "" || !running){
return;
}

updateCell(this, cellIndex);
checkWinner();
}
function updateCell(cell, index){
options[index] = currentPlayer;
cell.textContent = currentPlayer;
}
function changePlayer(){
currentPlayer = (currentPlayer == "X") ? "O" : "X";
statusText.textContent = `${currentPlayer}'s turn`;
}
function checkWinner(){
let roundWon = false;

for(let i = 0; i < winConditions.length; i++){
const condition = winConditions[i];
const cellA = options[condition[0]];
const cellB = options[condition[1]];
const cellC = options[condition[2]];

if(cellA == "" || cellB == "" || cellC == ""){
continue;
}
if(cellA == cellB && cellB == cellC){
roundWon = true;
break;
}
}

if(roundWon){
statusText.textContent = `${currentPlayer} wins!`;
running = false;
}
else if(!options.includes("")){
statusText.textContent = `Draw!`;
running = false;
}
else{
changePlayer();
}
}
function restartGame(){
currentPlayer = "X";
options = ["", "", "", "", "", "", "", "", ""];
statusText.textContent = `${currentPlayer}'s turn`;
cells.forEach(cell => cell.textContent = "");
running = true;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameContainer">
<h1>Tic Tac Toe</h1>
<div id="cellContainer">
<div cellIndex="0" class="cell"></div>
<div cellIndex="1" class="cell"></div>
<div cellIndex="2" class="cell"></div>
<div cellIndex="3" class="cell"></div>
<div cellIndex="4" class="cell"></div>
<div cellIndex="5" class="cell"></div>
<div cellIndex="6" class="cell"></div>
<div cellIndex="7" class="cell"></div>
<div cellIndex="8" class="cell"></div>
</div>
<h2 id="statusText"></h2>
<button
</div>
<script src="index.js"></script>
</body>
</html>

.cell{
width: 75px;
height: 75px;
border: 2px solid;
box-shadow: 0 0 0 2px;
line-height: 75px;
font-size: 50px;
cursor: pointer;
}
#gameContainer{
font-family: "Permanent Marker", cursive;
text-align: center;
}
#cellContainer{
display: grid;
grid-template-columns: repeat(3, auto);
width: 225px;
margin: auto;
}

BroCodez

i'm learning to code and built this game during the last few days but my solution it's so clumsy compared to yours.. thank you for sharing this, is very helpful to learn, your solution is amazing!

eumm

You have saved my life made understanding Javascript a bit easier for me

pedrocossio

Thank you for including the code in the comment! I had my HTML filed messed up. Thank you for sharing your project with us.

ShimmerBodyCream

I have learned a lot in a few minutes. Thank you!

richardchimama

unbelievable code and your way of teaching...Thank you bro

NandhiniJawahar

That was very clean and understandable. Thanks a lot😍

navidnasr

Thanx for your simplicity, tried to do this game using another video was difficult, too much code lines
Thank you for including the code in the comment😍

samoraselim

BROOO thankyou so much, this really helped and the tutorial was really easy to use as well :)

santiagovalle

Yo Bro Code! Thanks for this play along video. I learned some new things along the way!

frendsies

Awesome content! You couldn't have written this code any better.

TyronneRatcliff

since we are not saving anything in any kind of storage we can just just do this function restartGame(){
location.reload();
}; to reset the game. im pretty new to js so maybe theres a good reason bro didnt do this but it does work.

charlestiffany

bro your videos help so much. thank 10/10

qqszad

please upload a Zero to hero video for wordpress bro ! the way of your teaching was just amazing accept my request bro 😫🙏.

ashwinr

08:35 is hoisting of the 1st function.

yashu_vocalist

easy loved it except the last part thats the wining game foreach with some and every method can run through the global variable winning condition, otherwise loved it, wish u implemented some Ai too, amazing and very clean code , can u talk about writing clean code?

abdullahjama

I love the video but I am having so much problems in my code, I am copying like you do but I dont get the same results when I go to live server...

Xan_Mas

Thank you for the learning experience! Is there a way to change the X and O's to an image? Would I have to stare the image in a variable? Thank you again!

CoriePrater

after the end of the match, cant we add any other tag for sharing our result with others in social media apps?

saiyyaaratrading

please why did you pass in this and cellIndex as arguments in the updateCell() function under the cellClicked() function

🙂

ehidaniel

A game of TicTacToe written in JavaScript ⭕

A game of TicTacToe written in JavaScript ⭕

A game of TicTacToe written in JavaScript #JavaScript #game #TicTacToe#JavaScript #TicTacToe #game

A game of tictactoe written in javascript

C Tic Tac Toe game ⭕

Tic Tac Toe Java Game - Build a Tic Tac Toe Game in 30 Minutes #101

How to Play Tic Tac Toe

TicTacToe Game written in PHP Language

Minimax Algorithm for Tic Tac Toe (Coding Challenge 154)

Java tic tac toe game ⭕

ESL Games (GWG) #39 Writing Tic Tac Toe

ChatGPT Writing Python Code - Create a Tic Tac Toe Game

PREDICT ANY GAME of Tic Tac Toe!!!

Build Your Own Tic-Tac-Toe Game in MIT App Inventor – No Coding Needed!

Coding a game in Python #Shorts #Python

ESL Games (GWG) #77 Stickyball Bingo and Tic Tac Toe

How To Code Tic Tac Toe With Python | Programming Tutorial For Beginners

How to Never Lose at Tic Tac Toe

Tic Tac Toe game written in C language using Mac OSX

Satisfying ascii animation with C 😉 - The doughnut shaped code that generates a spinning 🍩

Create a simple tic tac toe game using HTML, CSS, JavaScript

Building Interactive Tic Tac Toe game With Java JTable(Hand written code)

How To Make a Tic Tac Toe Game in C++ - QUICK AND EASY TUTORIAL

Infinite chocolate trick explained

🔴 Build a Tic, Tac, Toe Game using JavaScript | Day 3