Growing up as a child of the ’90s has always been a bitter-sweet kind of experience, but it certainly also came with a multitude of benefits. We’ve been exposed to countless priceless moments that have come and passed, moments that stand to make history and which may never be experienced again by newer generations. One such example of a beautiful lived-through historical moment is growing up with the fabled game. Space Invaders Simple yet memorable, Space Invaders made waves across the world and undoubtedly served as a catalyst for the revival of a previously stale and dying gaming industry that’s now priced at no less than 173.7 billion USD. What we're going to do Nostalgia trip aside, the plan here is to rebuild “Space Invaders” in MelonJS while also taking advantage of ConfigCat's to toggle your player's ship from the default one to another, more custom version. feature flag management service What is MelonJS​ ? Well, silly naming scheme aside (which may or may not give you a craving for melons), it’s an: actively maintained open-source JS-powered game engine that’s licensed under MIT , as it’s a modern remake of the engine that's perfectly adapted to support ES6 class, inheritance, as well as many other goodies. If you want to learn more about what it can do, check out their docs right . Personally, I’d go for MelonJS 2 here What are Feature Flags? In short, you can visualize a feature flag as a switch that’s used to activate or deactivate certain functionalities that may be present in your application. Here are some examples of why you may want to use feature flags: give early access to new features to only a select few targeting specific demographics various other testing purposes releasing things in a more ordered and stable manner Why use ConfigCat? What makes ConfigCat attractive is that they offer a very balanced , which includes a plethora of things, including (while most other competitors would have you pay extra for those). This eliminates any artificial incentive for you to upgrade unless your business organically scales to new requirements. forever-free plan their entire security stack You could technically create your own in-house feature flag service, but it would make more financial sense to just use an already existent one like . ConfigCat’s Time to build Space Invaders! The version of Space Invaders that we’ll be building won’t be anything truly fancy, just your average, stripped-down base game with no extra bells and whistles. We’ll have a set of ships arranged in an 8 by 4 grid rushing toward our ship. Project structure The easiest way to start your project is by getting the provided by MelonJS. After that just trim your excess folders and files, and the result should look like this: ES6 boilerplate src
└── data
|    ├── img
└── js
|    ├── renderables
|    └── stage
├── index.js
├── index.css
├── index.html
├── manifest.js Here's the of the finished game, in case you want to follow along. repo link Building the game To start using MelonJS, we’ll just add the following line to the top of each file where we’ll need to use its functionalities: import * as me from 'melonjs/dist/melonjs.module.js'; For this project, we’ll add three more files under the js folder: - used to define things like laser’s width and height constants.js - used to define the Laser entity laser.js - used to manage the creation and movement of the enemy ships enemy-manager.js The entry point for your project is the file where the canvas is prepared and all the prerequisites for the game are preloaded by the method: index.js onReady() me.device.onReady(() => {
    setTimeout(() => {
        if (!me.video.init(
                1218, 562,
                {parent: 'screen', scale: 'auto', scaleMethod: 'flex-width'})) {
            alert('Your browser does not support HTML5 canvas.');
            return;
        };
        me.audio.init('mp3,ogg');
        me.loader.crossOrigin = 'anonymous';
        me.loader.preload(DataManifest, function() {
            me.state.set(me.state.PLAY, new PlayScreen());

            me.pool.register('player', PlayerEntity);
            me.pool.register('ships', EnemyEntity);
            me.pool.register('laser', Laser);

            me.state.change(me.state.PLAY);
        });
    }, 5000);
}); Under the renderables folder we have two files important for the movement and interactions of the ships soon to be battling each other: - used to define EnemyEntity enemy.js - used to define PlayerEntity player.js The epic battle will be staged in the stage folder, inside the file where we have the , and methods which will dictate the way our game will work. play.js onResetEvent() onDestroyEvent() checkIfLoss() All the images we’ll need can be found in the and we’ll use them in the file as such: "data/img folder" manifest.js const DataManifest = [
    {name: 'player', type: 'image', src: 'data/img/player.png'},
    {name: 'player2', type: 'image', src: 'data/img/player2.png'},
    {name: 'ships', type: 'image', src: 'data/img/ships.png'},
    {name: 'bg', type: 'image', src: 'data/img/bg.jpg'}
];

export default DataManifest; Tips and Tricks If you want to add a custom background picture to the game, use the following code to the method, located in the file: OnResetEvent() play.js me.game.world.addChild(new me.ImageLayer(0, 0, {
	image: "bg", 
	repeat: "repeat",
	z: 0
 }), 0); One issue that you may encounter is with the game’s resetting functionality when calling the function. The bug seems to be caused by the argument which may sometimes equal infinity. You can easily go around this bug by just adding the following check at the end of the first if statement in the file - at the time of writing, this was at line 40. checkIfLoss() bounds.bottom enemy-manager.js if (me.state.current() instanceof PlayScreen) {
me.state.current().checkIfLoss(bounds.bottom);
}; In the end, if all goes well and the Gods of coding are merciful, you should be able to see this: Using ConfigCat's Feature Flags in Space Invaders Let's say that I want to change the main ship with a custom version to be displayed to a specific audience. The easiest way to do this without having to change the code and make another deployment of the new version is to implement a feature flag, which can be switched on and off with ease. I intend to show the custom version of the ship only if the evaluation of the flag is true. And since the application is written in Javascript, I’ll choose , for which the process of installing is fairly straightforward and well . ConfigCat's Javascript SDK documented Just fire up and run , after which just import it in file via the following line: npm npm install configcat-js constants.js import * as configcat from "configcat-js"; The next thing that you need to do is to quickly head over to ConfigCat’s registration page and for yourself. After which you’re all set to create your first feature flag. I named mine . create a free account "isMyFirstFeatureEnabled" I'm now free to go to and add my SDK key (which you can grab from the where you created the flag earlier). Once in the dashboard, you'll see a button in the upper right-hand corner called “View SDK Key”. constants.js ConfigCat Dashboard I then create the client like this: let flag ;
  const client = configcat.createClient(sdkKey);
  const getFlag = () => flag;
  client.getValue("isMyFirstFeatureEnabled", false, value => {
     flag=value;
  }); Now that the client is in order, we should now hop in the file, import the method from and use it to load the player with a new ship depending on the flag’s value: player.js getFlag() constants.js if (getFlag()) {
	image = me.loader.getImage("player2");  
  } else {
	image = me.loader.getImage("player"); 
  } Last but certainly not least, all that’s left to do now is to use the , flip the flag to "true" and then reload the game. ConfigCat Dashboard BAM! The result should be something like this: Conclusion​ and as a testimony to this stands the vast that you need to read in order to unleash its true power. It certainly can help you in case you want to have a chance at making the next big game hit. , and I’m glad that I found to help me out with this. MelonJS is a powerful JS game engine documentation Feature Flags can be outstandingly scalable and useful ConfigCat Here’s the in case you want to check out this tiny Space Invaders remake and I hope you that you'll get to relive some nice childhood memories playing it. git repo link If you are looking for more articles like this, make sure to check out or you could follow them on your , or accounts. ConfigCat’s blog posts Facebook Twitter LinkedIn Also Published Here

Waves

Space Invaders Meet ConfigCat and MelonJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Using ConfigCat's Feature Flags in a Phaser.io Application

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

10 facts about Mobile Rewarded Surveys

11 Phases Of Simple Mobile Game App Development

The Noonification: Migrating from WebGL to WebGPU (12/20/2023)

223 Stories To Learn About Game Development

Using ConfigCat's Feature Flags in a Phaser.io Application

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

10 facts about Mobile Rewarded Surveys

11 Phases Of Simple Mobile Game App Development

The Noonification: Migrating from WebGL to WebGPU (12/20/2023)

223 Stories To Learn About Game Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps