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/

29 Comments

Web Dev Simplified

July 24, 2020

All 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.

Reply

Da Sm

July 24, 2020

Great 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

Reply

avi gil ben zaken

July 24, 2020

I 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

Reply

Donal O'Farrell

July 24, 2020

Found this very easy to code alongside. Thank you for going through the nitty-gritty details and explaining why as you went.

Reply

Patty Pool

July 24, 2020

This 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,😫😩

Reply

Paul Kathro

July 24, 2020

Haven't watched part 2 yet but thanks for this. As usual with your longer walkthroughs I've learned an absolute ton. Thanks dude.

Reply

Joydeb Roy

July 24, 2020

plz add a music off button in the codepen.io project

Reply

Dion Tan

July 24, 2020

Apparently 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

Reply

Sohan Kyatham

July 24, 2020

Hello sir, your tutorials are great so far…from where did you get the images.

Reply

ITsMG

July 24, 2020

Very cool and beautiful
The game is open source with no rights, is that true?

Reply

Vyom Shah

July 24, 2020

how do we get the font?

Reply

kazi MRahman

July 24, 2020

Awesome—Awesome—–Awesome…..Thanks…!!!

Reply

Mohamed Rifkan

July 24, 2020

amazing…..
I'm learning something new every day from your vidoes
Thank you for your love
I pray for you
all the best

Reply

Akash Shelar

July 24, 2020

Great 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?

Reply

Leah Barnes

July 24, 2020

I'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.

Reply

Morgan Page

July 24, 2020

Code a dungeon themed card game!
https://morganpage.teachable.com/p/practise-modern-javascript-by-coding-a-card-game/?product_id=1834511&coupon_code=TWENTYFIVEOFF

Reply

Programmer 98

July 24, 2020

You're the best🙌🙌

Reply

Rita Sallai

July 24, 2020

Took me almost all afternoon, as this is my first big project, but well worth it! Thank you!

Reply

Proprodark102 Second

July 24, 2020

Great 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

Reply

Syntax Logic

July 24, 2020

Would it be overkill to make this type of game using HTML5 canvas? I'm confused on when one should use HTML5 canvas or not.

Reply

tajinder rattu

July 24, 2020

Thanks man you help me a lot!!!

Reply

amTechTube

July 24, 2020

awesome

Reply

Mohamed Oualla

July 24, 2020

هاد البلاي ليست حبيتها
i LOVED THIS PLAYLIST <3

Reply

Puja RC

July 24, 2020

Hi can you please make a scoreboard or Highscore and a Webstorage with that ..would be practically helpful!
Thanks much

Reply

Alfine Candra

July 24, 2020

Hi. Thank you for this game.
I really appreciate for your hard work and this goes well.

Thank you very much.

Reply

KWC Coin

July 24, 2020

Very good

Reply

dujon

July 24, 2020

Solid!

Reply

Hao Guo

July 24, 2020

learned so much from this. Thank you!

Reply

Zaffar Jason

July 24, 2020

Awesome 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?

Reply

Leave a Reply