Saturday, September 7, 2019

Test Driven Deck

While having a plan for testing your code is important, Test Driven Development (TDD) takes this to another level. The idea here is that you write automated tests before you start writing the code. When it is practical to do this, it is an incredibly good way of creating code. Planning tests gets you thinking about the code you are going to write – hopefully with an idea of the fringe cases that you are going to encounter. Writing the tests give you something to check the code against. All tests should initially fail, with a successful test likely indicating either an error with the test or an error with the test plan.

You then write the code and run it against the tests trying to pass one test at a time. Once you have passed all the tests and no missing tests have been discovered, you are finished the code and can start planning the tests for the next piece of code that you need to write. Having automated tests also means that it is easy to have the tests running frequently while you do other things and if something breaks then you know right away and as it is likely what you (or someone on your team) is currently working on, it will be trivial to fix the bug! Remember that in general the quicker you can find a bug, the less it will cost to fix it. This cost is in time, but can also be in money if the bug is in a production version and you have marketing and patching costs in addition to the cost of finding and fixing a bug.

We have a card class that can display any card, so what we need next is a deck of cards. This deck needs to be able to be shuffled and we need to be able to deal cards from the deck. So, how would we test such a beast?

In a sorted deck, the cards should be from 1 to 52 so simply drawing cards from a sorted deck and making sure they are in sequence would solve this problem. A shuffled deck, however, has two issues that we need to check for. First, we want to make sure that all the cards are in the shuffle (that we haven’t duplicated cards losing some cards or other similar problem). Next we want tom make sure the cards are not in order. Simply checking to see the card is different from its position in the deck will not work as we would expect that at least some of the time a randomly shuffled card would end up in the proper deck position. A good shuffle would have at least half the cards in a different position so simply counting how many cards don’t match would suffice most of the time.

As the deck class can be written without the card class, as it uses card IDs and not instances of cards, it is possible to write the deck class in its own html file which I called deckTest. This starts off with your typical html5 boilerplate followed by a simple version of the Deck class with none of the necessary methods implemented.



Deck JavaScript Test


test results go here





Now some of you may have noticed that there is a lot of test code here. This is the downside to test driven development. You will often end up with test code that is the same size as the code that you are testing, and sometimes even larger. The plus side is that you know your code works within the testing parameters and if you refactor or change code you will be able to check to make sure that nothing you have done is broken. Manual testing could have been done with a lot less code. As always there is a trade-off that must be made. In a solo environment, and possibly a small team, manual testing may be adequate and may be productive enough. As you start to get to larger teams, people inadvertently mucking up other people’s code happens a lot more often than you would expect.

Saturday, August 24, 2019

The Importance of Testing

Before you write any code you should have a way in your mind to test the code in order to make sure that the code does what you want. There are many types of tests but when you get right down to it, all tests are either manual or automated. Manual tests tend to be the easiest to implement as they just require some code that can be observed to be doing the correct thing. As games tend to be dynamic in nature, manual testing is very common in game development as coming up with automated tests is not always practical. Automated tests, however, are always preferable when possible to do so due to the simple fact that people do not have the time to go through hours of manual testing just to make a minor change. This means that most manual tests will only be run on rare occasions so that something may be broken for months before it is discovered making finding out why it broke difficult.

Due to the visual nature of the cards, automatic testing is not really that practical so we will resort to manual testing. More to the point, as the cards are poignant to the game, any problems with the card class will be detected immediately so manually testing them is not much of a risk. A very simple test program can be created to make sure that the card class works the way it is supposed to.

Create a new “CardTest” movie for holding the test. Copy the Card movie clip into this movie. This can be done by having a file with that movie open in another tab then in the library tab selecting that file and dragging the Card movie onto the stage. Make sure that the layer holding the card extends to the second frame. Add a layer for holding code and in the second frame create a blank keyframe in the code layer. Right-click and chose add actions to bring up the code editor for editing JavaScript on that frame. Here is the test code:

var firstCard = new spelchan.Card(this.firstCardMovie);
firstCard.setCard(1);
this.firstCardMovie.addEventListener("click", nextCard);
this.stop();

function nextCard(e) {
if (firstCard.faceShowing)
firstCard.setCard(firstCard.cardID + 1);
else
firstCard.showFace();
console.log("face: " + firstCard.getFaceValue() +
" suit: " + firstCard.getSuit());
}

While in the actions editor, make sure to add the Deck.js file to the includes by expanding the global list of scripts then selecting the include option and clicking on the + to add a script. Browse to find the script.

You can now simply click on the card to show the first card in the deck and keep clicking on the cards to loop through all the cards that make up a deck. This is a very simple test but one that confirms that the Card class is working as expected. Proponents of the technique known as test driven development would start with the test code and then write the actual code as we will see when creating the deck class that deals with handling a deck of cards.

Saturday, August 10, 2019

Creating the Card Class

We will place all the code for the Card movie in an external JavaScript file. For some strange reason, Animate CC 2017 does not let you edit external JavaScript files (hopefully an over-site that will be fixed in future versions) so another editor will have to be used for editing the JavaScript file. There are numerous editors available that support JavaScript, with Notepad++ being the editor of choice for me when I am using a windows machine.

Before we can create the card class, however, we are going to want to create a separate namespace for holding our classes so that there are no conflicts with any other code that we are using. The easiest way of creating a namespace is simply to create a root object with the name of the namespace we wish to  use. This can be done as follows:

spelchan = spelchan | {};

You should already be familiar with the new operator, which is used for creating instances of a class. The format for this is

 new constructor([param1,...,paramn]);
 
What is happening is the new operator is trying to find a constructor function named whatever name was provided with the number of parameters indicated. Some constructor functions, such as Array, are built right in to JavaScript. It is, however, possible to create new Constructor functions by simply having a function named whatever it is you want to call the constructor. Convention has it that you start constructor functions with a capital letter. This is a good idea as it distinguishes them from other functions.

Constructors can have no parameters, or as many parameters as you desire. Here is the constructor function for our card class. Notice that it takes a reference to the movie clip that it will be controlling. We could have had the class create the movie clip but by passing the movie clip we make it easier to attach objects from the Animate CC editor to our class.

spelchan.Card = function(cardMovie) {
this.cardMovie = cardMovie;
this.cardID = 0;
this.faceShowing = false;
this.cardMovie.gotoAndStop(9+this.cardID);
}

As a class consists of data and the methods used to manipulate the data, the above constructor sets up a holder for the card movie, the id of the card, and a Boolean flag that indicates if the card is being shown. By default, the card is blank and is not being shown to the user. To set the card and show the card, we need to have some methods. This is where JavaScript gets kind of weird.

All classes are given a prototype object that holds functions and other variables that are available to any instance of that class. To add a function to a class, you need to add the function to the prototype object. This can be done two ways. First, you can create the function directly in the constructor by assigning the function name to the code for a function. The other way is to assign a function to the prototype, by using classname.prototype.functionname = function(...) { ... };

Let us implement the setCard and getCard methods. When the card’s value is changed, the card has to go to the proper frame of the movie and stop. However, if the card’s face is not showing, we show the back image instead. Getting the card value is simply the matter of returning the cardID variable.

// n is the cardID for the card
spelchan.Card.prototype.setCard = function(n)
{
if ((n < 1) || (n > 52))
this.cardID = 0;
else
this.cardID = n;
if ((this.cardID == 0) || (this.faceShowing == false))
this.cardMovie.gotoAndStop(1);
else
this.cardMovie.gotoAndStop(9+this.cardID);
}

// returns the cardID for the card
spelchan.Card.prototype.getCard = function()
{
return this.cardID;
}

We now have the ability to change the card but as the face is not being shown, we have no way of verifying this. Showing a card is simply a matter of setting the faceShowing variable to true and going to the appropriate frame. The only complication is the fact that we need to handle a card that has yet been assigned a value. Hiding the face is even easier as we set faceShowing to false then stop on the blank card frame.

// shows the face side of the card
spelchan.Card.prototype.showFace = function()
{
this.faceShowing = true;
if (this.cardID == 0)
this.cardMovie.gotoAndStop(1);
else
this.cardMovie.gotoAndStop(9+cardID);
}

// shows the back of the card
spelchan.Card.prototype.hideFace = function()
{
this.faceShowing = false;
this.cardMovie.gotoAndStop(1);
}

This is all that is needed for a card class, but creating a couple of utility methods for getting the face of the card and the suit of the card is easy enough to do. This is done using math. The modulus function, which uses the % operator,  gives you the remainder of a division. Had we started counting from 0, this would work great, but as we didn’t subtracting one from the card id lets us use modulus to get the face value from 0 to 12 and adding 1 corrects this. A similar technique can be used to determine which of the four suits are being used by seeing which group of 13 the card falls into.

Saturday, July 27, 2019

7-1 Creating the Card Movie

As you already know, a deck of cards consists of 52 cards (54 if you count the two jokers, but for now we won’t worry about those). Obviously, this means that we are going to need 52 images. In addition to the images for every card, we are also going to need an image for the back of the cards.

There are two ways we can create images for the cards. One way, if you already have a set of bitmaps for the cards, is to simply import the 52 bitmap images. The advantage of this is speed. The disadvantage is that the resulting images are not vectors and will not scale well. One way to get around the vector problem would be to convert every card into a vector image. This only takes a slight bit more time and you end up with better scalability.

The other way is to build the cards in Animate CC (or a vector drawing program that lets you export images to Animate CC). This can potentially reduce the overall size of the deck by a fair amount. Having the cards being proper vector images also enables very good scalability. If you don’t already have a set of bitmap card images, then creating the cards in Adobe Animate CC will take just as long as it would to create them in a bitmap based paint program.

For this book, we are going to build all the cards in Adobe Animate CC. One way would be to simply create 53 graphic images. This works, but when you look at a deck of cards you will quickly notice that the cards are only made up of a small subset of images. If we create a series of symbols for the components that make up a card, we will easily be able to create the entire deck by assembling our components. This helps reduce both the time it takes to build the deck of cards and the amount of memory required for the cards at the cost of taking a bit more time to draw the cards but as card games are not fast-paced games this is not a huge concern.

When you think about it, a set of cards can be broken into 34 components. Making this even better, most of these are small components that only take a few curves to represent. The components used in this are shown in figure below.



Now, the top line consists of “Blank Card”, “Jack”, “Queen”, King. The Blank Card symbol is the background symbol. Notice that we surround the card with a hairline box. The card is 100 by 140 as that is the resolution I had in the bitmap deck that I created for my Java card games. The cards could be any size you desired, and because they are vectors the cards will look good scaled up or down.

The second line Consists of the suits, named “Spade,” “Heart,” “Club,” and “Diamond”. The third and fourth lines consist of the card face value text. There are two versions, one for black cards and one for red cards. The symbols are named, “Blk A,” “Blk 2,” “Blk 3,” “Blk 4,” “Blk 5,” “Blk 6,” “Blk 7,” “Blk 8,” “Blk 9,” “Blk 10,” “Blk J,” “Blk Q,” “Blk K,” “Red A,” “Red 2,” “Red 3,” “Red 4,” “Red 5,” “Red 6,” “Red 7,” “Red 8,” “Red 9,” “Red 10,” “Red  J,” “Red Q,” and “Red K.”

Once we have created the components, we are going to need to create a card movie. The purpose of this movie is to hold the images for all the cards and go to the appropriate image based on what value is assigned to the card. I have decided to give each card a numerical ID, which is as follows. The ID of 0 represents no visible value (in other words the card back is shown). cards are then given ID in numerical order, with Aces being the first card and kings being the last. We go through the suits in alphabetical order, so we have the Clubs, Diamonds, Hearts, then Spades.

As the ID can be simply calculated based on the value of the card (Aces being valued as 1, Jacks valued as 11, Queens valued as 12 and Kings valued as 13), it makes sense to take advantage of this fact. We do this by mathematically determining the position of the card. How? Every card is a single frame. We have the card back on frame one and start the first card on frame 11. We then simply need to add 10 to the ID to find the correct frame for the card face. Note that Create.js uses 0 based indexing instead of the 1 based indexing that non-canvas animations use. This will mean that the frame numbers will be off by one so care needs to be taken when writing the JavaScript for going to specific frames using the frame number.

Now, a bit of code is going to be in order. We are going to need to get and set the ID of the card. We also want to be able to show the back or the front of a card. While neither of the games in this part of the book use this feature, it is simple enough to implement and will be of obvious use with many other card games. This will be covered next fortnight.

Saturday, July 6, 2019

Chapter 7 Overview

One nice feature of card games, is that once you have created a card game you are able to take advantage of existing assets and code to handle the cards so that creating other card games in the future is easier. In this chapter we are going to take advantage of this in two ways.

First, in ``Creating the Card Movie'' we are going to create a card movie. This movie will have frames for all the cards in a deck and will be able to display any specified card. While fairly simple to build, creating a deck of cards is a time-consuming process. Thankfully, we only need to do it once. After the card movie has been created, you simply need to drag it into the new Animate CC project to use it in other card games. You could also place it into a common library.

Next we are going to create some JavaScript classes. For the most compatibility, which probably is not that big of a deal as most browsers in use support ECMAScript 6 JavaScript code, we are going to use the older and most compatible way of creating classes. In ``Creating the Card Class'' we create the class for handling the cards while in ``The Importance of Testing'' we test this class.

Test driven development, which is a very common practice now, does things the opposite way so in ``Test Driven Deck'' we create the tests for a deck class and with the tests ready to go actually create the deck class in ``Creating the Deck Class''

Once we have these classes created we will be able to build our Video Poker game.

Saturday, June 29, 2019

Spelchan.com Summer 2019

Blazing Games has been closed, at least the home page has. For the moment I am leaving the other pages up so if you know the link to a game then you can still go to the page. This will be eventually changing but I'm in no rush here. I produced a lot of Games so there is a huge amount of porting work to do. I have reviewed the  results of the poll and as a result have made changes to my release plans for this year.

Coffee Quest was released a month early. My holiday games seem to be slightly more popular than I expected.  For this reason I am going to make sure that I have holiday games ported as appropriate. This decision has me in the process of porting my Canada Day flag game for release this Canada Day (July 1st for non-Canadian visitors). Next year I will release my Independence Day game for my American friends.

I have decided that, in memory of my Mother, I am going to only release Color Collapse episodes on Mother's Day but do plan on creating related games once the remaining two episodes have been released. 

I noticed that the voting list of games missed some of the games that were already in HTML5 so those will become filler for when I am too busy to finish porting other games. The first of these will be Sudoku which will be released in August as my card and dice collection are very low in popularity. A beta of Coffee Quest 2  will hopefully be released this September with a Halloween game for October. November’s release is not yet determined yet and will be dependent on my time in September and October and I plan on creating a unique Christmas game this year.

I am not going to have any official release schedule for 2020 (other than a game every month) but do plan on showcasing the games I am working on in whatever game I am going to release in January. Hint, it will not be an updated Calendar NIM game this time.

So hopefully you will enjoy the site. Next fortnight I will start the next chapter of my Creating HTML 5 Games with Animate eBook so hope you continue reading.

Saturday, June 15, 2019

Final Touches

As is quite often the case with my games, the last part of the game that is created is the title screen. The first part of the title screen is the game's logo. My One of the Weeks logo is not really appropriate, even though this game is part of that series, so to make this a stand-alone game I created a new logo. For the start button, I opted for a door as that is emblematic of the game play. As always, the code to control the button is very straight forward.



spelchan.Nightmare.prototype.startTitle = function() {
this.playButtonHandler = this.playButtonClicked.bind(this);
this.stage.playBtn.addEventListener("click", this.playButtonHandler);
this.stage.stop();
}

spelchan.Nightmare.prototype.playButtonClicked = function(e) {
console.log("Play Button Clicked!");
this.stage.playBtn.removeEventListener("click", this.playButtonHandler);
this.stage.gotoAndPlay("Intro");
}

One problem that I had with the game at this point was the fact that someone who started playing the game without reading the instructions would be totally confused by what was going on. While confusion may actually add to the story, it can also turn a lot of people off the game. As this is the first episode of a series, one thing I don't want is to turn people off the game.

While I would like to think that people read the instruction pages that I put a some effort into creating, the reality is that a lot people just start playing the game.

One solution would be to have a link to the instructions on the game's title screen. The problem with doing this is that the people who skip over the instructions page are likely to not bother clicking on the instructions button either. This means that I would end up putting more time into creating the instruction pages - which is more time consuming then writing an instruction page - which few people are going to read. This is obviously not a good solution.

The solution I did for this episode is to incorporate the background portion of the instructions into the game by starting the player at an explanation screen. This is simply a looped animation of the text bubble growing then shrinking. The code for handling the button is also very simple.



spelchan.Nightmare.prototype.setIntroButton = function(e) {
this.introButtonHandler = this.introButtonClicked.bind(this);
this.stage.con_btn.addEventListener("click", this.introButtonHandler);
}

spelchan.Nightmare.prototype.introButtonClicked = function(e) {
console.log("Intro Button Clicked!");
this.stage.con_btn.removeEventListener("click", this.introButtonHandler);
this.stage.gotoAndPlay("enterRed");
}

And that is all there is to the game. Next fortnight we will look at changes to my Blazing Games porting plans and next month we will start chapter 7 which sets the foundation for the creation of video poker.