We’ll be making this fun square! For a long time I’ve wanted to make stuff move in the browser. The problem I’ve had for the longest time is trying to get my head around synchronous code and asynchronous code. How can I make the player move when I press a key, but mix the event based nature of the browser with the synchronous style of coding I use when solving problems or puzzles. Today we’ll create a simple character that can move and jump around a space. We’ll achieve this with ~70 lines of JavaScript without the help of any libraries. Follow along using CodePen or your own editor. Particles can also be added! I’m assuming you have a basic understanding of JavaScript syntax, including some basic ES6 features. If not read ! my refresher on ES6 first . Click here for the finished code To create simple code that can be managed, we’ll be separating displaying the game with the game data. The game data will reside in an object that will be drawn through an function. update First let’s set up the html so we can see what we’re doing. We will be using svg elements because they’re easy to set up and fast enough for our needs. We’ll use a rectangle for our player and a line to set the floor boundary. To set up the svg screen with a line and rectangle add the following code to your html. This will draw an svg screen. Width and height needs to be specified, but we’ll do this with JavaScript. The line won’t be visible yet as it’s outside the dimensions of the svg screen. Let’s set up the data for the screen and player in JavaScript. The screen will now include the ground drawn at the bottom of the screen. Svg elements can be modified using css the same way other elements can be styled. However svg elements have different CSS properties that are specific to svg shapes. Before jumping into the logic, let’s take a look from afar at the process we’ll be using. We want a function to run ~30 times a second to change data in the game and also draw the screen. We want events like pressing a key and releasing a key to be monitored, and therefore influence the logic that runs. We’ll want to store data in some kind of data store (an object we’ll call ) and then base our game loop on that data. The end of our game loop will also have an function that creates the frame. worldData update So let’s set up the data and update function! Our game data requires x and y coordinates for the player. We’ll make this an object so we can easily add data later on. I want the player to start on the ground, centred on the screen, but feel free to write in your own numbers. The player rectangle hasn’t moved yet though. To move it we need to create an or function. Call it whatever makes most sense to you, however I’ll be using . This function uses the worldData to draw a frame. This shouldn’t be too complicated as all we’ll be doing is linking the to the rectangles property, and the same with the property. update render update worldData.player.x x y Now the rectangle will jump to the position you’ve specified in your object. worldData Let’s create a game loop that executes 30 times a second. This loop will have all our logic, and end with the function call that updates the svg to reflect the new data. update() It’s lonely out in space Your player now lifts off the ground! Let’s unpack why this is happening. takes a function and calls it over and over again with an interval in milliseconds. In this case we’re calling the function every 30 milliseconds. That’s about 33 frames per second. Every time this function runs, it changes the by subtracting . At the end of the function we are updating the frame by calling . Without we don’t see the liftoff! setInterval worldData.player.y 0.5 update update Let’s add interaction. We need a way to know which key is down. This is the hardest part, but once you understand it you can add as many keys as you want to your game and it’s easy. We need to keep track of which keys are down. We’ll add as a property to the object. will contain a list of all keys the person playing your game is holding down. With this information we’ll be able to see which keys are down in the game-loop (the function within the above) and move the player accordingly. keysDown worldData keysDown setInterval First let’s add as a property in the object. It should now look like so: keysDown worldData We use the document’s event listeners to keep track of keys being pressed. In your console you can see the events firing off as you press buttons on your keyboard. Let’s create a function that adds the arrow keys pressed to the list in your object. We’ll call this function and it’ll handle and events. worldData fireKeyAction keydown keyup We also want to update our key press and key up events. Let’s walk through it quickly. When you press a key, it finds the name of the key you pressed using . This is a string representation of the key, e.g. . This is passed into which takes two arguments. A key string, and a boolean, representing if it’s a or event. event.key ArrowLeft fireKeyAction keydown keyup Assuming we’re handling a event. In we pass the argument as . We then reach the statement. This is a shorthand method of checking if is to the various statements. In this example we are only going to do anything if the is equal to any of the arrow keys. keydown fireKeyAction isDown true switch key === case key If the user has pressed or released an arrow key we add or remove it from the array. If is , we add the arrow key, but only if it’s not already in the array. This is important because the keydown event fires continuously while a key is pressed down. We only want to add the key once. If is , we find the key with and use to cut it from the array. keysDown isDown true isDown false indexOf splice keysDown Go back to the mainloop (the function inside setInterval), and add a for the . console.log worldData.keysDown All that is left is adding logic to the game loop. Let’s make the character walk left and right. In your setInterval anonymous function, update it so it matches the following: Notice I’ve used a function in the statements. Let’s quickly add that function: isKeyDown if This is just a shortcut for checking if the key is in the array. It’s ALIVE! Add other features by adding a key, more logic in the setInterval game loop or by adding more svg elements. A colourful trail! I shoot! The way I’ve organised the code is heavily influenced by the book which is freely available on the web! How to Design Programs, Second Edition This lesson uses mutation of the object , especially when things get complicated. If you want to add complexity and grow your game, I’d recommend taking a look at . ! Redux gives you a safe way to change the state of your game and keep track of the changes. As motivation, with Redux you could trivially add time travelling to your game. worldData which is not good practice Redux Check out this introduction to Redux by making another game Got any questions, comments or found errors? Tweet me over ! :) on my twitters is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
