TeochewThunder

Tuesday, 16 April 2019

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

This is where we lay the foundation for the code we're going to write later. First, we prepare objects. There'll be an object for the game, an object for the passengers, and the raft.

The game object

We'll start with the game object. This object controls the flow of the game - when it starts, ends and pauses. It helps track of the passengers and the raft, and displays helpful messages.

Here's an introduction to this object's properties.
- started is defaulted to false and is true when the game has started.
- paused is used to disable button clicks when you need to.
- moves is a number which keeps track of how many times the raft has moved.

           var game =
           {
               started: false,
               paused: false,
               moves: 0
           }

Now for the methods...
- reset() brings everything back to the game's initial state
- start() sets the started flag to true and prepares the game for play.
- check() does an inventory of each passenger's position, and the raft's, and determines if the game has ended in either victory or defeat.
- showMessage() displays the appropriate message in the water according to what messageType is passed in, and also dictates the text in the orange button.

           var game =
           {
               started: false,
               paused: false,
               moves: 0,
               reset: function()
               {

               },
               start: function()
               {

               },
               check: function()
               {

               },
               showMessage: function(messageType)
               {

               }
           }

The passenger object

This object has two properties - id and position. The value of id depends on whether it's the fox, bunny or egg. position has basically three values - "leftBank", "rightBank" and "raft". By default, this is "leftBank".

           var passenger =
           {
               id: "",
               position: "leftBank"
           };

passenger also has two methods - render() and move(). render() places the HTML and CSS of the passenger in the placeholder dictated by the parameter position. move(), well, moves the passenger from bank to raft, or vice versa.

           var passenger =
           {
               id: "",
               position: "leftBank",
               render: function(position)
               {

               },
               move: function()
               {

               }
           };

After that, we clone the passenger object to three new objects - fox, bunny and egg. So now these three new objects inherit the properties and methods of the passenger object. We don't have to declare them three more times. This is done using the assign() method of the Object object.

Read up more here.

The raft object

The raft object has one property only - position. It's either "leftBank" (the default) or "rightBank".

           var raft =
           {
               position: "leftBank"
           }

It also has a move() function, which moves the raft from bank to bank.

           var raft =
           {
               position: "leftBank",
               move: function()
               {

               }
           }

Filling in the methods!

Let's begin with the reset() method of the game object. First, we set all passengers' position property to "leftBank".

Then we clear all placeholders where the passengers could appear in, except for the left bank.

Next, we run the render() method of each passenger, to place them on the left bank. We'll be building these methods soon.

Then we set the position property of the raft object, to "leftBank". And the marginLeft property of raft to 0%.

After that, run the showMessage() method using the argument "title". Again, we'll build this method later.

Finish off by setting the game object's started and paused properties to false, and moves to 0.

               reset: function()
               {
                   bunny.position = "leftBank";
                   egg.position = "leftBank";
                   fox.position = "leftBank";

                   document.getElementById("raftPassenger").innerHTML = "";
                   document.getElementById("rightBank_bunny").innerHTML = "";
                   document.getElementById("rightBank_egg").innerHTML = "";
                   document.getElementById("rightBank_fox").innerHTML = "";

                   bunny.render("leftBank");
                   egg.render("leftBank");
                   fox.render("leftBank");

                   raft.position = "leftBank";
                   document.getElementById("raft").style.marginLeft = "0%";

                   this.showMessage("title");
                   this.started = false;
                   this.paused = false;
                   this.moves = 0;
               },

The purpose of the reset() method is to revert all game properties to initial settings, but without the game being started. This would happen when the site is loaded, so do this.

As promised, we will build the render() method of the passenger object. First, declare a variable placeholder. If position is "raft", then use "raftPassenger" as the value. If not (that is, if it's either "leftBank" or "rightBank"), append an underscore followed by the object's id property. Thus if you were attempting to run the render() method of the fox object, you might get "leftBank_fox" or "rightBank_fox".

           var passenger =
           {
               id: "",
               position: "leftBank",
               render: function(position)
               {
                   var placeholder = (position == "raft" ? "raftPassenger" : position + "_" + this.id);
               },
               move: function(position)
               {

               }
           };

The use placeholder to get the object that it points to. Remember we declared some placeholders and set their ids in the previous part? Well, now the innerHTML property of that placeholder will be assigned the innerHTML property of the HTML template of this object!

Reload your browser. See, the fox, Easter Bunny and Easter egg are on the left bank!

Now let's work on the showMessage() method of the game object. Remember the divs we created in the previous part with the ids messageBox and btnStart? It's time to get them here, and assign them to variables messageBox and button.

               showMessage: function(messageType)
               {
                   var messageBox = document.getElementById("messageBox");
                   var button = document.getElementById("btnStart");
               }

If messageType is "title", put the following content in messageBox and set button's caption to "Start".

There you go!

Now let's expand further on the showMessage() method. If messageType is "started", set the content and button caption as follows.

               showMessage: function(messageType)
               {
                   var messageBox = document.getElementById("messageBox");
                   var button = document.getElementById("btnStart");

                   if (messageType == "title")
                   {
                       messageBox.innerHTML = "<h3>Easter Bunny River Crossing Game</h3>";
                       button.innerHTML = "Start";
                   }

                   if (messageType == "started")
                   {
                       messageBox.innerHTML = "<ol><li>The objective of this game is to get all three passengers across to the other bank.</li><li>The raft can hold only one passenger at a time.</li><li>The fox cannot be left alone with the Easter Bunny.</li><li>The Easter Bunny cannot be left alone with the egg.</li></ol>";
                       button.innerHTML = "Restart";
                   }
               }

When will messageType be "started"? Why, when we run the start() method of the game object, of course. It will first run the reset() method, set started to true, and run the showMessage() method with "started" as an argument!

And when will start() be run? When we click on the orange button!

Now reload and click on the orange button!

It's looking a little cluttered and misaligned, so let's do this. This makes ordered lists within the messageBox div smaller in font, and aligns them left instead of center.

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

           #messageBox ol
           {
               font-size: 12px;
               text-align: left;
           }

Looking good!

This part was a little short, but rest assured that this was merely the groundwork for the real meat of the JavaScript. After this, we'll work on the move() methods of the passenger and raft objects, and tie everything up nicely.

Sunday, 14 April 2019

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!

Disclaimer

All opinions expressed on this blog are mine, and mine alone. Deal with it.

All technical information and code are written at my current level of understanding and may be incomplete. Some of it has been deliberately kept simple for clarity. Don't hesitate to correct me.

My experiences may be limited, and as such there may be blind spots in my reasoning. Feel free to disagree.

I'm not being paid to write this blog. This is purely a leisure activity. Keep your expectations low.

This being the Internet, someone is bound to take offense. The Web's a big place, and you're all big boys and girls. Seek life elsewhere.