Name: 如何給卡片匹配遊戲編碼 (How to Code a Card Matching Game)
Uploaded: 2021-01-14T10:23:12.000Z
Duration: 39 min 59 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

My name's Kyle and this is Web Dev simplified.

We make the Web easy to understand and accessible for everyone so you can realize your dream of becoming a better Web developer.

This is going to be a special two part series where I work with poor T x C.

In order to create this card Machin game that you see here, let me demonstrate quick.

So first you click to start and you'll hear some background music.

Start playing, and then you can click on any of these cards and another one foot back over.

If you get an incorrect match and ascended, you find an actual match.

They'll just play a little animation here, and you can continue to go until you find all the matches and get a victory screen.

Or until you don't find enough matches before the time runs out and you'll get it game over screen and then you can start the game over from that.

So in my video, I'm going to be creating all the styles for this page.

We're going to lay everything out, create all the different card animations and the card images that you see here and then import taxes video, which is going to be the second part.

You're going to create all of the different interactivity.

So in order to make the timer countdown, the flips count up.

Make the cards put when you click on him.

All that fun stuff is going to be done in his video, which is all going to Java script.

So let's get started into this right now To get started.

I have a product open and visual studio code with an empty HTML page that links our style sheet folder containing all the different assets will pay for this project are cursed response images and audio and then, lastly, in empty style shoots CSS Page that we can use in order to style are different elements.

So to get started, let's create tht ammo for the text that is going to be at the top for a page here.

The first thing that we want to do is you want to include in H one, which is going to include a title of our page mixed mixture match.

We're just gonna give it a class of page title so that we can select it in our CSS later, and we'll put in here the text mix or a match.

We want to include a container for actual game, so we'll get him here.

Give it a class of gain container, and this will contain all of our game information, such as our time and our member of flips, as well as all the cards for our game.

Then, inside of that, we'll have another dude.

This one will contain our game information, so we'll give it to the class of game information container.

Actually, it's called Game Info Container, and this is what's containing our time and our number of flips.

And in here we'll have a gives so we'll have a live here.

Give it a class of game info, and in here we'll put our actual time as well as inside of this band with an I d of time remaining, we'll flip the actual time value of 100 witches are starting time.

The reason that we're wrapping this inside of a span here is so that later important axes video.

He can select this value and change it inside of the job script without having to rewrite this time section.

Now we can copy this pasted down and do the same thing for flips.

So we'll say, Foot's here and we'll change your i d from time remaining to be flows.

And now, if we open this up using live server, we could see what we have.

So far as you see, we have our title as well, with the time remaining as well as our counter flips.

So now let's go into our style sheet and style these different elements here, the first thing we want to do if you see over here we have custom funds for both of these, so we're going to want to include these different farms.

To do that, we use the font face property and then we'll give our found a name using font family.

In our case, the first part that we're going to want to use, we're going to call it creepy.

This is going to be the fun, but it's going to be for a title of our age.

So in our case, this source is going to come from our assets you're our assets.

It's going to be from the Fonz folder inside of that, and it's called creepy right there.

And then we need to tell the format of this.

In our case, the format is what sense is a walking pile.

Copy this source pasted down and the same thing for a second file, which is a walk to file, that we have support for both types of files, depending on which browser supports which type.

And then that's all we need to do for this pond face.

So it's copy this one more time because we have our second fund, which is called lunacy.

We could just copied that down here since we have a lunacy dot off and I want to see that off to, as you can see inside of this ponds Fuller here and now we have both of those phones important in our page, and we can start using them.

The last thing that I want to do before we get started styling.

It's changed our site to use the box sizing of Border Box, which will make sizing our elements based on a certain with much easier to do next, we can tackle the actual background color that you see here on our site.

As you can see, it's not quite a solid color, and it actually changes colors, which dark on the outside and lighter on the inside of the screen.

So to do that, we're going to select our body element, and we're going to give it zero margin so that our background will expand to the very end of our page.

We'll also get a background here, and we're going to use was called a radio ingredient, a radio greedy int.

The simplest form of it takes two values.

The first value is the color at the very center of the screen, and the second color is the color on the very outside of the element.

So in our case, we're going to use this Orange is color for the very inside of our screen, and then we're going to use this brownish orange color on the outside of our screen.

If we say that and look at our view over here, you see that we now have this different background.

Being applied to our elements of yoga is it's repeating all over a page based on the height of this section of our cage.

In order to fix this, what we want is we want our page to be the full height of the screen.

We'll set the minimum height here to be 100 you guys.

And now this means that our HTML will stretch to be at least the full size of this cream, no matter what.

Now let's work on creating the actual fonts and colors for different titles here.

So let's first select our main title, which is Paige title and inside of here.

We're going to give it very orangish color for our Halloween theme.

We want to give it the fun family of that creepy farm that we created, and then we also want to give it a backup fund.

For if this creepy fun is not able to look, soldiers used to serve as our default fallback fund.

Next, we want to just change the font, wait to not be bold because H ones by default, they're bolted we want to align this text in the center of our screen.

And then lastly, we just want to increase the fun size by quite a bit.

So we'll get a fun size of 60 m If we save that and go back over here, you'll see that our title is now exactly how we want it to be.

The next thing we need to work on is creating the different styles for our game info here city that will select our game info class.

We'll give it a car here, which is going to be a slightly whiter version of that Halloween, the orange color that we created up here and will increase the farm sized to be 40 m.

If you say that you now see that we have this place looking style here in order to apply our fun, we just need to do the same exact thing where we use our fun family.

And instead of using creepy, we use that lunacy farms that we created earlier.

And if you say that, you know, see what we get that funky looking farm for our color here, which is exactly what our farm looks like over here That's all the style and we need to do in order to get our funds toe look as we want them to.

The next thing we want to work on is creating the actual cards and laying out the different elements instead of your page to be in this four by four grid.

To prepare for that, let's jump back into our index that html and start adding the different cards that we want to our container.

So inside of our game container here, Bush was added, Do with the class of card, and we're gonna wanna add 16 of these dibs in our page, since we have 16 different carbs.

We got 16 different cards inside of our container and inside of our styles that CSS temporarily Lester's create a style for a card where we give the background color of black.

We're going to give it a fight here of 175 pixels and a Witte of 125 pixels.

Now, if we save that look back, you see that we just have a block of text right now, which is fine because there's no spacing around our elements and order to create a grid like few here we want to do is we want to select our game container that we created earlier that wraps all these different elements.

And we want to use what's called CSS Grid in order to display this.

Yeah, we just had a display of great honor aged in order to create a Gridley up.

And then we needed to supply the columns we want for our grid.

So we'll say grid template columns, and we want to have repeat of four times.

So we want four columns that will automatically size themselves to be whatever the size of the elements inside of them are.

So if we saved that, you see that we now have four different columns, and in order to see the different elements, let's add a little bit of a gap between our elements.

字幕列表影片播放

如何給卡片匹配遊戲編碼 (How to Code a Card Matching Game)

properly

scale

flip

negative