Tic Tac Toe Game using HTML CSS & JavaScript
HTML-код
- Опубликовано: 13 июн 2024
- Tic Tac Toe Game using HTML CSS & JavaScript
Short Definition:
Tic tac toe is a multiplayer game and the players of this game have to position their marks(sign) so that they can construct a continuous line of three cells or boxes vertically, horizontally, or diagonally. An opponent can stop a win by blocking the end of the opponent's line.
Download Codes From Here - www.codingnepalweb.com/tic-ta...
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Timestamps:
0:00 Tic Tac Toe Intro
1:53 Creating selection box (HTML & CSS)
5:10 Creating playboard section (HTML & CSS)
10:22 Creating result box (HTML & CSS)
13:18 JavaScript code start
14:45 Hiding selection box and showing playboard section on Player (X) button click
16:44 Hiding selection box and showing playboard section on Player (O) button click
18:36 Function for showing icon or sign on user click
23:18 Function for showing icon or sign on bot select
32:24 Function for matching winning combinations & selecting a winner
39:16 Showing result box with winner sign (X or O)
42:07 Match drawn function and showing result box with match drawn text
44:08 Realoding current page on the replay button click
34:32 In line no. 91 of JavaScript file, I did a mistake while putting winning combinations number. I've written 6,7,8,playerSign but it's actually 7,8,9,playerSign. So if you're following the codes then just correct it.
Music Credit:
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Jordan Schor & Harley ...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Vision | Du...
Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Levianth & Axol - Reme...
Remember to Like & Subscribe 💙
what is the font website on the css code part?
in Beginner level , CodingNepal's Projects are best in RUclips in details and explanation. Thanks buddy and God Bless You...
I watching and also coding this game and i finished half of the project. This video is soo awesome 😊 and informative!
Wish u a happy happy new year 2021 Coding 🇳🇵Nepal & thank u for your amazing videos , wish u get million of subscribers youtube award🏆 soon this year 🥳✨🌟
Thank you and happy new year too 💙
thank you fir this project! I learned a lot from this
I have done every step. But X and O doesn't show on the table(( Can't understand why(( Can you help me?
Ótimo vídeo parabéns 👏.
Going to make this now! you re great brother! thanku very much 👌👍
Hope you enjoy
@@CodingNepal sure
Thanks a lot for helping beginners
You are amazing. Liked and subscribed.
Thank you so much
Bro, can you do voiceover for js project..
Yes bro but with voice over video length will be more than double and my English also not good. I'll try to add my voice in my upcoming videos... Stay tuned 💙
@Atul Kumar😂
@@CodingNepal bro Hindi mai bta diya kro
@@CodingNepal bro whatever your coding skills are next level
This helped me a lot thank you soo much you are like the best coder, you should work for google
Nice and cool sir....games coding in JS is always cool
Thank you 💙
Amazing Job :)
Thanks for amazing video
I have a question What if we have to add difficulty in this project how can we do this ?
Superb....Can it be used for final year project?
Also suggest project for final year and yes please start making video on final year project it will be very helpful
Sure.. Stay tuned 💙
Amazing🌟😁 New level coding
Thank you 💙.. Hope you like it 😄
@@CodingNepal Yes 🌟
Thanks sir for ur amazing tutorial.
You're welcome 💙
Nice tic toe game.
Thank you 💙
It would be amazing if there would be option to choose to wheather to play against biginner level, intermediate level or hard level. But i hope in the future!
I don't understand the code: playerSign = 'X'; in the bot function (runBot). How can it fix id override? Can someone explain it to me?
Awesome bro always
Thank you bro 💙
Nice Thank you
Thank you too!
Awesome !
Thanks!
Bro u r great bro🔥🔥🔥👍👍❤️❤️😎😎😀
Amazing ❤️🔥💙
Thank you 💙
this project is lil bit difficult and confusing for beginners like me :/
however, your skills are amazing!
Epic bro thx yrr
In 21:24 line num 32 u used a symbol before PlayerOIcon, which symbol u used can u explain please??
It's a $ sign.. You can assign variable value like this `${var_name}`. It's called template strings.
Thanks
Great 👍
Thank you 💙
very great video
Glad you liked it
can you make me a video tutorial on how to create a "modal" using just the jquery plugin: not (jquery ui or something else).
#I_ask_for_help.
Here are some videos related it
ruclips.net/video/W4fQnBlwoWA/видео.html
ruclips.net/video/OkJYtw1mPeU/видео.html
ruclips.net/video/yQ5UbCJYYjs/видео.html
Great Video !!! I have some videos with HTML too
Great 💙
Ek no bro...
Thank you bro 💙
@@CodingNepal you deserve more bro..
Hi there, it happens to me that at minute 15:15, when clicking, the box does not disappear. I look and review and can't find why. Also I get that a "," is expected between window and load, in js. and "Uncaught SyntaxError: Missing initializer in const declaration" as well
Someone happened like that? And / or can you help me? Thank you
By the way, good video and work!
same problem with me the box is not dissapearing
Same problem
now this is awesome, 👍
Thank you 💙
@@CodingNepal wlcme!
Full support to you
Keep supporting 💙
You are very Awesome
Thank you 💙
I don't understand this. Line 9 to 12 is giving me a bug. How do I fix this?? I've been figuring this out for three days now.
I really like your tutorials if I can afford I would like to be more in contact with you
My replay "button" is coming at the same line as the "won text". Please help.
hey, why did you write the sript link in the div area below instead the head element?
If you put script tag inside head then the codes of it run before the html codes/contents loaded and you get errors in javascript codes. So I've put the script tag before the end of body.
@@CodingNepal ahh oke. thx for the quick answer :)
Bro instead bg music u can use your voiceover for beginners those who want to understanding js coding
Ok bro.. I'll try
@@CodingNepal u make app game, now where u sell it? app store? google play? where??
best site
where you have a kit
Great
Thank you 💙
Nice CSS skills!
It's JavaScript skill 🙂
when I click on the "Player O" button I don't get the box with the O
oooooo.so good
Very fun
sure
can we change the icon?
Bro 1 error h Jb me player O choose kr ra hn tow mere box select krne k bd bot() X select krta h lakin uske bd bh upper x's turn araha h.
Thanks, bro for informing me about this mistake. I have fixed it and you can download the updated code files from the same link that you used to download before.
Awesome 😍..sir can I get source code and report of this game??for project purpose
Source codes and detail explanation of this project is here www.codingnepalweb.com/tic-tac-toe-game-javascript/
@@CodingNepal thank you so much sir 😍
Nic
can this be done on Firebase?
Bro super tell how to become like you how to learn HTML css javascript php bootstrap like pro
It's all about learning bro... So keep learning 💙
Tq bro it's your real name prakash
Yes bro
You from tamilnadu India
Can i change another icon like fas fa-bus?
Yes you can
15:17 I did exactly the same but it is not happening.
//selecting all required elements
const selectBox = document.querySelector(".select-box");
selectXBtn = selectBox.querySelector(".player-x");
selectOBtn = selectBox.querySelector(".player-o");
window.onload=()=>{ //once window loaded
selectXBtn.oncick= ()=>{
selectBox.classList.add("hide"); //hide the select box on player x button clicked
}
}
its "onclick", not "oncick"
Is it mobile friendly??
Yes.
oh my god..😲😲
Hope you like it
@@CodingNepal yeah..too much
first one
Great man 😄
@@CodingNepal Bro i wanna master my basics in javascript in one month how?please reply
Make a video teaching how to upload videos
Means?
Upload videos to save in the database or you only make animations with HTML css and js
Video is not uploaded in db bro only video name saved in db but uploaded to server directory
Please I want tic tac toe drive PDF please
Can i reply x and o to images?
You mean replace..? Yes you can!
@@CodingNepal yup replace. Sorry my mistake. Typos there hahaha thank u so much. I already replaced it
Я скопировал код, и он не работает код на джаваскрипт😢
Bro are you teaching or just practicing yourself.
What is the problem u face while creating this game
hi, prepare 2048 game
I m getting errors bro help me
Afnu voice Hala na bro ...
Hunxw bro
can you give us source code file 3>
Source files link is in the video description
What are you are you Mosnter
can u slow the video pls nxt tym
Okay
I have problem
??
i only understood half js. 😅😅😅😅
Just download source files from the given download link.. I've explained each javascript line with comments so you'll easily understand the codes.
Hello bro do you have the code for 3 to 5 player on the 4x4 board if yes can you send it to me please I already sent to a massege on your Gmail account
Thanks in advance bro