- Tower Building: In this game, the payers have to stack blocks and create a very tall tower. The game includes QR codes that allow you to play the fantastic game on a mobile phone and you can also rose, fork, and clone the GitHub storage which gives information about the creation of the game.
- Bejeweled: The game was created as a browser game in the early 2000s and is very much similar to Candy Crush. You have to match three jewels in a row to score points.
- 2048: The game allows users to use arrow keys to move tiles around in a grid. It is a very addicting game. The game aims to play a game until the tiles became equal to 2048.
- Polycraft: It is a 3D game that can be played in your browser. The game is full of adventure, exploration, base-building, gathering, crafting, and fighting.
is an open-sourced engine with speed and a beautiful API. This has cross-platform support by the 2D renderer. This will help to make your game for multiple applications. It has a highly supportive community that helps in providing consistent improvements due to its open-source engine.
It has a library that has powerful tools which allow you to create anything from simple animations to 3D games. It is also open-sourced and has a large community of developers just like PixiJS, BabylonJS
The library offers support for desktop and mobile HTML5 games. Its main focus is on developing 2D games that can be compiled to launch games on multiple platforms. One benefit of using Phaser is that it can use additional plugins according to the user’s preference. This feature allows you to keep your tools small in size and make it easy for you to not make any unnecessary components.
Step 1 – Select a Code Editor
Select the editor of your choices like CodeWizardsHQ editor, CodePen, VS Code, or phpStorm which are very easy to access and learn.
Step 2 – Build a Game Canvas
The first piece of code you will enter will establish a canvas for your game. Here you can adjust the height and width according to your choice. follow the below four steps:
- Add the canvas code inside the <style></style> tags.
- Create your function of start game and define your variables and write get canvas inside the <script></script> tags
- Type start game in the <body></body> tags onload.
- You can also add a title using an <h1></h1> tag inside the <body></body> tag
After these steps, you will see a light blue rectangle with your game title. It will act as the background of the game. After these steps, all code that is written will go inside the <script></script> tags.
Step 3 – Code Your Player.
The Next step is to add the players. Follow the below steps to add the payers.
- First, create a variable that will be called a player.
- Second, Create another variable to hold the Y position of the player.
- Create a function called createPlayer() which will have parameters for the width, height, and x-position of the player.
- In the start game() create the player using the function from the above step and assign it to the variable created in the first step.
Step 4 – Add Gravity to Your Player
Now to create gravity for the player. Follow the below steps:
- Create a variable called full speed.
- Now create a new interval and hold it in a variable that calls for the updated canvas() function.
- Create two functions for the player. One is to draw and the other to move the player.
- Create an updated canvas() function which will clear the canvas and will redraw the player.
Step 5 – Add Code Functionality to Your Player
When the player will start falling, we want the player to stop as soon as it hits the ground. To do this, follow the below steps:
- Add the following stop layer() function inside the create player() function.
- Now call the function at the end of movePlayer().
Step 6 – Code Jump Logic for Your Player
To allow your player to jump by pressing the space bar. Follow the below steps:
- Create a Jumping boolean and jump speed property functions.
- Create a jump() function inside the create player() function.
- Update the make all() function.
- Call for jump() function inside updated canvas().
- Now Create a resetJump() function.
- Toggle the jumping boolean and call for the rest jump() on pressing the spacebar.
Step 7 – Build the Attack Block
Now after the above steps, it’s time to build a block that will attack the player. The function will be the same as creating the player but with some additional randomization for the block’s properties.
- You will create a new block variable along with the create block() function
- Now Assign the block variable with a value from createBlock()
- Call the function inside the start game() and assign it to the above variable
- Now Create a random number() function
- Inside your createBlock() function, you can assign random numbers for width, height, and speed. Then create a draw() function and attack player() function.
- In updated canvas(), call block.Draw() and block.attack player();
Step 8 – Add Logic to Move Your Player
Now, the block is ready to attack the player but the command is absent for the return of the block from the edge of the screen. For this we need to follow the below steps :
- You will Create a returnToAttackPostion() function inside createBlock()
- Now Reset the width, height, speed, and x and y value of the block
- Lastly, Call the new function at the end of the attack player()
Step 9 – Stop the Game on Collision
The block will successfully attack the player and will return to the starting point but what about ending the game. Now it’s time to write a detect collision() function that will stop the game once a collision happens. You have to Call the detect collision() function in the updated canvas() function.
Step 10 – Add a Score to the Game
Now for the last step, we will add a scoreboard to the game. This will be done in the same way as creating shapes and will specify a fillText property and font.
- Create a score variable equal to 0 to start and also create a score label variable to be used later.
- Create a createScoreLabel() function with a draw() function.
- Assign the score label a value with our createScoreLabel() function
- Call for score label. draw() in updated canvas()
- Increase the score once your block makes it to the end
- For an easy challenge, You can change a few of the variables like full speed or jump speed. Play with it a bit until you get to a setting according to your choice.
- For a medium-to-difficult challenge, You can create a new label on the other side of the screen that holds the number of lives she will have. you can start with three lives which the user can lose after each collision. Once all the three lives are over, the game will get over.
- For a difficult challenge, You can add multiple new objects in the game that will give you bonus points upon touching them. This will involve creating a new function to create the object and adding collision detection. You can add more objects that can fly or float.
The new features and processing power scalable in modern smartphones and computers allow us to create games that can run directly inside a user’s browser. There are still lacunae in browser-based games as they still can’t compete with natively developed games but we can run moderately complex games in a browser without needing any installation.
This Post Has 2 Comments
You helped me a lot by posting this article and I love what I’m learning.
Great content! Super high-quality! Keep it up!