I'm here to talk about my little personal project
A turn-based game built in HTML5
But before anything else, let me tell a bit about myself...
I do front-end design and development as a profession and I develop games as a hobby.
Spent 8 years doing Flash Development.
But has now fully migrated to HTML5 and JavaScript.
Wings of Lemuria is a small personal project I started way back in 2009 as something to do in my spare time.
Initially made the prototype in Flash using ActionScript 3.0.
Blitting is a traditional technique used in game development, where you copy pixels and paint it over a bitmap canvas.
Copy the pixel data and store them to a vector array.
Bitmap CanvasPaint it over to the main canvas
Blitting in Flash doesn't allow you to do bitmap data manipulation like scaling or rotation using bitmapData.copyPixels
.
Decided to write a quick prototypewith the Canvas 2D API. Using the same game assets that I had before.
JavaScript is a scripted language which means the code doesn't need to compile.
Which sometimes is a double-edged sword.
I decided to build my game in HTML5.
Because Flash was becoming irrelevant to the modern web
SpriteSheet
class as frame data.
define(
moduleId,
dependencies,
definition
);
define(
'game',
['my-class'],
function(MyClass) {
var myClass = new MyClass();
}
});
This allows me to create a more de-coupled game architecture without the need of complex OOP.
var entity = factory.create([components]);
Entities are objects that interact with the game.
/** entity magic training **/
var wizard = entity.create('Magic');
/** entity with swordsmanship training **/
var swordsman = entity.create('Sword');
/** entity with both magic and sword training **/
var jedi = entity.create('Sword', 'Magic');
/** a jedi entity that succumbed to the dark side **/
var sith = entity.create('Sword', 'Magic', 'DarkSide');
Attaching components to entities exposes new sets of APIs.
components.register('Magic', function(entity) {
entity.firaga = function(enemy) {
enemy.hp--;
enemy.burning = true;
}
entity.thundaga = function(enemy) {
enemy.hp--;
enemy.paralyzed = true;
}
});
var toon = factory.create();
var mage = factory.create('Magic');
/** toon takes a damage and is in burning state! **/
mage.firaga(toon);
/** toon takes a damage and is paralyzed! **/
mage.thundaga(toon);
Follow me on Twitter @jamesflorentino
or read my blog for random front-end dev tips blog.jamesflorentino.com
If you're looking for a link to my game, it's still a work in progress. You can however subscribe to its Facebook page to get updated once it's out.
Use a spacebar or arrow keys to navigate