Creating a game using p5.js and Jutsu on BOS
Overview of Project
In this article I will be using jutsu.ai as my IDE, and p5.js to make a simple game where users can drop a ball of a random color and size, balls of the same size and color will combine and increase the players score.
Technologies
Jutsu.ai - Jutsu is a developer platform designed to help you build, launch, and host decentralized frontends.
p5.js - p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
Requirements
Knowledge of HTML, CSS, JavaScript and React Components.
Getting Started
Head over to Jutsu.ai, login using your preferred account and create a new component.
Let's start by creating a react component that we will use to return the game using and iframe, here is the initial set up for that.
Using this set up we can tell the difference between the screen and the game screen, at the moment the iframe is loading nothing so the entire screen is blue, let's add some code to get the game screen to show through the Iframe, this maybe a bit uncomfortable for some people but bare with me, what we are going to do is write all the code inside the code variable and pass it into the Iframe as an ES6 Template Literal String.
Any code written inside the code variable has to use HTML syntax, for this example the head, style, body, and script tags will be used.
Using this method we are going to load some a font from google font, then using p5.js create a canvas to display the game, we will load the font and the p5.js library from the head tag, and any code related to the game will be inside the script tag.
Once everything has loaded correctly you should be able to create a canvas with a desired width and height using createCanvas() inside a setup function, these values could be fixed or if you want them to be dynamic with it's parent container then you could use windowWidth and windowHeight to do so, inside the draw function you can also use the background(r,g,b) function, which accepts an R, G, or B value for each parameter, to color the background of the canvas.
Now lets create a circle at the mouses position on the gamescreen whenever someone clicks, to do this we will create a constructor inside the Circle class which will define an X and Y position, a radius, and a color for the circle, we will also define a display() function for the circle which will make the circle appear on the screen when called.
Inside the mouseClicked function and other p5.js functions you have access to the mouseX and mouseY variables which are your current cursors position on the canvas, so using those as our circle's x and y position and the color red using RGB ({r:255, g:0, b:0}) we can call circle.display() inside the draw() function.
Now lets add some logic to have the circle fall after you click and bounce off the ground or wall, to do that we need to add a few more properties to the circle:
Let's create a new global varaible called groundHeight, this will define where the ground is on the screen, we will also create a fall() and checkBounds() function, fall() checks if a circle is falling then simulates gravity by increasing it's Y position by the ySpeed when called, checkBounds() ensures that a circle will never cross the set groundHeight and the wall. After creating a circle, setting it's isFalling value to true and calling circle.fall() and circle.checkBounds() after circle.display() should make the circle fall and hit the floor.
Let's add some logic to the circle that should allow the player to fill the screen with circles that can stack ontop each other. First we will need to add a new global variable, an Array that will store all the circles dropped by the player, we also need to make some adjustments to how a circle a drawn to the screen.
At the moment inside the draw function we check to see if the circle variable gets updated and if it is then we call display, fall, and checkBounds on that circle, what we are going to do now is loop through the array of circles dropped by the player and call display, fall, and checkBounds on those circles.
Next would be to add two functions, a function that handles circles bouncing off each other and another to check and handle if circles collide with each other, to accomplish this we will be using the following p5.js functions:
For now we just want the circles to bounce off each other and to accomplish that we will use the following function:
To handle having the circles bounce off each other we will be using this function:
Now with these functions we can have each ball check if it is colliding with another ball and handle it accordingly, to do this we will have each circle check if it is colliding with the next circle in the array, we can accomplish that by doing the following:
If everything was done correctly you should have something like this.
Next, let's add some logic to allow circles of similar color and radius to merge with each other, to accomplish this we will add an if statement inside the handleCircleCollision function to check if both circles are the same color and radius if so merge the two circles. To get the merge effect we want we will create a new radius by combining the raidus of both circles then assign that new radius to one of the two circles and remove the other circle from the array to have it vanish from the game container.
Here is the modified handleCircleCollision function with an additional if statement that removes both circles if the new radius is equal to 100. Next let's implement a random size and color for each circle that is created, we will initialize two new global varibles one that will hold the sizes we want and another to hold the colors.
Now inside the mouseClicked function we will generate a random number using the built in Math.floor and Math.random functions, then using that number we will grab a size and color from their respected arrays and assign them to the new circle.
Next let's add a timer that will prevent the player from creating anymore circles after the timer hits 0, and a score that increases everytime a merge occurs. First we need to add two new global variables one for the timer and the othe for the score.
Once the game starts we want the timer to start, so to trigger the timer to start counting down we will use a setInterval to decrease the timer by 1 every second (1000ms) until it hits 0.
To stop the player from creating circles once the timer the timer hits 0 we are going to add an if statement inside the mouseClicked function that checks if the timer is greater than 0, if so then the player can create a circle.
Now lets display the timer and score to the screen using the font we imported earlier, we are going to use the following p5.js functions to accomplish this inside of the draw function.
Finally let's add the logic to increase the score everytime a merge occurs, for this example we will have each regular merge increase the score by 5 and any pop (both circles vanishing) be worth 10, this is a small change to the if statement that makes circles vanish when they reach a certain radius.
If everything went well then you should have something that looks and works like this.
So that the game copies the same mechanics as the one shown in the picture at the beginnning we will have the ball fall from a specified height on the screen, all you need to to is specify a fixed Y value for the circle when it's created instead of the mouseY value which updates everytime the mouse moves.