Every summer I try to use my spare time for a new project. This year I decided to create a (very!) simple videogame to improve my javascript skills and put in some nice pixel art.
The concept
I wanted to keep it simple, and since most of the games are nowadays created for mobile phones, I wanted the most basic inputs: two big buttons at the bottom of the screen so that it's easily playable on a smartphone. I decided for a main character at the center of the screen, with enemies approaching from both sides and the 2 buttons for left and right attack. That's all.
The world
Since I wanted a simple and fast game, I went for the most classical setting: the fantasy knight against a monster invasion. Thinking about the title, I decided for "Legend of the Moon Stones", so I incorporated the concept of collecting different stones for some power-ups and nice effects.
Then I opened Gimp and started putting some pixels together to create the main character.
(click on the image for animation)
For the background, I used some different layers to add some depth, and created a daytime, mountain background for my hero's adventure.
Next, I created the art for the first enemy, a slow, weak zombie warrior for the first level of the game.
(click on the image for animation)
Start screen
With some art in place, I created a new web project, put together a Javascript canvas and some CSS for a main screen with height and width suitable for all the desktop and mobile phones (I used 144x256, automatically zoomed to fit the screen height).
I used the setInterval() Javascript function to show animations on the screen: this function simply draws everything, then sleeps for a specified amount of milliseconds, giving my game an (almost) fixed framerate. For my test, I used a 20ms sleep, so that the screen is refreshed 50 times in a second (50fps). This framerate isn't exact of course, because you should add the compute time for every frame an addition to the sleep time, but for modern devices (and with simple graphics like mine) this time is negligible.
I used the different layers of the background to create a nice transition. For the main title, I downloaded a free comics font from dafont.com and traced it using Gimp.
(click on the image for animation)
First level
In order to win a level, you simply have to kill a certain number of enemies: I set it to 50 for the first one, and the only type of enemy will be the weak zombies, since it's a sort of tutorial to teach how to play. The enemies spawning rate is increased after you kill some of them.
(click on the image for animation)
The starting blocks are all in place, now it's just a matter of adding stuff to keep it interesting and fun to code (and hopefully to play!)
What's next
There's still a lot to code obviously: first, I need to manage to stones spawning and collection, player's life, level progression, different kind of enemies. Then sound fx and music, a simple story progression, maybe with some different "worlds" to play in, etc.
More posts to come while I progress further with the development. Thanks for reading!
