Disassembling the game

Free source: Scratch me

If you want to download the code for this game scroll to the bottom of the article. If you want to test the game click here.

Do you know the lottery ticket which you have to scratch to find three the same items to win? I kinda made a game on this idea.

This game took me more time than I expected to make. Do you want to guess what was the hardest part? Images. Initially I was thinking to make 5 categories with 30 images. I wanted to include luxury cars and hot girls, but ended up with only 3x10 and no cars, no girls...

There is not much code in a game and an expert could write it in an hour or two, but I kept running into problems so it took me more than a few days. To gather images it took me even more time... I did not want to add random images, I wanted them to be beautiful, I had chosen not a standard size, so there was a need to resize all images, I also did not want to waste my bandwidth, so I had to optimize the images... So much annoying work...

BTW all images are from https://pixabay.com/

Okay, lets dive into code.

The code

This game is different because I first time tried to make preloader. I read about states in Emanuele Feronato article and applied everything I learned in it. To say the truth, I ran into some problems with functions, for some reasons I could not build them in the state like in the example. It just did not work for me, so I wrote them outside the state.

Now lets talk about interesting part: how to create rounded rectangles with Phase:

Second line: we fill rectangle with random color.

First line: we prepare "canvas" for our rectangle.

Third line: we draw rectangle. 0, 0 means that we draw it at the top left corner of the "canvas", as we draw rounded squares width and height is the same. The last value is roundness.

I store all rounded rectangles in array that it could be easy to access as there are a lot of them (start with 2, but end with more than 2000).

We also want to allow people to destroy rectangles on mouse move, so we add one action:

It is strange, but when I tried to use destroy function I kept getting error messages in the console. When I changed it to kill error messages disappeared.

The rest part of code is really easy and self explanatory.

You can download game code here.

At this point the game is kind of boring. What you can do? Make a test. Lets say: guess a city, guess an event, guess a famous person. Less you need to scratch to make a correct guess, more points you make. What do you think about this idea?

If you make something interesting with this code, don't forget to inform mepea@gopgames.eu

If you want to test the game click here and support me on Patreon.

NePo Posted on December 15th, 2016

Game: Love Solitaire

I don’t know why I called this game Love Solitaire. Original game is called Lighting Card.

This game story is the same as all my previous games. I found a game, I played it a lot, I liked it very much, I made a clone. When doing a clone I always think: can I improve the game? How? This time I done it by removing sound. It was really annoying in the original game.

I don’t think that there are more similar games to this and if there are they definitely are not called lighting card, so we will have to dive into games rules and to be fair, not actual game rules, but my interpretation of the rules.

Analysis

The first image is from Lighting card, the second from my game. As you can see in the original game cards resemble such card games as Uno or Ligretto and not the classic card deck.

You can win the game if you get rid of all your cards faster than your opponent. Initially you have 30 cards in your deck and 6 more in your hand. You can get rid of the card by dragging it to the middle row of the table. The cards in the middle can be placed only according to the rules. If arrow bellow the card point upwards you have to place bigger card (eg. 11 - up, you can place 12), if arrow bellow the card points downwards you have to place smaller card (eg. 9 – down, you can place 8). In total there are 13 cards, so line goes like this: 1,2,3,4,5,6,7,8,9,10,11,12,13,1,2,3…

There are four types of cards (only three in the image). Green – Wild card is the same as joker – can be placed on any card and any card can be placed on it. All other cards can be placed only according to the rules. Yellow (orange?) - regular cards. Red – changes the direction of the arrow bellow the card. Blue – lighting cards, if a blue card placed on another blue card lighting effect is displayed and you get an additional points, if a blue card placed on any other color card nothing happens.

When you and your opponent do not have any cards that could be placed in the middle, middle deck lights up to allow you to have four new cards. If you do not have cards that you could move to the middle, but middle deck does not shine, this means that opponent still has cards to place. But, if middle deck shines, it does not mean that you do not have cards to place, only your opponent does not have cards to place, so do not rush to flip cards. Playing carefully is the way to the victory.

I do not know how points are counted in the game, but it should relate to the timer somehow . I do not like that. I like to play games as slowly as I can. To say the truth: you can’t play this game slow, because opponent becomes faster with each level. I think I won 7 levels before it became to fast for me.

Now lets talk about my game. I used the same card deck as in my previous games. If people used to play solitaire they know how it goes: A,2,3,4,5,6,7,8,9,10,J,Q,K,A,2,3... There are 4 jokers as in the full pack of cards. The diamonds change arrows direction. And you have to get rid of 56 cards total.

There is no timer in my game.

There are two modes in the game: NePo and RanDom. In the NePo mode you have full deck and you have to get rid of it. This means that no card should repeat (unless I made a bug in the code) except jokers which you should have four. In the RanDom mode you have the same a mount of cards, but all they are random so in theory you can have 56 jokers, but its not very likely. And if you will have 56 jokers at some point you should cry, because you wasted all your luck which you could have used to buy a lottery ticket and became a millionaire.

In reality it’s more likely to have no jokers at all than have a double numbers (ten and more) of any card. So, choose the mode you like more.

That are the main changes. Now lets dive into the code.

Code

In this game we have “artificial intelligence". To say the truth: we have a lot of artificial and no intelligence. The opponent takes first card and check if he can put it in the middle, if no - he takes the second card and so on… You can use the same functions to check if you and the opponent can place the cards in the middle. The main difference when you do the checking. In the players' case, you need to check only when cards collide. In the computers' case you have to check before moving a card to find if computer has something useful in "the hand" and second time on collision, because chosen cards do not appear instantly in the middle and the player might have dragged some card faster than computer.

How to make drag and collision I told in my previous article and about sprites movement when discussing Solitaire TriPeaks. So the only interesting part in the code of this game is: how to do timed evens.

This code is activated with the start of the level. coTurn is a function that does all artificial opponent moves. The timer is stopped when level is over.

That’s easy.

I think that this game would be really cool to play against your friends real-time via internet. My coding skills are not up to the level to make such kind of game. Maybe you would like to try?

You can play the game here.

If you want to make a card game, you can use my card pack. You can get PNG version for free (part one, part two). If you want to support me, you can buy SVG version or become my Patreon.

NePo Posted on September 18th, 2016

Game: Forty Thieves

In my previous article I told about my problems with z coordinate in Phaser. I got a suggestion which I have to investigate and probably I will write about it in my future texts:

http://www.html5gamedevs.com/topic/24904-solitaire-tripeaks/

Thanks lumoludo.

Today I would like to present my second game. Again, it is a solitaire card game interpretation. And again, there are more websites which explains Forty Thieves game rules in detail than you need.

So, lets dive into the code.

This game is really fun from the code perspective:

first: instead of click, this time I used drag;

second: if user lets card go, it has to go back to its previous location;

third: I also used double click;

four: I have to add and remove click ability dynamically all the time;

fifth: cards can be placed only on correct cards.

So where would you like to start?

If you read my first game article you do not need more explanation. I enable ability to click and drag; change the cursor, that user would know, he can click; add events for click, start drag and stop drag.

Now you can drag a card. What if you release the card in the middle of nowhere? Card has to go to its original location.

First you have to save original card coordinates somewhere. You can not save card coordinates on startDrag, because somebody can let go the card and catch it (you would be in trouble). If you know where you want to go it is easy: you can use tween movement like in my previous article.

You drag the card to correct place. How do you know it’s correct place? You have to check if both cards fit each other according to the rules. How do you know which cards to check? You don’t.

As far as I know card games do not use physics, so there is no such thing as collision detection. Good news: Phaser allows to do the simpler version of detection. So you take a cycle and check all cards for collision.

Trust me this works. You get the bounds of each sprite and check if they intersect. But there is another trick. If you place the card on another two cards, collision will come back true for both. How do you know which one user wanted to choose? As I said, this game is fun from the coding perspective.

Phaser does not have double click event only click. What do we do? We fake it:

The idea is: if you click fast enough we count it as double click. To do that we need to know time-stamp of your current and previous click. I didn’t think about it myself, I should give a mention where I found it, but I can remember.

So, that’s all for the code part.

You can play the game here.

If you want to make a card game, you can use my card pack. You can get PNG version for free (part one, part two). If you want to support me, you can buy SVG version or become my Patreon.

NePo Posted on September 6th, 2016

Game: Solitaire TriPeaks

My first game with Phaser was Solitaire TriPeaks. To be fair, a few years back I made this game with jQuery and it worked perfectly. Now, when I wanted to learn Phaser, I thought, I could remake the game again. If you want my advice: solve only one problem at the time. As I already had graphic and logic of the game figured out, I had only one problem – to learn Phaser.

I will not go into TriPeaks rules as there are more than enough sites on the net where you can find rules in detail.

So, lets dive into the code. In my previous article I described most basic stuff of the game and I don’t want to repeat myself. Today we will talk about new stuff.

Apparently, in Phaser you can not have click and drag event on the same object (or at least I could not figure this out). That is sad, it could be cool, because some people like to drag and others like to click. As I had to choose one method, I decided to go with the click. So, what happens when you click? Clicked card from one of the peaks moves to the main card of the deck.

In the previous article tween was used for making blink effect, this time is simple movement: you just say where you want to move.

When you move the card, you want it to be on the top of all other cards, but… In HTML you have z-index, in math you have z coordinate, in Phaser you have nothing… Somebody thought: with Phaser we will be making only 2D games so we do not need depth. It makes you wanna strangle that guy who did thought that…

Before you do the crime, I have to tell you: there is a workaround.

If you add two objects in Phaser, when moving, the first one is always below the second one. How to change the order? If you add the objects to the group, you can change their order in the group.

First you need to create the group:

Next you need to add object to the group:

Now, when you have all your object in the same group, you can change their order:

This function brings the card to the top of the group (you can also bring it to the back, o just one object up). But there is a small problem. If you have two groups, the first one will always be under the second group, so there is only one way: to keep all object in the same groups, which is crazy, but… hey, this is how it works…

There is one more thing I want to share: the score.

First you have to add a text object:

As you understand, in the beginning the score is zero. Later you have to update the score:

So, that’s all for the code part.

You can play the game here.

If you want to make a card game, you can use my card pack. You can get PNG version for free (part one, part two). If you want to support me, you can buy SVG version or become my Patreon.

NePo Posted on August 30th, 2016

First game: Memory

I decided to make games with Phaser and document my journey all the way. In my previous article I wrote that the first game should be a cards game. My first game with Phaser was a cards game, but I thought that for a newbie my first game can be too hard to understand, so today I would like to present to you another card game, much more simple.

But at first let me give you a question: can games teach you a foreign language?

I believe that they can.

I guess, that you all played memory game atleast once in your life. Just to be clear. There are a lot of cards on the table. There is always an even number of the cards. First, you open one card and then you open the second card. If cards mach some magic effect happens, if cards are different they are closed (reverted to the previous state). The game is played till all cards are matched. It is hard to think of the simpler rules for the game.

Before diving into code, I want you to think about one more thing. What if we add words to the cards? The images on the cards are the same, but the words are different. On one card the words are in your native language, on the second card the words are in the language you want to learn. Would that help to learn the language?

At this point I am hoping that you know what is Phaser (already downloaded it) and want to write your first game.

There are several ways to define the main function and I like the one you can find in the official tutorial:

There are a few important things to know.

First: 288, 394 is the size of the game. You can choose the size you want.

Second: 'game' is the id of HTML div in which the game will be loaded. It is wise to load game into div and not the whole page for many reason e.g. you want to place a banner above and below the game, of course, you can think of better reasons for placing game into div.

Third: { preload: preload, create: create} are standard functions of the framework that we will use. There are more than two functions in the framework, but in such small game we do not need more.

We start with preload function and the first thing we want to do is to load background image.

I guess there is no need for more explanation here. Now lets load the cards:

See the difference? Let me explain. Instead of loading each cards as a separate object (that would be a pain), I load all cards in one sprite-sheet. The size of one card is 72, 96. I can access each card in the similar manner as array values: the first card in the file will have index 0; second 1 and so on.

I also use SVG instead PNG. Why? Because I can. There is no practical advantages as far as I know.

Do you want to make games only for Desktop or for Desktop and Mobile? If you have different screen sizes, you want your game automatically to adapt to them.

These two lines do the trick.

So we loaded images, now we have to show them and that is done in the create function.

This is straightforward: write coordinates where you want to place the object and the name of the object. Don’t forget that 0, 0 means top left corner. The same is done with the cards only we do it in cycle because there a lot of them.

Now lets talk some specifics about game logic. In the sample I made, the game is 4x4, so total 16 cards or 8 pairs. (Remember, all cards go in pairs?) But I drew 10 of them. So, at first we need randomly select which 8 of 10 will be displayed, then we have to mix the card that they would be displayed differently every time. This is boring stuff, if you know a little bit of coding, you can do this part yourself. Lets get to the interesting part, I called this function addHit.

frame is an image that is shown to the player; if card is not open, we want to show him a cover.

alpha means that the card is visible; it will be important later.

inputEnabled – user can click the card.

input.useHandCursor – we change the cursor style to indicate for the user that he can click it.

And the last line is most interesting: what happens when user clicks? We call another function.

As we have a function to add click, we also have a function to remove it. Basically it does the same only in reverse (not reverse order).

There is one more function I want to talk about. What happens if both cards are the same? A blink effect is shown.

This is done with the help of tween. tween is a library of various effects. As you can see in the code we change card visibility to zero. When blinking action is complete, we change card frame to empty card and remove ability to click the card.

So that’s all for the Phaser part of the game.

You can try demo here and download all the code here. Of course, it’s just a demo and not a complete game, it has no start screen, no scoring system, no levels.

If you have any questions feel free to email me pea@gopgames.eu and support me on Patreon.

NePo Posted on August 25th, 2016

What do you hate most about flash games?

Original text was written in 2011 summer. I not necessary agree with what is said bellow, but it is so fun to read that I decided to publish this old text anyway. Have fun:

I always had weak computer so I never played hot titles like Need For Speed or Call of Duty, instead I had fun with browser based MMO and flash games.
Today I want to talk about flash games. Flash games developers often forget that what applies to big titles not always is true for the small ones.
What do you hate about flash games most?

While you think, let me share my list:
1) Music. Then you make game like Silent Hill you need music to set the mood right. Why the hell you need stupid music for a flash game? STOP MAKING MUSIC FOR FLASH GAMES! Then I play flash game I want to listen to my favorite mp3 collection or my online radio station. So the first thing I do then game loads - turn of that f*** music. Am I alone doing this?
2) No sound/music off button. If I can’t find music off button, I don’t play the game even if it’s the best flash game in the entire flash games history. Flash games with music just piss me off.
3) Music/sound off button is not working correctly. Well, there are number of ways how can it work wrong. You turn sound off and in the beginning of every level it automatically turns on. Or… You turn sound off and then you something achieve some dude greets you. Or…
4) This game brought to you by [insert company name here] studio. I don’t mind to see ten flashing logos before I can play the game. I just hate sound. Do all my neighbors really have to know then I play stupid games?
5) Story line intros. I hate this, really. Imagine: game where stickman kills other stickmen and it has intro. Army of stickmen kidnaps a random stickman. I know it sound terrible to read that. But to look at it is even more horrible . Who wants to ready that stupid intro dialogs, it’s not Diablo5 it’s a stupid flash game!
6) 8-bit games. Do you want to know what my favorite game was back then? It’s Stunt Car Racer (It even plays sounds through speaker). I know, after playing Need For Speed it looks just stupid. I played 8-bit games back then a lot. And now… You have all the best technology now and make 8-bit game on flash? You are pathetic. It’s not cool, it’s just stupid!
7) Sorry, you are dead, try again? You have like ten lives, pass five levels and die. And next thing – you see ten company logos flashing again. Why game dropped me at the first game point? Why it could not just throw me at “choose level to play" place? Is it too hard to do this?
Are you ready to share your list?

NePo Posted on March 24th, 2016

How to choose the right framework?

So you want to make a game? But, of course, first you have to choose the right tools.

What game do you want to make? Some frameworks are for 2D games, others for 3D, some have great physics libraries, others don't. Of course you can always look for the framework that has it all, but there is no framework with out a downside.

You do not need to have detailed plan of the game you want to make, but you need to have some ideas. It would be better if you had more than one idea so you could choose the framework that you could use more than once.

What is your target platform? Its nice to have exact target audience, but most of the time at the beginning we make the games for ourselves. So what is the main platform? Is it Android or iPhone? Is it PC or Xbox? Or maybe that new thing? In theory you can make games for all platforms, but if you are Indie it might be hard and take a lot of your time. Choose one and double down on it.

What language do you know? If there is a programming language, there is a way to make a game in that language. Maybe not all languages have frameworks. Maybe frameworks that are written in languages you know do not meet criterion for the games you want to make. You might need to learn a new language.

What should you choose if you do not know any language? Choose – Unity. It can be programmable in several languages. It was the hottest thing in past five years or so, it should be hot thing in the near future.

I know javascript so I was looking in this list https://html5gameengine.com/

How good is documentation? It can have most impressive samples but if there is no documentation or documentation is only half-baked it will be hard to make games. Documentation without sample games does not work either.

How big is the community? Usually this criterion is discarded. But it is very important. Do you want to make and play your games alone or with people around the world?

The best documentation can not help you if you are stuck. Community can. Community can test your games and give you valuable feedback. Community can give you a kick in the butt which sometimes is the best thing you can get.

At first I started making web games with jQuery. It is very powerful tool and you can do whatever you like, downside – for some things to work you need to write a ton of code. Later I tried GameQuery which is extension of jQuery for games. I still got all the power and with specification for the games, so some parts became easier. But it also had downsides. I believe that it is very cool tool, but community is practically none existent, so development of the tool was very slow. Second downside – at the moment I played with it, it did not have physics implemented. Bummer.

Now I play with Phaser. First time I tried, I could not believe how limiting it is. It's like going from Ferrari to Fiat 500… Where is the power? I will tell more about my Phaser experience in the future.

If you find the right tool you can use it for the rest of you life. If you need a new tool for every new game you make, maybe you do not spend enough time looking for the right one?

NePo Posted on March 23rd, 2016

What your first game should be?

I do not think, that anybody asks this question before diving into game development, because if you want to make a game, you already know what game you want to make and this is the problem.

Do not pick too big. I saw a lot of people picking games like Quake, Doom, Half Life... Maybe somebody wanted to make Age of Empires or Star Craft (I did not met any one who wanted and started making strategic game, I wonder why?) but these games are way to big. To be fair even Battle City is too big as your first game.

People who picked too big games say that they learned a lot and this is understandable because you have to justify why you wasted two years of your life and still haven't made any working games, but the sad truth is that your learned shit. Yes, I am right and you are wrong. How do I know this? Because you been solving the same problem for two years!

Do not think anything original. Let's be very clear: make a clone. It is very rare that people understand how games mechanics works before they start making games. If you think that you are genius (most likely you are not), you try to make something original and in the end your game sucks: it is hard to control, it has no purpose and nobody wants to play it.

So you what your first game should be? I say – cards. Why? It is small enough. It is hard to screw up as you can always look for the rules on the net. It has some moving parts and need some animation, but not a lot. It has some logic but not too much. It has some interaction, so you need to make basic controls. Do not know any card games? Try http://worldofsolitaire.com/

My first game with Phaser was a solitaire and I have to say that it was more challenging than I expected. Of course, I made it in one week, not in two years. I promise to talk about it in feature articles.

My first-first game was not a solitaire. It was a clone. Original game was 2D and had only 3 levels. You had to control submarine and sink the ships floating above you.

To make a game I had to:

Make keyboard (mouse) controls,
Ship floating animation,
Collision detection (bullet and ship).

Essentially the same I had to make for the card games. So if you do not like cards, there are simple games you can make.

NePo Posted on March 20th, 2016

Disassembling the game

In my first text I wrote short introduction about myself. Now let's talk about idea behind this blog.

I love playing games, but my love is different than most of people. I can spend hours and hours playing the game I like, but the main reason why I spend that time is not enjoyment. Of course if I do not enjoy the game I don't play it at all.

The main reason for spending a lot of time on the game is trying to understand mechanic behind the game. Why this (or that) game is so good? Can I make it even better? What happens if I remove one feature of the game? Will the whole logic go south?

In this blog I would love to discuss what makes games great, but there is one caveat: I will talk only about small games.

I am one man band: I make ideas, I write the code, I draw the art, I do the testing and the last thing – I do the marketing. So I will be talking about the games that small Indie company could make, which mostly includes Flash, HTML5 and mobile games. Of course I have my preferences to the games, so probably not all kinds of games will be discussed here. For every game I will try to find what make it tic, what is not so good, what can be better.

From time to time we will talk about the code, but I do not think that code is a problem. There are tons of tutorials how to code games, but most beginners make games that suck. Why? Because knowing how to code is not enough. Do you want to make a good game or the one nobody cares? If you want to make a good game you have to understand how games work. If you want to understand the game, you have to play it. So start playing.

NePo Posted on March 17th, 2016

Hi, I am NePo

Sometime ago Lithuanian parliament declared that surname belongs to the nation, not to the person. At least they do not require to register nicknames (yet). I am a blogger from Lithuania who was blogging under NePo nicknames more than ten years. I love writing. Also I love games.

I was introduced to programming then I got my first PC. My father introduced me to Delphi (Pascal) programming language. First thing I tried to make was a game. It was a simple 2D game of sinking ships. I made a game, but it was blinking and flashing… At that moment I found out that there is such thing as “Graphics" and you just can't say “move left". Back then there were no frameworks and tools looked like from the stone age. It was hard to make games.

My second game was Tic Tac Toe (huge step back). It did not need “Graphics" as it was only buttons and no moving things.

My third game also my bachelor work was MMO (no lack of ambitions there). It was successful. And by successful I mean, I done everything I planed. To be fair it was played by ~100 people, so I did not run into any big troubles like server overload, hacking, cheating or critical bugs.

After graduating the university I still made games on my free time. Most of them I played by myself. A few got lucky and gathered ~50.000 players just in a week or so.

I always wanted to work in game industry, but I never wanted to be game programmer or game tester. I send my CV on every chance I saw, I got invited to the interviews three times. No luck. I guess 50.000 players means a shit in the real world.

After the last interview went south, I though: I do not need anyone's permission to do what I want and I do not need anyone's permission to share what I am doing. Yes, I would love this to be my full time gig, but it is still better to have a hobby you really enjoy than do nothing. Games really light my fire. If I spend just an hour a day doing something related to the games, I go to bed really happy.

Let's talk about love for games next time.

NePo Posted on March 16th, 2016