Create a simple tic tac toe game using HTML, CSS, JavaScript
VloĆŸit
- Äas pĆidĂĄn 22. 05. 2021
- In today's video, I'll show you how you can create a simple tic-tac-toe game using HTML, CSS, and JavaScript.
Please leave feedback in the comment section about this new style of video, I hope you will enjoy this kind of content.
You can request video tutorials, and ask for explanation videos of your choice in the comment section.
Source code: github.com/javascriptacademy-...
Happy hacking!
Where you can find me?
đ Links:
* đș Support free education and buy me a beer: ko-fi.com/adamnagy
* đŹ Discord: / discord
* đ§ Newsletter: www.getrevue.co/profile/dev_a...
* âïž Blog: dev.to/javascriptacademy
* đŠ Twitter: / dev_adamnagy
* đ· Instagram: / javascriptacademy
New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: đ„
czcams.com/video/xWdkt6KSirw/video.html
Thanks for this, but it'd be better to watch, if you'd create the game keeping the browser preview side-by-side.
You should time to time show the page/screen to have an idea of step by step progress of the game screen. This sustain the interest of beginners like me.
thank you, but i kinda prefer you writing the code, helps us grasp better
Thank you so much! I needed this for a project and now I understand everything!
Awesome news! Iâm glad you like it and found it useful :)
Thanku sr it is running now its my first project hurrah!!đ„łđ„łAND I also design snake game today it is also running smoothly đ„łđ„ł ur video motivated me to engross in the things like this.....đđ»
Itâs late where iâm currently at but iâm 100% doing this tomorrow after work! Thank you for the content, keep it up.
Kind regards.
Itâs late here too, but I was so excited to share it with you all, I couldnât wait more so shared it asap :).
I hope it will make you happy tomorrow :)
Best wishes
Did it work? Because I tried but for some reason it didnât work like idk what I didđđ„Č
@@ale4461 just completed everything buh mine ainât running/working toođ€
Try to clone the repository and compare it with your own code. You can find the link in the description of the video :) it must be a typo in your code . Have a nice day!
I dont have enough words to thank you for this sir....
Nice tutorial! Looks like a fun game to make :)
Thanks for the kind words. Iâm glad you like it.
unnaku special ah sollanuma? loosu
I'm your 1000th subscriber!
Congrats for 1k subs....
Welcome to the academy my friend! Thanks for choosing to subcribe :)
This is the best explanation and the easiest implementation I've ever seen for a tic tac toe game
Thanks for the kind words. Iâm glad you found it useful. đ
Then you havent seen much! This is so extended!! Not the Best!
When I click to the board there is nothing happens
Thanks so much....the explanation was great... I also added some HTML imojis
Awesome! Youâre welcome đ
Hello, you should showcase the results time to time, while building something
For those having issues, check for typos and use the debug console. I do believe that this can done in an even simpler manor.
vaya mudu da
I tried this on sololearn(mobile app that has courses and a code playground) but the player change dont work. Everytime i click on a tile, only X displays until X wins. Also, the display for the turns dont work also. Just Player X turn. Apart from that problem, it seems to be working, even the reset button works.
Hi! Iâm having trouble with the buttons not working. There isnât anything in the console and I checked for typos. I did notice something call quirks mode though. Should I disable it?
This format is much better than coding in front â»
wow your video is very appriciaement
please help me. I tried to rewrite this code, but my const announce = (type) => {
} is having a swiggle error. It says it is expecting a `default case` within the whole body. How can I fix this??
Why did you add the js link at the top of the index.html instead of at the bottom?
i have a problem the player donÂŽt change when i click for the first time
very excited for a shorter video for tic tac toe but does this make it so your playing by yourself? & im not sure why my X or O wont show up when i click the tiles. I followed everything and watched the video 2x to make sure but still not working.
Thank you for this project
Youâre welcome!
Awesome Tutorial... Thanks..
Iâm glad that you found it helpful :)
You Are Awsome Manđ
Thanks Dibyaraj !
hello just found this and i'm planning to use this source code but i have a question. how can i save the png images? I don't know how? thank you
I tried this on sololearn(mobile app that has courses and a code playground) but the player change dont work. Everytime i click on a tile, only X displays until X wins. Also, the display for the turns dont work also. Just Player X turn. Can anybody help?
Great video.
Thank You Soooooooooooooooo Much
When I click on one of the grid squares it does nothing can someone please help me
great job bro
Can I modify it so that I can count the number of wins for a person until they refresh the page
Hey! i Wonder what is difference between Visual code and Visual studio! When script this with visual studio i can play but, Visual studio I can *not* ! Do know the answer ? And i have to thanks for clear instruction :)
thank you bro
why does he use section for button instead of div?
thank you
How do you put it in a website
Thanks. You're really good at clarifying the concepts. I followed everything and built mine too.
Where is the code for isValidAction at???
It's probably a stupid question but I am a new one and I wonder how do you manage to start the actual game because I have the javascript/html/css files but I can't run them in order to test it out?
Thereâs no thing like a stupid questionđ if everything is linked correctly inside the files. You should only need to open the index.html file with the browser of your choice.
That was wonderful video. Can you plz make a game where bomb falls ramdom on the ground and character have to Dodge â„ïžâ„ïž
using html CSS and java
Which program is it?
i have it but i cant click and play
Mine wont place x or o
thank you so much Mr JavaScript Academy! It helped me so so much!
-XOXO 13 year old girl
When the game is won/is a tie i dont want the text saying player x's turn for example, how would i change that in the javascript?
can i copy and paste it
so the const winningConditions are like conditionals that will show all the possible ways to win.
Exactly :)
@@JsAcademyOfficial Thank you.
Buen vĂŹdeo!
Wat is the software?
Nice work and explanation, thank you.
Could someone please explain me, where does the "index" parameter get it value from?
If you are asking the line
tiles.forEach( (tile, index) =>{ ................
forEach is a method executes a function for each array element. You can rewrite it as
tiles.forEach( (boom, bang) => {.......... or whatever you like. It does not get the parameter from somewhere else. The first parameter here boom/tile executes on the element. Second one bang/index starts from the 0 index and gives you the index number.
From MDN:
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(index));
// expected output: "0"
// expected output: "1"
// expected output: "2"
And in case I got your question wrong, he explains how we get the value from clicked action at 06:00
@@sukocan1 Thank you!
I write the whole code but it didn't work đą
Hi what program did you use to make the game?
vscode you're welcome prob wont see this tho
Thanks sir for making this project but i have a problem that when i am trying to click at grid it is not clicking
You could try to see if lines 119~124 are written correctly, as those pieces of code are the ones that dictate what should happen if you click on the screen.
Double checking for capitalization errors throughout your Javascript could also help as well! Mine wasn't working the first time so I had to go in and recheck each line for errors, and that fixed my issues.
Hi! What is the right method to learn the concepts that are required to know to code? I mean should i just copy your code and try to understand it? because i could not figure out how to write the code myself for this simple game
Same here buddy i was thinking of some convoluted if else statement hell.
Whatâs worked well for me is to watch it once with increased speed, then watch it again while stopping the video and writing each line of code. Just absorb some of the knowledge. Then try to thing if something I can add or change.
hello sir i am use this game in my website
1:50
I wrote what you specified in vs code, chrome does not work, javascript file does not work
Did you linked the javascript file if not then here is the code:
Hello! I really loved your tutorial and I followed it step by step, but I have a problem: when opening the index.html file to try out the game I click on the tiles and nothing happens. What am I missing or doing wrong?
Check if u linked your "JavaScript" file in your"HTML file"
How can we open this in separate page on website so it runs automatically like playing online without code?
Hi!
I'm not sure I understand what you mean. Do you mean that is this code available in online tools like codepen?
@@JsAcademyOfficial ya
here is your link :)
Hope it helps :) I'll include it in future videos :)
codesandbox.io/s/github/javascriptacademy-stash/tic-tac-toe
@@JsAcademyOfficial thank you sir
When I click on game nothing is happening.It doesn't want to show X or 0 on table-What am I supposed to do?
Hi Kristina!
Must probably a typo or something with the event handlers. Please take a look at the source code in the description.
Happy hacking! đ
I Think You Need to Make A Single Player
Keep making video please
Thanks, I try my best to bring content as soon as possible. Iâm glad you find it useful
which software did you use
If you mean the code editor it is visual studio code. The browser is Brave
It isn't working there a problem at tile.classlist.add('player$(currentPlayer)');
If i click on the boxes the x or o are not occurring can you tell what is the problem
Sir output show player x turn and reset..
I click reset bt it's not work
Make sure you not have a typo in the classnames both in js and html
I followed everything but for some reason the board will not show up for me, do you know why?
For me it was because I had in all instead of in the index.html
Im getting errors but dont know why
not working
Kindly assist what could be the problem mine ainât working did the coding right buh the Xâs and Oâs not appearing when I click đ€
Same here nothing happened only empty box
I changed background color first after correction of js code then it works..
Sir I am using vs code live server hut it is not working sir, when I am clicking on it , It is not responding
Hi POU!
Must be a typo in the event handlers or the html ids. Please refer to the example code in the description! Cheers
Which VS Code theme do you use?
Hi!
It is One monokai theme
marketplace.visualstudio.com/items?itemName=azemoh.one-monokai
Also I use material Icon theme
@@JsAcademyOfficial by The way, very nice code! It is clean and explained very well. Now I'm trying to do this little project in Vue.js. Thank you
Thanks for the feedback Luigi!
Good luck for your VueJs implementation! đ
Create a Detailed Version
what ide you using?
It is vscode with oneMonokai colr theme extension and material icons pack
You can get it from here:
code.visualstudio.com
Happy coding!
what is this app that you are using to code?
VScode
I code all the things right but when I run the code it shows in chrome localhost:8080 refused to connect
Pls tell me what to do I need this to run
Now its fixed but I cant play game nothing is appears in box
Mine does the same thing, how dod you get it to work?
@@cesairecivil3227 I deleted vscode file from the folder and then run again it works..
When this local host error occurs it do the same thing..and after that I there are some mistakes in my js code thrn I rechecked it. Now it is completely working.
I have taken the source code but still its not working
Here is the codesandbox of the repository and it is workind 100%.
See what is different in your code:
codesandbox.io/embed/pensive-clarke-kvccp?codemirror=1
Well, how to keep the record for scores ?
Iâd add an object with playerX and playerO fields and itit it with 0. And if a player wins increment the corresponding valu
@@JsAcademyOfficial thanks for the reply !â€ïž
Thankful for the video but my code is same as yours and it's still not working
Hi!
There must be a typo in your implementation. Here is the interactive online playground of the project, compare it with your code, hope it helps:
codesandbox.io/s/hk8bi
@@JsAcademyOfficial thanks a lot â€ïžđđ»
where did i went wrong?
How To Place Ads On It??
Hi Reah!
What do you want to place ads on? The game itself?
I've been trying my best to copy the code sir..but it won't runđ€§đ€§đ€§đ€§đ€§đđđđ
Feel free to download the source code from the description and compare it to yours.
does somebody know how to rewrite the code so that it is 5x5 and you need 4 to win?
Simply just a copy of Web Dev Simplified's code with just a few color changes.
t y p e
help
VocĂȘ Ă© brasileiro nĂ© kkkkjj
hey bro paradesi payaley unnala project poiduchu please make only html illana aduchuduvein đĄ
i copied you at every point, but my game is not working
Atleast try to show the progress step by step while displaying it in the browser. It seems like u r in a hurry to catch a bus or something. Not useful for beginners.
Thanks for the feedback, the aim is to have a brief video by cutting out writing out the code itself, but I agree that I should pay more attention to show the step-bystep progress int he browser.
please reply as soon as possible