In this special two part video series we will be creating a simple Halloween themed card matching game. In this first video I will be explaining all of the HTML and CSS needed to create the animations and design for the game. In the second part of the video PortEXE will explain all of the JavaScript needed to make the card game interactive and playable.
I hope you enjoy the collaboration with PortEXE. I really enjoyed working with him, and hope to do more collaboration videos in the future.
All of the images and code are available on my GitHub linked below.
PART TWO (PortEXE Video):
Code For This Video:
CodePen For This Video:
Twitter:
GitHub:
CodePen:
#Halloween #WebDevelopment #Programming
Nguồn: https://sstievents.org/
Xem thêm bài viết khác: https://sstievents.org/game/
Web Dev Simplified
July 24, 2020All of the code and assets for this video are available on my GitHub https://github.com/WebDevSimplified/Mix-Or-Match, and you can play the game live here https://codepen.io/WebDevSimplified/pen/EdEjyx.
Also, make sure to checkout part two on PortEXE's channel https://youtu.be/3uuQ3g92oPQ.
Da Sm
July 24, 2020Great content… but I wished the sound could be muted. So, I added a mute function on the version that I uploaded to GitHub https://github.com/dsmith73/toolbox/tree/master/js/card-match
avi gil ben zaken
July 24, 2020I really like your videos, thanks.
I have a question if there is a way to plant the current HTML file and display the game on the site. All attempts to plant HTML files after finishing work on my site failed. I would be happy to help maybe someone knows some way, thanks
Donal O'Farrell
July 24, 2020Found this very easy to code alongside. Thank you for going through the nitty-gritty details and explaining why as you went.
Patty Pool
July 24, 2020This is great video, i have been able to create the game with my own pictures, on the computer it is working in all browers but not IE, when trying on my Iphone and ipad I see the pictures in mirror and not the background. Wehn click on picture you see other cards turn to the back side of the card and turns back again. I have downloaded edge and chrome on my iphone and have to same issue, I added the animation browser code in css. When checking the virtual iphone it is working, but not on my owns. Any ideas what I am missing? The sounds is working, except the one running out of time. The picture are dancing when matched,😫😩
Paul Kathro
July 24, 2020Haven't watched part 2 yet but thanks for this. As usual with your longer walkthroughs I've learned an absolute ton. Thanks dude.
Joydeb Roy
July 24, 2020plz add a music off button in the codepen.io project
Dion Tan
July 24, 2020Apparently this complete game will not work on my ipad. The flipping transition has some issue though. All the cards by default will be at front. Nevertheless, great tutorial
Sohan Kyatham
July 24, 2020Hello sir, your tutorials are great so far…from where did you get the images.
ITsMG
July 24, 2020Very cool and beautiful
The game is open source with no rights, is that true?
Vyom Shah
July 24, 2020how do we get the font?
kazi MRahman
July 24, 2020Awesome—Awesome—–Awesome…..Thanks…!!!
Mohamed Rifkan
July 24, 2020amazing…..
I'm learning something new every day from your vidoes
Thank you for your love
I pray for you
all the best
Akash Shelar
July 24, 2020Great tutorial, so happy to try and recreate this as a beginner. I usually avoid using grid, can I do this using flexbox? Will it cause issues in JS?
Leah Barnes
July 24, 2020I've had this pinned forever and just now got around to going through it. Great walk through as always and such a fun project. Also enjoyed putting my own spin on it since it's not Halloween at the moment ;). Thanks for making coding fun, Kyle! Enjoyable projects make the concepts stick so much easier. Now, onto the JavaScript.
Morgan Page
July 24, 2020Code a dungeon themed card game!
https://morganpage.teachable.com/p/practise-modern-javascript-by-coding-a-card-game/?product_id=1834511&coupon_code=TWENTYFIVEOFF
Programmer 98
July 24, 2020You're the best🙌🙌
Rita Sallai
July 24, 2020Took me almost all afternoon, as this is my first big project, but well worth it! Thank you!
Proprodark102 Second
July 24, 2020Great tutorial ! I followed this and made a new Match game on Google Play Store, it has new feature that we can continuously matching the card. This is a great game where u can show off with your friends about your score. Check it out :
https://play.google.com/store/apps/details?id=com.AzaleaStudio.IcyMatch
Syntax Logic
July 24, 2020Would it be overkill to make this type of game using HTML5 canvas? I'm confused on when one should use HTML5 canvas or not.
tajinder rattu
July 24, 2020Thanks man you help me a lot!!!
amTechTube
July 24, 2020awesome
Mohamed Oualla
July 24, 2020هاد البلاي ليست حبيتها
i LOVED THIS PLAYLIST <3
Puja RC
July 24, 2020Hi can you please make a scoreboard or Highscore and a Webstorage with that ..would be practically helpful!
Thanks much
Alfine Candra
July 24, 2020Hi. Thank you for this game.
I really appreciate for your hard work and this goes well.
Thank you very much.
KWC Coin
July 24, 2020Very good
dujon
July 24, 2020Solid!
Hao Guo
July 24, 2020learned so much from this. Thank you!
Zaffar Jason
July 24, 2020Awesome tutorial 😍😍😍😍. Can you please help on below question?
Upon refreshing the page, we call see the front face of all cards. How can we prevent that?