Learning web development can be tough and boring, but it doesn’t have to be. In this video we take a look at creating an advanced JavaScript tic tac toe game. This is a great project for anyone that wants to create a fun project while learning advanced JavaScript and CSS concepts.
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/JavaScript-Tic-Tac-Toe
CodePen Code: https://codepen.io/WebDevSimplified/pen/MWYGogW
JavaScript Defer Attribute Tutorial: https://youtu.be/BMuFBYw91UQ
Why I Do Not Use Class Selectors In JS Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript
CSS Variables Tutorial: https://youtu.be/oZPR_78wCnY
Array Destructoring Tutorial: https://youtu.be/NIq3qLaHCIs
🧠 Concepts Covered:
– Advanced CSS Hover Effects
– Advanced JS Game Logic
– CSS Not Selector
– CSS Shape Building
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#TicTacToe #WDS #JavaScript
Original source
26 responses to “Build Tic Tac Toe With JavaScript – Tutorial”
Oh my god Array.prototype.every() and classList.contains() are freaking lifesavers.. I got lots of code on old projects to change haha
what does algorithms need to know to make AL ?
Very Amazing tutorial. I'm asking me how do you get this ideas the way you are programming. I mean If I see your tutorial I'm understanding what you are doing but by my self I would never write such code without getting inspired with tutorials like that. So I think you have to be some kind of hyper intelligent to develope those applications without watching tutorials. Or is there any trick ?
Wow this is amazing!
Hey,
don't you have to write const variable in uppercase in Javascript?
In Java and PHP thats the case
Your use of CSS in this video is that of a master. Kudos to you sir.
Great video and a fun project that I want to try!
Hi Guys.
What extensions do I need for VS Code to work yours? Because when i start VS i have no autofill at all.
I followed along and created the game but as soon as i finished i wasn't able figure out how & why i created XD
Nooooooo. 🙁 I want to know how to redesign this exact game but have multiple mode options. (4×4, 5×5, etc) HARDCODING IS NOT BEST PRACTICES.
Great video, Kyle!! I even upgraded it so I can play with a computer, but still not that good player.
Hi Kyle, thank you for all those great videos like this one! I feel much more self-confident in coding JS after I started to watch your videos. You're an excellent teacher!
"our exes and our hoes"
Addeventlistener not working ,plz help
Great Video. My question is why the click event listener has to be removed in the startGame() since the listener is set up with once: true?
The real question is how do you make an NxN Tic Tac Toe game with dynamic win conditions?
Love your videos. Extremely clear and thorough. You're my go to reference when I get stuck at work and the answer isn't on Stack Overflow.
Bro, beautiful Video
You are width your mind just on the next level
I would build this seite much more harder xD gg
this tutorial is awesome ….. but as I'm finding out, as a beginner, js on the front end is pretty useless (in terms of adding anything of practical value to a web page)… js on the server side is where it has become most useful these days… if js hadn't transitioned to back end and mobile apps, it probably would would've become obsolete by now… !
First comment after I become a big fan of Kyle. Really good job for each video. Thx a lot for ur great job !
Looks like a non react version of the react tutorial
there is no error in this code. why…………..❓❓❓❓❓
func();
function func() {
console.log(';)');
}
why you create functions that having only one line of code…..🤔🤔🤔🤔
sir please make part 2 in which add functionality for one player also…………………..
sir thank u so much
wow amazing tutorial…. i love this channel
I want to make a Dots and Bones game. How would you go about structuring it?
We can make divs and show only corner points. Whenever someone selects two corners we add a border there.
What do you think?