Build a JavaScript Memory Match Game - NO frameworks or libraries!!
ฝัง
- เผยแพร่เมื่อ 10 ส.ค. 2022
- You don’t need a JavaScript framework to build something fun! In this video, let’s create a Pokemon memory match game with vanilla HTML, CSS, and JavaScript. No frameworks or libraries!
** Sponsor **
Agora.io provides everything you need to build a complete real-time experience with video + voice calling, real-time messaging and much more with just a few lines of code.
Try out Agora today! bit.ly/3OllYcZ
** Source code ***
github.com/jamesqquick/javasc...
** Resources **
PokeAPI - pokeapi.co/
Flipping Animation Tutorial - • CSS Flip Card Effect
Florin Pop Pokedex Tutorial - • PokeDex - JavaScript T...
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquick.com/newsletter
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquick.com/uses
Learn Web Development 📖 - www.jamesqquick.com/courses
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
Really enjoyed this, James. It's a good reminder that good ol' standard JS is tons of fun!
Yeah! I love these types of demos!
This is just an amazing guide James!! 😍😍
Great tutorial. Thanks and all the best from UK.
Thanks for this. I learned a ton of new things like the rotating css stuff and also the map and spread stuff. btw, i did actually code along with the video..a ton of fun ;-)
So glad to hear that. Glad you enjoyed it :)
I haven’t even watched the video yet, but I’ve already hit the like button. You’re awesome James 👏
Haha thanks for the super
Support* lol
Yes. This is super support brother 🙏
@@sayeghjoe Thanks for sticking with me through the typos 🤣
Nice project and nice Thumbnail, James ✌🏻
Thanks! I had a lot of fun with this one
Very nice video I made the game for my daughter she loves it. Thanks very much for your content would love to see more vanilla JavaScript projects using rapidApi.
More coming!
Looks awesome!
Thanks friend!
Hi, Nice Video, i watched a few of this Memory Game video's everyone is handling it an other way but this one is very neat and smooth coded.
A-special the await Promise.all section i never got this running right bc i don't understood the usage 😄
But now i got it 🙂
Thanks and it was very educative again
Glad you got it figured out!
nice james!
im building this one next thanks !
Let me know how you enjoy it :)
Nice! It'd be cool to see the exact same, but in Svelte instead to get a good comparison between vanilla and Svelte.
I’ll add that to the backlog
Great content as always, James!
For more ideas 💡, I would like to learn projects that include sound effects & music!
( 🎶 including sources for sounds and music for game development 🎼 )
Yeah that's such a good idea!
Hey thanks, this was fun indeed. You're explaining the JS very nicely.
1 thing I don't understand - maybe someone can explain:
Why would the CSS position-property on .card need to be relative? I cannot find a good reason in Docs/Specs as it acts as if static without top/left/bottom/right-shifts...
I loved it and so did my child after playing the game!! How does one add a dropdown list with different sizes grid? For example 4x6 or 6x6
You could handle that with a media query if you wanted!
nice work ,
Thank you1
It was driving me crazy with the missing H2 tag close.. until you did it. Lol
i need to learn js and html5 css3 because trying to learn how to make my own game afterwards with a framework
would be cool to release like.. a pseudocode so learners can take a stab or writing their own off some psuedocode and then watch the video to see if we did it or what we may be stuck on
Why doesn't this boiler plate thing work?
Boilerplate extension fails for me with "Cannot read properties of undefined (reading '0')".
Ah that's helpful! I wonder if I'm not searching through folder structures correctly or something. Did you have a project open already?
@@JamesQQuick no projects open. I also updated and restarted. Something else I can check?
i wanted to use not pokemon but warhammer and cant find an api ,f
Love the tutorial, however, around 19:51 I'm getting an error where const game = document.getElementById('game') gives the error of ReferenceError: document is not defined.
From what I've tried to solve, document.getElementById is not possible due to using node.js. I tried to use the exact code you wrote on another project file without node, but I am getting the same error.
Furtheremore:
"The most common reason for this error is because you're using Node. That is to say, you are trying to access the document object on the server, but the server does not have access to the document object because it lives on the browser. Node is a server-side runtime so if you're on Node, you cannot reference the document object, which is an in-memory representation of the Document Object Model. That also includes when you're doing server-side rendered applications, which can sometimes have universal code that can run on both the server and the browser."
The above is basically the fundamental problem, but is there some way we can still work around this?
Yeah I'm not sure what your setup is, but the document APIs are only available in the browser not in Node.js. Node.js doesn't have any concept of the DOM.
@@JamesQQuick Thank you for the response! Loved the in-depth video and learned a lot from it.
hi james, I like your vs-code theme, did you customized it by yourself, if not, can you name it please, becuase is not Cobalt2 as what your website says, and thanks, (sending my support♥, keep doing your magic)
Hey there! Right now I'm using Shades of Purple and Midnight Synth :)
@@JamesQQuick Tnx james
create web boilerplate - not working
You should make a site for Spongebob just like pokemon.