How I made my first Javascript game in 1 day
Hope you join me on my journey.
P.S. the game is hosted on the sub domain of https://memopotion.neomonic.com/
I have always wanted to make a game. I need to get started with something simple.
Recently, I got the humble bundle 7000 icons, and I have all I need to build my first game.
First, the game idea
So I want to make a simple Concentration style game, if you don’t know what that is, it’s just a memory game where you flip cards to find the matching ones. However, the catch is that you can only flip two cards at a time.
Second, choosing the tech.
As a web developer, I have decided to use simple html, css and javascript. Although I do have experience with game engine, this game is so simple that I don’t need Unity or OpenGL. Also I have built things with canvas before, but this game is so simple that I don’t need to draw any pixel
1
I started with building a bunch of box and put them all under the flex. Each box take 20% viewport width with margins and border radius
2
Next, I throw in some potion icon from the humble bundle pack and amaze at their quality. I also but some radial background on each box to give it a glow effect
3
The potions are the content of the card, and the back of the card, I used chest as each of them. And I have decided to change the entire background to radial background. And have decided to forget about the cards because opening chest works just the same
4
Make the faded in animation for the chest with CSS. Hope that works on iOS. More on that later
5
Now I simply change the image when I click on the chest. It works
6
Since the rule of the game is you can only flip over 2 cards at a time, so I made an array to keep track of how many chest is opened at a time. And it will close all chest when the player is trying to open a third one
7
Now I have linked the ID of the chest to a different potion, so I can connect different potion to each chest.
8
And than I have created the disappear animation when two options has been chosen. Haven’t coded the part where two potions have to be identical yet, will do that later. However, my css is mobile first, meaning I have made this web game fit on a phone first and than I will adjust for desktops version, which is what I will do next
9
Ok desktop version done
So for the mobile version, I use proportion of the width of the screen while on the desktop version, I use the height proportion
10
I use the jewelry icons of the bundle to create a background for the web games
11
I added a simple CSS animation for each of the jewelry image to blur at a different time, to make the background more dynamic
12
Fearing that people can’t see the potions clearly with all the colors, I put a black mask behind the chest to make the color of the potions stand out
13
Going online, I found a great public domain svg for the floor background, looks much better now.
14
In order to make the background was responsive to screen size change, so I add more css for the desktop resolution
15
I place some placeholder text on the top of the screen, to guide players. Although I do feel like it is a bit out of nowhere
16
That’s why I used a potion book icon behind the text to make it look better. As if you are reading from the text.
17
Now, for the game stats, I want to display it at the middle upper part of the screen. So I made a div there and look, on the desktop, everything was centered! Finally. Also I have put some real game text into the text box
18
Found another SVG online that is on public domain and forced scaled it on the game stats session
19
Add two more icons, one for the keys to open the chest and another is a hourglass to count time
20
Ok now I have finally duplicated and randomized the order of the potion. I need to duplicate because I need two potions to match. Also the key count will increase each time the player clicks a chest. Also, I realized a bug that if I click twice on a potion, it will disappear. So that’s what I am going to do next
21
The stopwatch function is done. It will start when the player first clicks a chest.
Also fixed the double clicking problem.
22
Ok make the area unclickable after the chest disappear
23
Make the timer stop when the last chest is clicked
Added some shadows for the chest to make them stand out
24
After uploading to the web host, I realized the layout of the game in iOS is problematic, the reason is (this is actually what I have learnt this time by the way) the reason is because of all the space the navigation bar and the address bar of the iOS that took the screen. Also, on iOS, initially, the chests are not showing. Upon a few guesses, I realized that CSS animation on opacity of a div doesn't work on iOS browser, good to know, will avoid that like the plague as it has cost me half an hour to figure out.