Building a simple JavaScript game

My friend Chris showed me a simple game that he was working on in PowerShell.  He began writing it to improve his skills in that language.  When Chris showed the game to me and Marco, I honestly did not know what to expect and then he fired up the simple game…

An ASCII art scroll greeted us and introduced us to our hero and set the stage for the battle that was before us.  This simple game had a hero battle an Orc and then move on to the next battle.  We watched as with each tick progressed forward and the back and forth battle raged on.  The Orc strikes first, then the hero, then the Orc…. a block, a miss, a hit for low damage, a hit for high damage and then the hero was victorious over this first Orc.  Then he continued on to the next one as the battle raged on.

This silly, simple game got the wheels turning of me and Marco as Chris opened up the code revealing the internals of the game logic.  The three of us rationalized and reasoned about some simple changes to add more struggle to our hero to make things even more interesting.  We modified the logic to how often the hero could deal a critical strike against his foe.  It was cool to quickly implement the change and then “watch” the hero attack and see a CRITICAL STRIKE get posted on the screen as the random numbers bounced down the code through our new logic.  Nothing but geek fun.

Chris and I ended up working on the game a bit later on in the evening and we began to refactor the code to turn some of the common elements into functions and working through what elements were needed to make the engine easier extend.  I began to talk about migrating some of the logic to JavaScript and I thought about some of the possibilities there.  I have no experience with game code so this was an interesting problem to think through.  I thought about searching Google for JavaScript game engines, theory, examples…  but then, I held short and changed my mind.  I thought it would be better to stumble through some game code on my own and make my own mistakes.  It will be better to try out my own ideas in the space to see how I can build on this simple concept while improving my JavaScript skills along the way.

So, I will start with a clean slate and begin building this simple engine for fun and to learn.  Now I will start with the most basic element of the game… which is time and randomness.

Let’s establish an object to hold our configurable items for the world we are creating.  We will establish the clock tick interval and the range of the dice roll.

var world = {
   clockInterval: 1500,
   rollMin: 0,
   rollMax: 100
};

 

Now let’s utilize these variables in the “clock” that drives the time for the world.

function worldClock() {
   setTimeout(worldClock, world.clockInterval);
}

worldClock();

 

We have a world clock but it is not very interesting because there is no evidence that it is doing anything at all.  Let’s add a tick function that the world clock will call to show us it is working.

function tickEvent() {
   console.log('World Clock Tick...');
}  

And then we will call this function from the worldClock function.

function worldClock() {
   tickEvent();
   setTimeout(worldClock, world.clockInterval);
}

Now we see a tick event occur every second and display the ‘World Clock Tick…’.  Cool, it works.  Now let’s create the dice roll really quick and call it a day.

function roll(){
   return Math.floor(Math.random() * (world.rollMax - world.rollMin + 1) + world.rollMin);
}

Done.  This will take the configuration values for the high and low values provide a random number between the values that are inclusive of the numbers.

 

Now putting it all together here is the simple engine that we have put together so far:

var world = {
   clockInterval: 1500,
   rollMin: 0,
   rollMax: 100
};

function worldClock() {
   tickEvent();
   setTimeout(worldClock, world.clockInterval);
}

function tickEvent() {
   console.log('World Clock Tick...');
   var rollDice = roll();
   console.log('You shake the dice and cast them on the table...  The roll yields the value', rollDice);
}

function roll(){
   return Math.floor(Math.random() * (world.rollMax - world.rollMin + 1) + world.rollMin);
}

worldClock();

 

That is all for now.  Next time we can define our Hero and progress on to the next steps of the game.