Create a simple tic tac toe game using HTML, CSS, JavaScript
HTML-код
- Опубликовано: 12 сен 2024
- 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/jav...
Happy hacking!
Where you can find me?
🔗 Links:
* 🍺 Support free education and buy me a beer: ko-fi.com/adam...
* 💬 Discord: / discord
* 📧 Newsletter: www.getrevue.c...
* ✍️ Blog: dev.to/javascr...
* 🐦 Twitter: / dev_adamnagy
* 📷 Instagram: / javascriptacademy
New web development tutorial from me: Memory card game using Javascript, HTML, and CSS: 🔥
ruclips.net/video/xWdkt6KSirw/видео.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
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!
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
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
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.....👍🏻
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.
I'm your 1000th subscriber!
Congrats for 1k subs....
Welcome to the academy my friend! Thanks for choosing to subcribe :)
I dont have enough words to thank you for this sir....
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
wow your video is very appriciaement
Why did you add the js link at the top of the index.html instead of at the bottom?
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.
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..
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.
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.
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:
Awesome Tutorial... Thanks..
I’m glad that you found it helpful :)
i have a problem the player don´t change when i click for the first time
This format is much better than coding in front ☻
Hi what program did you use to make the game?
vscode you're welcome prob wont see this tho
Can I modify it so that I can count the number of wins for a person until they refresh the page
If i click on the boxes the x or o are not occurring can you tell what is the problem
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?
thank you so much Mr JavaScript Academy! It helped me so so much!
-XOXO 13 year old girl
Thank you for this project
You’re welcome!
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??
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 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
Great video.
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
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.
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 :)
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?
I write the whole code but it didn't work 😢
Thanks. You're really good at clarifying the concepts. I followed everything and built mine too.
so the const winningConditions are like conditionals that will show all the possible ways to win.
Exactly :)
@@JsAcademyOfficial Thank you.
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"
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! 😊
Where is the code for isValidAction at???
When I click on one of the grid squares it does nothing can someone please help me
which software did you use
If you mean the code editor it is visual studio code. The browser is Brave
why does he use section for button instead of div?
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
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!
You Are Awsome Man😍
Thanks Dibyaraj !
i have it but i cant click and play
thank you bro
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?
How do you put it in a website
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
Which program is it?
great job bro
Wat is the software?
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
what is this app that you are using to code?
VScode
Mine wont place x or o
Thank You Soooooooooooooooo Much
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!
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.
can i copy and paste it
It isn't working there a problem at tile.classlist.add('player$(currentPlayer)');
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
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.
Buen vìdeo!
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! 😊
not working
I Think You Need to Make A Single Player
thank you
Im getting errors but dont know why
How To Place Ads On It??
Hi Reah!
What do you want to place ads on? The game itself?
hello sir i am use this game in my website
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 !❤️
1:50
Simply just a copy of Web Dev Simplified's code with just a few color changes.
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 ❤️👌🏻
Keep making video please
Thanks, I try my best to bring content as soon as possible. I’m glad you find it useful
where did i went wrong?
hey bro paradesi payaley unnala project poiduchu please make only html illana aduchuduvein 😡
Create a Detailed Version
t y p e
Você é brasileiro né kkkkjj
does somebody know how to rewrite the code so that it is 5x5 and you need 4 to win?
help
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