Java, on the other hand, demands that code be built before it can be executed. That is, the code gets converted to a machine language that the computer can comprehend.
Game engines are pieces of software that let you add extra features to your games including sound, animations, visuals, and physics. When it comes to choosing a game engine or rendering library for your game, you have a lot of alternatives. Here are a few popular examples from which to choose.
PixiJS is an open-source engine that boasts a fast and attractive API. The 2D renderer is also cross-platform, allowing you to create games for a variety of platforms. Being open-source also allows a large and enthusiastic community to contribute to the engine’s continuous growth.
BabylonJS is a rendering toolkit with a rich set of capabilities that let you make everything from simple animations to full-fledged 3D games. BabylonJS, like PixiJS, is open-sourced and supported by a wide community of developers.
Phaser supports HTML5 games on both the desktop and mobile platforms. Its main focus is on creating 2D games that can be built for a variety of platforms. The possibility to use additional plugins as needed is one of Phaser’s advantages. This permits you to keep your tools small so that you don’t have too many extra parts.
Step 1 — Select a Code Editor
To get started, head over to an editor of your choice. The examples shown here will be using our CodeWizardsHQ editor.
Step 2 — Build a Game Canvas
The first line of code we write will create a game canvas. The height and width can be adjusted as needed. There are four steps to accomplish this.
Within the style>/style> tags, paste your canvas code.
Within your script>/script> tags, create your startGame function and establish your variables and getCanvas.
In the body>/body> tags, call startGame onload.
Use a h1>/h1> tag within the body>/body> element to provide a title if desired.
Our game’s title, Block Hopper, should appear in a light blue rectangle. Our game’s setting will be this.
Note: All code you write after this step will go inside the Script>/Script> tags.
Step 3 — Code Your Player, The Hopper
Let’s now add our player. This will be accomplished in four steps.
- Create the player variable.
- Create a variable to store the player’s Y position.
- Create a function called createPlayer() with width, height, and x-position parameters.
- In startGame(), we use the method from step 3 to create our player and assign it to the variable we defined in step 1.
Step 4 — Add Gravity to Your Player
Let’s give the player a sense of gravity. The steps are as follows.
- Make a fallSpeed variable.
- Make a new interval and save it in a variable that will be used to invoke the updateCanvas() function.
- Create two functions for our player: one for drawing and one for moving.
- Make a function called updateCanvas() that clears the canvas and redraws the player.
Step 5 — Add Code Functionality to Your Player
Our player is falling, but we want it to come to a halt as soon as it lands. Within your createPlayer() function, add the stopPlayer() function. Then, at the end of movePlayer, call the function ().
Step 6 — Code Jump Logic for Your Player
Now, when we push the space bar, our player will jump.
- Create a jumpSpeed property and an isJumping boolean.
- Within your createPlayer() function, add a jump() function.
- Make a change to our makeFall() function.
- Inside updateCanvas, call our jump() function ().
- Make a method called resetJump().
- Once we push the spacebar, toggle the isJumping boolean and run resetJump().
Step 7 — Build the Attack Block
It’s time to build a defense against you. This will be similar to constructing the player, but our block’s characteristics will be randomly generated.
- Create a new block variable and use the createBlock() function to construct a new block.
- Assign a value from createBlock to the block variable ()
- Inside startGame(), call the function and attach it to your variable.
- Make a method called randomNumber().
- Assign random numbers for width, height, and speed to your createBlock() function. Then construct two functions: draw() and attackPlayer().
- Call block in updateCanvas().Draw() and block are two functions that can be used together.attackPlayer();
Step 8 — Add Logic to Move Your Player
Great! Our block now goes to assault our player, but it never returns once it reaches the edge of the screen. Let’s get this straightened out.
- Create a function called returnToAttackPostion() inside createBlock()
- Reset the block’s width, height, speed, and x and y values.
- At the end of the attack, call the new function.
Step 9 — Collision
We must finish the game when the block successfully strikes the player. It’s time to develop a detectCollision() function that will bring the game to a halt if there is a collision. In your updateCanvas() function, call the detectCollision() function.
Step 10 — Add a Score
For the grand finale, we will add a score to our game. This is done much the same way as creating shapes, except we will specify a fillText property and font.
- Create a score variable equal to 0 to start. While you’re there, create a scoreLabel variable to be used later.
- Create a createScoreLabel() function with a draw() function.
- Assign your scoreLabel a value with our createScoreLabel() function
- Call scoreLabel.draw() in updateCanvas()
- Increase your score once your block makes it to the end
- For an easy challenge, change a few of the variables such as fallSpeed or jumpSpeed. Play with it a bit until you get to a setting you like.
- For a medium-to-difficult challenge, create a new label on the other side of the screen that holds how many lives you have. Starting with three lives, you lose one every time you have a collision. Once you’re out of lives, then it’s game over!
- For a difficult challenge, add a new object in the game that gives you bonus points if you touch it. This will involve creating a new function to create the object and adding collision detection. It’s probably a good idea to make the object float, too!
Note:I’ll be posting a whole beginner’s tutorial soon so people may learn how to code.