Teochew Thunder: Web Tutorial: Easter Bunny River Crossing Game (Part 2/4)

As promised, in this part we will be making the game tokens - the fox, the Easter Bunny and an Easter egg. Before that, however, let's lay some groundwork.

Define a CSS class, placeholder. Here I'm giving it a black outline for better visibility.

            .path
            {
                width: 60%;
                height: 100%;
                float: left;
                outline: 0px solid #FF0000;
            }

            .placeholder
            {
                width: 40px;
                height: 50px;
                outline: 1px solid #000000;
            }

Now, inside the left bank, in the innermost div (the one styled by bank), place three divs and style them using placeholder. While you're at it, give them ids too, as follows. You can probably see that these divs are meant to hold the bunny, egg and fox.

Now, you still won't see anything. That's because the green div extends far beyond the left side of the box, and any child divs in there are floated left by default. Because the overflow property of bankContainer is set to hidden, those new divs you added are out of sight.

So style all placeholder elements within leftBank. Make them float right, and adjust the margins a bit for spacing.

            .placeholder
            {
                width: 40px;
                height: 50px;
                outline: 1px solid #000000;
            }

            .leftBank .placeholder
            {
                float: right;
                margin-left: -10px;
                margin-top: -20px;
            }

There you see it. The placeholders are overlapped, and that's deliberate, to save space.

Now do the same thing for the right bank. Only make the placeholders float left. And instead of setting the margin-left property, set the margin-right property.

            .placeholder
            {
                width: 40px;
                height: 50px;
                outline: 1px solid #000000;
            }

            .leftBank .placeholder
            {
                float: right;
                margin-left: -10px;
                margin-top: -20px;
            }

            .rightBank .placeholder
            {
                float: left;
                margin-right: -10px;
                margin-top: -20px;
            }

There, you're getting it.

Now let's put a placeholder on the raft. Again, style this using placeholder. Give it an id of raftPassenger.

Style it. Make it float left, and since it has a height of 50 pixels, offset this using the margin-top property.

            #raft
            {
                width: 80px;
                height: 5px;
                background-color: #440000;
                margin-top: 73%;
                margin-left: 0%;
            }

            #raft .placeholder
            {
                float: left;
                margin-top: -50px;
            }

Good, now you can see where the passenger goes on the raft!

We're not done with placeholders just yet...

Let's make three more. Place them just outside the container div. Style them each using placeholder, and give them the naming convention as shown for ids.

Then style them like so. It's not strictly necessary because divs by default have the display property set to block, but we want to change this to none by the end of the tutorial. So let's just get this out of the way first.

Take a look at the bottom left corner of the screen. That's your area of ops for the rest of this part of the web tutorial.

The Easter egg

We'll start with the simplest one. Go figure, eh? This part's easy enough. Start with a div, and style it using the CSS class egg.

Then add another div inside that, and style it using the CSS class egg_body.

egg is simple enough as a class. We just want to determine width, height and margin, enough to make it fit into the placeholder and align in the middle. padding-top is set to 20 pixels because egg_body is only 30 pixels tall and we need it to stay at the bottom of the div. Since it will be clickable, the cursor property is set to pointer.

As mentioned previously, the height of egg_body is only 30 pixels. You can change this if you want to, just be sure to make adjustments later. For the background color, I'm going with a nice pale yellow. border-radius is set so that the egg is, well, egg-shaped.

            .egg
            {
                width: 20px;
                height: 50px;
                margin: 0 auto 0 auto;
                padding-top: 20px;
                cursor: pointer;
            }

            .egg_body
            {
                 width: 20px;
                 height: 30px;
                 background-color: #DDDD00;
                 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            }

See the egg yet?

Let's decorate it some. Don't overdo it now; there's a lot more to go for this part of the web tutorial. Just use the before and after pseudoselectors for the egg_body CSS class. This isn't really important, and you can determine font sizes and colors and characters. I'm just going to use the character "o" and the • symbol.

            .egg_body
            {
                 width: 20px;
                 height: 30px;
                 background-color: #DDDD00;
                 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            }

            .egg_body:before
            {
                display: block;
                width: 20px;
                height: 10px;
                content: "o";
                font-size: 10px;
                color: #0055FF;
                text-align: center;
            }

            .egg_body:after
            {
                display: block;
                width: 20px;
                height: 10px;
                content: "\2022";
                font-size: 25px;
                color: #FF44FF;
                text-align: right;
            }

Like I said, nothing too fancy.

Let's do the Easter Bunny!

Well, to keep things simple, let's just make a pink rabbit. Again, start with a simple div. Style it using the CSS class bunny.

Within that div, add three divs - styled with bunny_ears, bunny_head and bunny_body.

The bunny CSS class is similar to the egg CSS class, except that it's a bit wider, and the padding-top property is smaller because the bunny is going to be taller and thus take up more of the div's height.

            .boatman:after
            {
                display: block;
                content: "";
                width: 20px;
                height: 42px;
                margin: -2px auto 0 auto;
                border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
                background-color: #000000;
            }

            .bunny
            {
                width: 30px;
                height: 50px;
                font-size: 25px;
                margin: 0 auto 0 auto;
                padding-top: 15px;
                cursor: pointer;
            }

            .egg
            {
                width: 20px;
                height: 50px;
                margin: 0 auto 0 auto;
                padding-top: 20px;
                cursor: pointer;
            }

We'll start with the ears. They will occupy a small space near the top of the div. Again, they should be aligned center of the div, so we set the margin property for that.

            .bunny
            {
                width: 30px;
                height: 50px;
                margin: 0 auto 0 auto;
                padding-top: 15px;
                cursor: pointer;
            }

            .bunny_ears
            {
                width: 12px;
                height: 10px;
                margin: 0 auto 0 auto;
            }

Next, set the before and after pseudoselectors of the bunny_ears CSS class. Both have this in common...

display: block, content: "" - represent before and after as a div with no content.
width: 5px, height: 15px - the ears should each be long and standing upright.
border-radius: 15px - to give them round corners.
background-color: #FF44FF - to make them pink.

            .bunny_ears
            {
                width: 12px;
                height: 10px;
                margin: 0 auto 0 auto;
            }

            .bunny_ears:before, .bunny_ears:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 15px;
                border-radius: 50%;
                background-color: #FF44FF;
            }

Uh-oh. They're the correct shape but hideously misaligned!

We'll fix them with a couple specifications for before and after. Basically, one ear floats left of bunny_ears, and the other floats right.

            .bunny_ears:before, .bunny_ears:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 15px;
                border-radius: 50%;
                background-color: #FF44FF;
            }

            .bunny_ears:before
            {
                float: left;
            }

            .bunny_ears:after
            {
                float: right;
            }

Like magic!

Let's do the head. It's basically another pink rounded div aligned center. We offset the bottom by negative 15 pixels so that it joins with the body.

            .bunny_ears:before
            {
                float: left;
            }

            .bunny_ears:after
            {
                float: right;
            }

            .bunny_head
            {
                width: 15px;
                height: 12px;
                margin: 0 auto -5px auto;
                border-radius: 50%;
                background-color: #FF44FF;
            }

Yep, getting there!

Finally, the body. Another pink rounded div, aligned center, but this time larger.

            .bunny_head
            {
                width: 15px;
                height: 12px;
                margin: 0 auto -5px auto;
                border-radius: 50%;
                background-color: #FF44FF;
            }

            .bunny_body
            {
                width: 20px;
                height: 20px;
                margin: 0 auto 0 auto;
                border-radius: 50%;
                background-color: #FF44FF;
            }

            .egg
            {
                width: 20px;
                height: 50px;
                margin: 0 auto 0 auto;
                padding-top: 20px;
                cursor: pointer;
            }

OK, that's it for the bunny. Next one is going to be tougher.

The fox

We need the head of the fox to be narrower and a different color from the body so that it stands out. But we're getting ahead of ourselves here (ahead, geddit? heh) so let's start from the beginning.

Create a div in the template_fox div and style it using CSS class fox.

Then in that div, as in the bunny, add three divs and style them using fox_ears, fox_body and fox_head. fox_head comes last because we want the head rendered over the body.

The fox CSS class is just like the egg and bunny CSS classes, except that the fox, being the tallest of the bunch, is going to take up the full height of this div, thus no padding at the top is necessary.

            .egg_body:after
            {
                display: block;
                width: 20px;
                height: 10px;
                content: "\2022";
                font-size: 25px;
                color: #FF44FF;
                text-align: right;
            }

            .fox
            {
                width: 30px;
                height: 50px;
                font-size: 35px;
                margin: 0 auto 0 auto;
                cursor: pointer;
            }

For the fox_ears CSS class, we do pretty much what we did with bunny_ears, except that the ears are shorter and they're orange.

            .fox
            {
                width: 30px;
                height: 50px;
                font-size: 35px;
                margin: 0 auto 0 auto;
                cursor: pointer;
            }

            .fox_ears
            {
                width: 20px;
                height: 10px;
                margin: 0 auto 0 auto;
            }

            .fox_ears:before, .fox_ears:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 10px;
                border-radius: 50%;
                background-color: #FF4400;
            }

            .fox_ears:before
            {
                float: left;
            }

            .fox_ears:after
            {
                float: right;
            }

Here are the ears.

We'll do the body next. It's kind of egg-shaped, with a broad base, and we color it brown. Margin at the top is 10 pixels, which gives it a gap from the ears.

            .fox_ears:before
            {
                float: left;
            }

            .fox_ears:after
            {
                float: right;
            }

            .fox_body
            {
                width: 25px;
                height: 30px;
                margin: 10px auto 0 auto;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                background-color: #AA2200;
            }

Here's how it looks...

Now we do the head. It involves playing around with border thicknesses, to give you a cone with a round top. For that, width and height have to be 0 pixels. Technically, the head should be below the body, but since we specified a negative 45 pixel margin offset at the top, it aligns nicely between the ears and head.

            .fox_ears:before
            {
                float: left;
            }

            .fox_ears:after
            {
                float: right;
            }

            .fox_head
            {
                width: 0px;
                height: 0px;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-top: 25px solid #FF4400;
                border-radius: 50%;
                margin: -45px auto 0 auto;
            }

            .fox_body
            {
                width: 25px;
                height: 30px;
                margin: 10px auto 0 auto;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                background-color: #AA2200;
            }

Ladies and gentlemen, the fox!

One last thing...

Add this to the div styled using the CSS class water. There's a break tag, a div with an id of messageBox, and a button with an id of btnStart. The blue expanse of water is where game messages and explanatory text will appear.

That's the style for the messageBox div. It will take up much of its parent's area. Font size and color and such I'll leave to you, but I'd recommend the text be aligned center.

            .water
            {
                width: 100%;
                height: 60%;
                background: #0e1449; /* Old browsers */
                background: -moz-linear-gradient(left, #0e1449 17%, #383566 51%, #0e1449 80%); /* FF3.6-15 */
                background: -webkit-linear-gradient(left, #0e1449 17%,#383566 51%,#0e1449 80%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to right, #0e1449 17%,#383566 51%,#0e1449 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e1449', endColorstr='#0e1449',GradientType=1 ); /* IE6-9 */
                margin-top: -35%;
            }

            #messageBox
            {
                width: 90%;
                height: 40%;
                font-size: 16px;
                font-family: verdana;
                color: #FFFFFF;
                margin: 0 auto 0 auto;
                text-align: center;
            }

            #gameContainer
            {
                width: 100%;
                height: 100%;
                margin-bottom: -450px;
            }

As for the button, setting the display property to block is essential. The width property is set to 10em because whatever text is going to be in there will likely not exceed 10 characters. The rest are just aesthetics. I've even added the hover pseudoselector for extra prettiness points.

            .fox_body
            {
                width: 25px;
                height: 30px;
                margin: 10px auto 0 auto;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                background-color: #AA2200;
            }

            #btnStart
            {
                display: block;
                width: 10em;
                height: 2.5em;
                padding: 0.5em;
                border-radius: 5px;
                margin: 0 auto 0 auto;
                border: 0px solid #FFFFFF;
                color: #FFFFFF;
                background-color: rgba(255, 100, 0, 1);
                cursor: pointer;
            }

            #btnStart:hover
            {
                color: rgba(255, 100, 0, 1);
                background-color: rgba(255, 200, 0, 1);
            }

            #template_bunny, #template_egg, #template_fox
            {
                display: block;
            }

Won't be much to look at right now. We'll be doing more with this in the next part!

It'll be mostly JavaScript from this point on. Don't go away!

Teochew Thunder

Pages

Sunday, 14 April 2019

Web Tutorial: Easter Bunny River Crossing Game (Part 2/4)

We're not done with placeholders just yet...

The Easter egg

Let's do the Easter Bunny!

The fox

One last thing...

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews