<\/p>\n\n\n\n
“Let’s make that ninja run!”<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n The player character is not yet visible on the canvas, but we are going to change that very shortly. To do this we will need to simultaneously develop the input management, also updating our player.js script to include the appropriate responses for the player.<\/p>\n\n\n\n First let us create the input controller. This is a simple, easily extended object that allows for mapping the keys as you wish, also allowing for the mapping to be later made customisable in-game or via a settings menu.<\/p>\n\n\n\n Open and save an \u2018inputcontroller.js\u2019 in the GameJS\/js\/ folder, and add the following code:<\/p>\n\n\n\n export class InputController initialise(canvas) }<\/p>\n\n\n\n cycleKeyPress(keyDown) }<\/p>\n\n\n\n cycleKeyRelease(keyUp) }<\/p>\n\n\n\n getKeyState(keymapping) export default InputController;<\/p>\n\n\n\n The constructor here is setting a \u2018keyState\u2019 variable, which determines whether a key is in a state of pressed (this frame), down (still down from last frame), released (was down last frame, is up this frame), and none (no key state, the key is neither pressed, down, or just now released.)<\/p>\n\n\n\n This is important for determining and storing the state of any key we want to track for user input.<\/p>\n\n\n\n In the initialise function, add the following code:<\/p>\n\n\n\n initialise(canvas) \/\/ Store the keystate for our actions \u2013 currently all keystates will be \u2018none\u2019. \/\/ Add an event listener to the canvas, when a key down event occurs pass the key \/\/ Add an event listener to the canvas, when a key released event occurs pass the key Update the cycleKeyPress function to include the following code: \/\/ If the key was previously set to \u2018pressed\u2019, update it to \u2018down\u2019 Update the cycleKeyRelease function to include the following code:<\/p>\n\n\n\n cycleKeyRelease(keyUp) \/\/ Set the key state for \u2018keyUp\u2019 to \u2018released\u2019 }<\/p>\n\n\n\n And update the \u2018getKeyState\u2019 function: if(this.keys[keymapping] === this.eKeyState.ePressed) if(this.keys[keymapping] === this.eKeyState.eDown) if(this.keys[keymapping] === this.eKeyState.eReleased) And that is our input controller! There is nothing more required for the input controller object but we will need to include that in the playable context object. Open \u2018playablecontext.js\u2019 and at the top of the existing script, with the \u2018import\u2019 lines of code, add another import for the input controller:<\/p>\n\n\n\n import { InputController } from ‘.\/inputcontroller.js’;<\/p>\n\n\n\n In the constructor for the PlayableContext object, add the line : This can be the last line of the constructor function.<\/p>\n\n\n\n In the \u2018initialise\u2019 function of the PlayableContext, add the following line to initialise the input controller: That is the input controller! It will update the key states independently, as after it is initialised the event listener functions are added to the canvas. These updates to the key states can be checked during the update frames and if the key state is evaluated to be \u2018Pressed\u2019 or \u2018Down\u2019 or \u2018Released\u2019 for a particular game key, we can trigger the required action for the player character.<\/p>\n\n\n\n Next, we want to create the player character code, and we will start with a simplified version of the player character and for now just focus on two actions, \u2018idle\u2019 and \u2018run\u2019. We want to see that this is working correctly before we go and start adding all the additional action triggers and animations.<\/p>\n\n\n\n Open the \u2018player.js\u2019 script and add the following code:<\/p>\n\n\n\n import { AnimationCollection } from ‘.\/animationCollection.js’ update(inputController) }<\/p>\n\n\n\n getRenderFrame() }<\/p>\n\n\n\n export default Player;<\/p>\n\n\n\n This \u2018Player\u2019 class object extends from the previously created \u2018AnimationCollection\u2019. When we \u2018extend\u2019 a class object using this instance as an example, we have created a new class object called \u2018Player\u2019 which is based on the previous object AnimationCollection and has all of the variables and functions of the AnimationCollection. The AnimationCollection is the \u2018super\u2019 or \u2018base\u2019 class, and the Player class can have additional or overriding functions while still using everything from it\u2019s base class.<\/p>\n\n\n\n In the Player constructor, we call the \u2018super()\u2019 function first, which ensures that the AnimationCollection constructor is called. Then we initialise a sprite for the selected render frame from the given animations in the animation collection, we set the player character to be facing to the right (bFacingRight = true) and we set it\u2019s x and y position on the canvas, and velocity.<\/p>\n\n\n\n The \u2018getRenderFrame\u2019 function does exactly that, it returns the current render frame, which is determined by the input and currently playing animation, selecting the current frame in the animation cycle.<\/p>\n\n\n\n We need to add the code for the \u2018update\u2019 function to contain the following lines: \/\/ Get input With the player class containing all of the requirements to have the player\u2019s idle animation update to change direction to face the directional input and \u2018run\u2019 \/ play the run animation, and then return to idle when the user input is not triggering the velocity, we will want to test this is displaying and responding suitably before we start getting to far ahead with the other game mechanics.<\/p>\n\n\n\n Open the PlayableContext code in playablecontext.js, and add the following line to the top of the file with the other imports:<\/p>\n\n\n\n import { Player } from \u2018.\/player.js\u2019<\/p>\n\n\n\n And in the constructor add the following line before\/above the line of code that is initialising the input controller:<\/p>\n\n\n\n this.player = new Player();<\/p>\n\n\n\n In the PlayableContext \u2018initialise()\u2019 function, add these lines after the lines of code for the canvas handle:<\/p>\n\n\n\n \/\/ Set the player animations You will notice above, after we initialise the \u2018this.player\u2019 object within the PlayableContext, that we have placed a call to the function \u2018this.setPlayerAnimations()\u2019 which is referring to \u2018setPlayerAnimations()\u2019 function within this object (the playable context).<\/p>\n\n\n\n This function has not yet been written, so let\u2019s add that now after the constructor here in the playablecontext.js script.<\/p>\n\n\n\n setPlayerAnimations() this.player.animations[‘jumpAttack’].animationFrameSrcs[i] = this.files.ninja<\/a>_jumpingSwordAttackFrames[i]; \/\/ Load the sprite image from the previous set source file locations \/\/ The \u2018Run\u2019 animation is slightly wider that the idle animation, and as such changing the width }<\/p>\n\n\n\n We now need to update the player object within the PlayableContext. In the \u2018update()\u2019 function, add the following code to call player update:<\/p>\n\n\n\n this.player.update(this.inputController);<\/p>\n\n\n\n And then render the player frame in the render() function of the PlayableContext: Now we have the code for the animationCollection, the animations, the animation frames or \u2018sprites\u2019, the file manager, the input controller, and the player. We have the playable context that brings it all together, and the app script which controls what the playable context is doing. We also have the index.html webpage that is running the app script. If we have put it all together right, when re run the python http server and host the index.html, we should be able to: Please note: There may be some typos in the existing provided code as I am editing the post spacing’s and wording as I go. I will follow the posts again from the start and ensure the code provided is in line with the coded project I am working from and make a note to update this and provide and note any corrections in time for the next post.<\/p>\n\n\n\n Update: 23\/08\/2023 You can download a copy of the project files here: If you would prefer, you can go through the posts and try to match your code to the updated tutorial code. The practice can be useful for those new to coding.<\/p>\n\n\n\n Some importantly useful tips for bug-finding when testing your code: There are a few ways to host the files, I have included one here that is overly simple and excellent for the purpose of code-and-test. It requires Python to be installed, and with it a simple command from the folder directory in the Windows PowerShell or Linux terminal you can start a http server for that folder, and then access the hosted folder as if it is a website by going to the local host address in your browser.<\/p>\n\n\n\n If you don\u2019t already have Python 3 installed, you can download and install it from<\/p>\n\n\n\n https:\/\/python.org\/<\/a> in the Downloads section. In Windows or Linux, there will often be an option to right-click within an open folder in the File explorer and select \u2018Open location in terminal\u2019 or \u2018Open in Terminal\u2019. Alternatively, you can open PowerShell in Windows or the Linux Terminal in Linux and navigate to your directory folder \u2018GameJS\u2019.<\/p>\n\n\n\n With the terminal or PowerShell window open and Python installed, you can start a simple http server with the following command:<\/p>\n\n\n\n python -m http.server<\/p>\n\n\n\n With the http server now running in the PowerShell or terminal window, you can access your site by opening your browser and typing the address:<\/p>\n\n\n\n
We want to set the player idle, and then also the additional player running animation. When we have the player sitting at idle, and able to run in both left and right directions, we will then step up to add the player jump and attack mechanics.<\/p>\n\n\n\n
{
constructor()
{
this.eKeyState = {
eNone : 0,
ePressed : 1,
eDown : 2,
eReleased : 3
}
}<\/p>\n\n\n\n
{<\/p>\n\n\n\n
{<\/p>\n\n\n\n
{<\/p>\n\n\n\n
{
}
}<\/p>\n\n\n\n
{
\/\/ Store the canvas object
this.canvas = canvas;
\/\/ Map a keyboard key to an action name
this.mappings = {‘w’:’Up’, ‘s’:’Down’, ‘a’:’Left’, ‘d’:’Right’, ‘Space’:’Attack’, ‘Ctrl’:’Throw’};<\/p>\n\n\n\n
this.keys = {
‘Up’: this.eKeyState.eNone, ‘Down’: this.eKeyState.eNone, ‘Left’: this.eKeyState.eNone, ‘Right’:this.eKeyState.eNone, ‘Attack’:this.eKeyState.eNone, ‘Throw’:this.eKeyState.eNone
};<\/p>\n\n\n\n
\/\/ that is pressed to the \u2018cycleKeyPress\u2019 function to update the keystate
this.canvas.addEventListener(‘keydown’, function(k_down) {
this.cycleKeyPress(k_down.key);
}.bind(this), false );<\/p>\n\n\n\n
\/\/ that is released to the \u2018cycleKeyRelease\u2019 function to update the key state
this.canvas.addEventListener(‘keyup’, function(k_up) {
this.cycleKeyRelease(k_up.key);
}.bind(this), false );
}<\/p>\n\n\n\n
cycleKeyPress(keyDown)
{
\/\/ Previously released keys are no longer in a \u2018released\u2019 state and are set to \u2018none\u2019
for(var keyState in this.keys)
{
if(this.keys[keyState] === this.eKeyState.eReleased)
{
this.keys[keyState] = this.eKeyState.eNone;
}
}<\/p>\n\n\n\n
\/\/ Else set the key to \u2018pressed\u2019
if(this.keys[this.mappings[keyDown]] === this.eKeyState.ePressed)
{
this.keys[this.mappings[keyDown]] = this.eKeyState.eDown;
}
else
{
this.keys[this.mappings[keyDown]] = this.eKeyState.ePressed;
}
}<\/p>\n\n\n\n
{
\/\/ Previously released keys are no longer in a \u2018released\u2019 state and are set to \u2018none\u2019
for(var keyState in this.keys)
{
if(this.keys[keyState] === this.eKeyState.eReleased)
{
this.keys[keyState] = this.eKeyState.eNone;
}
}<\/p>\n\n\n\n
this.keys[this.mappings[keyUp]] = this.eKeyState.eReleased;<\/p>\n\n\n\n
\/\/ Return Keystate for an action, \u2018Up\u2019 \u2018Down\u2019 \u2018Left\u2019 \u2018Right\u2019 \u2018Attack\u2019 \u2018Throw\u2019
\/\/ Keystate = 0 for \u2018None\u2019 1 for \u2018Pressed\u2019 2 for \u2018Down\u2019 and 3 for \u2018Released\u2019
getKeyState(keymapping)
{
if(this.keys[keymapping] === this.eKeyState.eNone)
{
return 0;
}<\/p>\n\n\n\n
{
return 1;
}<\/p>\n\n\n\n
{
return 2;
}<\/p>\n\n\n\n
{
return 3;
}
}<\/p>\n\n\n\n
this.inputController = new InputController();<\/p>\n\n\n\n
\/\/ Set the input controller
this.inputController.initialise(this.canvas);<\/p>\n\n\n\n
import { InputController } from ‘.\/userinput.js’
import { Sprite } from ‘.\/Sprite.js’;
export class Player extends AnimationCollection
{
constructor()
{
super();
this.renderFrame = new Sprite();
this.bFacingRight = true;
this.playerPositionX = 400;
this.playerPositionY = 50;
this.xVelocity = 0.0;
}
initialise()
{
this.renderFrame = this.getAnimationFrame(‘idle’);
this.bFacingRight = true;
this.playerPositionX = 400;
this.playerPositionY = 50;
}<\/p>\n\n\n\n
{<\/p>\n\n\n\n
{
return this.renderFrame;
}<\/p>\n\n\n\n
update(inputController)
{
this.xVelocity = 0.0;<\/p>\n\n\n\n
if(inputController.getKeyState(‘Right’) === 1 || inputController.getKeyState(‘Right’) === 2)
{
this.xVelocity = 0.3;
}
else if(inputController.getKeyState(‘Left’) === 1 || inputController.getKeyState(‘Left’) === 2)
{
this.xVelocity = -0.3;
}
else
{
this.xVelocity = 0.0;
}
if(this.xVelocity > 0.2)
{
this.bFacingRight = true;
var run = this.animations[‘run’].update();
this.renderFrame = this.getAnimationFrame(‘run’);
}
else if(this.xVelocity < -0.2)
{
this.bFacingRight = false;
var run = this.animations[‘run’].update();
this.renderFrame = this.getAnimationFrame(‘run’);
}
else
{
\/\/ Update player animation
var idle = this.animations[‘idle’].update();
this.renderFrame = this.getAnimationFrame(‘idle’);
}
}<\/p>\n\n\n\n
this.player.initialise();
this.setPlayerAnimations();<\/p>\n\n\n\n
{
\/\/ Set the image source file for each animation frame
for(var i = 0; i < 10; i++)
{
this.player.animations[‘idle’].animationFrameSrcs[i] = this.files.ninja<\/a>_idleFrames[i];
this.player.animations[‘run’].animationFrameSrcs[i] = this.files.ninja<\/a>_runFrames[i];
this.player.animations[‘jump’].animationFrameSrcs[i] = this.files.ninja<\/a>_jumpFrames[i];
this.player.animations[‘dead’].animationFrameSrcs[i] = this.files.ninja<\/a>_deadFrames[i];
this.player.animations[‘attack’].animationFrameSrcs[i] = this.files.ninja<\/a>_swordAttackFrames[i];
this.player.animations[‘throw’].animationFrameSrcs[i] = this.files.ninja<\/a>_throwAttackFrames[i];<\/p>\n\n\n\n
this.player.animations[‘jumpThrow’].animationFrameSrcs[i] = this.files.ninja<\/a>_jumpingThrowAttackFrames[i];
this.player.animations[‘slide’].animationFrameSrcs[i] = this.files.ninja<\/a>_slideFrames[i];
this.player.animations[‘glide’].animationFrameSrcs[i] = this.files.ninja<\/a>_glideFrames[i];
this.player.animations[‘climb’].animationFrameSrcs[i] = this.files.ninja<\/a>_climbFrames[i];
}<\/p>\n\n\n\n
this.player.animations[‘idle’].loadSpritesFromSrc();
this.player.animations[‘run’].loadSpritesFromSrc();
this.player.animations[‘jump’].loadSpritesFromSrc();
this.player.animations[‘dead’].loadSpritesFromSrc();
this.player.animations[‘attack’].loadSpritesFromSrc();
this.player.animations[‘throw’].loadSpritesFromSrc();
this.player.animations[‘jumpAttack’].loadSpritesFromSrc();
this.player.animations[‘jumpThrow’].loadSpritesFromSrc();
this.player.animations[‘slide’].loadSpritesFromSrc();
this.player.animations[‘glide’].loadSpritesFromSrc();
this.player.animations[‘climb’].loadSpritesFromSrc();<\/p>\n\n\n\n
\/\/ skews the height, we need to specifically update the dimensions of all of the frames
\/\/ for the run animation
for(var i = 0; i < 10; i++)
{
this.player.animations[‘run’].animationFrames[i].frameWidth = 93;
this.player.animations[‘run’].animationFrames[i].frameHeight = 112;
this.player.animations[‘run’].animationFrames[i].displayWidth = 93;
this.player.animations[‘run’].animationFrames[i].displayHeight = 112;
this.player.animations[‘run’].animationFrames[i].originalSourceWidth = 363; this.player.animations[‘run’].animationFrames[i].originalSourceHeight = 458;
this.player.animations[‘run’].animationFrames[i].sourceWidth = 363;
this.player.animations[‘run’].animationFrames[i].sourceHeight = 458;
this.player.animations[‘run’].animationFrames[i].ticksPerFrame = 1;
}<\/p>\n\n\n\n
render()
{
this.context = this.canvas.getContext(“2d”);
this.context.clearRect(0,0,1280,680);
this.playerFrame = this.player.getRenderFrame();
if(this.player.bFacingRight === true)
{
this.context.drawImage(
this.playerFrame.img,
this.playerFrame.sourceX,
this.playerFrame.sourceY,
this.playerFrame.sourceWidth,
this.playerFrame.sourceHeight,
this.playerFrame.positionX,
this.playerFrame.positionY,
this.playerFrame.displayWidth,
this.playerFrame.displayHeight);
}
else
{
this.context.save();
this.context.scale(-1,1);
this.context.drawImage(
this.playerFrame.img,
this.playerFrame.sourceX,
this.playerFrame.sourceY,
this.playerFrame.sourceWidth,
this.playerFrame.sourceHeight,
-this.playerFrame.positionX – this.playerFrame.displayWidth,
this.playerFrame.positionY,
this.playerFrame.displayWidth,
this.playerFrame.displayHeight
);
this.context.restore();
}
}
}<\/p>\n\n\n\n
* See the player idle animation, it should be running smooth
* When pressing and holding \u2018d\u2019 on the keyboard, the player should start running to the right
* When pressing and holding \u2018a\u2019 on the keyboard, the player should start running to the left
* When the keys are released the player character should return to the idle animation, remaining the same direction it was facing when running.<\/p>\n\n\n\n
I have gone through the code in my posts and found a couple of parts missing, which I have since gone back over and amended.
To save you time re-reading start to finish and locating the changes, and as I have not highlighted or recorded each individual change (and don’t want to miss highlighting an update that could cause more confusion \ud83d\ude42 ) I have instead zipped the project files for the tutorial going this far into the project.<\/p>\n\n\n\n
(Broken Link – TBC) Making a JavaScript Game Part 1 – 6 Code + Image Files<\/a><\/p>\n\n\n\n
+ Ensure that you have at least the python http server running<\/strong> to host your JavaScript code or it will not run!
+ If you have the server running and your code is up to date but not displaying a ninja that can idle, or run left and right, then press the ‘F12’ key<\/strong> or go the the browser menu, down to ‘More tools’ and open the ‘Developer Tools’.<\/strong>
In the ‘Console’ tab of the Developer Tools<\/strong> you may find any error message that is being provided by the browser, which can help you locate and repair any errors in the script files.<\/p>\n\n\n\n
At the time of writing this Python 3.11.4 is the latest version and should work nicely with the mentioned steps.<\/p>\n\n\n\n