My Blogs

In this article series, we are going to create a Simple Space Shooter game in HTML5 using p5.js. 

We are going to use p5.js, a Javascript library for rendering web animations in Canvas.

To get started let us download click here.    

Select Complete Library > p5.js complete. 

We will use Kenney's Space Shooter Redux as our main game assets for this simple game, to download, click here.

Since we are using images to run in p5.js , we need to run it in a server, make sure that any version of MAMP, WAMP, or XAMPP is installed.

Once we have all the things we need to make our game, let's now get started.

1. Game Folder Structure

First let's make create our game folder and named it space-shooter.

After that let's create our the folders and files needed in our game.

Here's what our game folder should look like:

- app - will contain all our game scripts 

- assets - will contain all of our game assets and 3rd party scripts like p5.js

Next step is to move Kenney's Space Shooter Redux asset, into our game folder.

If we open it, we'll see all the assets inside it.

Here's the list of files that we will use and should it be named on to our app.

- PNG > playerShip1_red.png => assets > images > player.png

- PNG > Lasers > laserBlue01.png => assets > images > bullet.png

- PNG > Power-ups > star_gold.png => assets > images > star.png

- PNG > Enemies > [All Files Inside] => assets > images > enemies > [All file number 1.png to 20.png]

Our folder structure now should be: 

After that we are now done with the game's folder structure .

2. Setting up game scripts 

Let's now create our index.html file.

After that let's now create our main script for running all p5's main functions, sketch.js,  app > sketch.js 

- preload() is a p5.js function that runs before setup, it is usually used for preloading all the assets(images, sounds, etc) inside the game

- draw() is a p5.js function that runs every frame, in p5.js it runs on 60 fps, so this function will be called 60 times every second.

- setup() is a p5.js function that is mainly used for initializing variables, creating canvas.

-createCanvas() is a p5.js function that will create the canvas where our game will run.

- background() is a p5.js function used for setting the canvas color.

Let's now reference, the sketch.js file on to our index.html.

and now let's run the app by entering this command on VS code's terminal :

php -S localhost:8000

After running our game, we can see a blank black canvas on our window:

3. Asset Manager

Let's now load all the assets in our app, create app > asset-manager.js.

- loadImage() - will load the image based on the path provided in the parameter, and returns p5.Image object
- [...Array(20).keys()] - this code is the ES6 alternative for   for (let i = 0; i < 20; i++)  

Let's now reference, the asset-manager.js file on to our index.html.

4. Game Manager and Game Object

Let's now create a GameObject class that will be the parent class of all our game entities.

- Our GameObject class will keep track of :
  -position (pos) - x,y coordinates of the object in the canvas

  -velocity (vel) - keeps track of the x, y movement of the object in the canvas.

  - image (img) - the sprite image of the game object from the AssetManager class.

  - size (size) - the width and height size of the game object

  - life (life) - keeps track of the life of game object

  - tag (tag) - tag name to keep track on what time of game object is created.

GameObject's methods:

 - show() - render the game object inside the canvas.

   - push and pop - is a p5.js function that indicates start and end of positioning.

   - imageMode - takes parameter CORNER, CENTER ,CORNERS,  for displaying the image

   - translate - takes two parameter (x, y) to position the image.

   - image - displays the image in the canvas.

- update() - updates game object position in the canvas

   this.pos.add(this.vel) - adds the velocity to make the game object move.

Let's now reference, the game-object.js file on to our index.html.

Now let's create our player class.

It will extend the GameObject class, and add these properties: 

 -  fireRate - in every frames our player will shoot bullets

 - damage - variable that indicates the player damage to enemies

- bulletSpeed - speed of the bullet that will traverse through the canvas

Let's now reference, the player.js file on to our index.html.

- init() - will be called when the game starts, we will instantiate the player, with 0,0 velocity, cause we want the mouse to make the movement for the player

- loadAssets()  - will be called on p5 preload() function, to load all the assets that will be used in our game

- update() -will call all the game objects and render them one by one.

- renderPlayer() - will be called every update and player will follow the mouse position in the screen clamped at playerWidth / 2 and width - playerWidth / 2

 
And now let's update our sketch.js file, to call respective gameManager methods in each p5.js lifecycle methods.

After we run our game we can see this :

Cool, now we can see our player moving.

That concludes our part 1 of this article series.

Next Article: http://onecompileman.com/blogs/6

In this article we are going to solve 2 Codewars' [6th kyu ] problems using Javascript (ES6) and  discuss approaches how problems can be solved .

Codewars is a great site for improving your problem solving skills and it's also great for discovering different approaches of other developers in solving each problems.

Problems at code wars are label by difficulty as kyu, [1st kyu] being the hardest and [8th kyu] being the easiest.

Let's now start with our first problem.

1. Matrix Addition

Codewars link: https://www.codewars.com/kata/matrix-addition/train/javascript

The problem is :

The solution:

Non ES6 approach: 

We have created m as the variable that will hold the sum of cells in both a and b in same row and col.

And every row iteration we are adding an empty 1d array to m, so that we can store the sum of same cells for both a and b.

And would you believe the approach above can be reduced into a single line of code?

ES6 Approach: 

In this approach we have used arrow function of Javascript, to omit the function() keyword, to make it more shorter.

Also using arrow function would omit the return keyword.

We have used map here to mutate the matrix's value, and we have another inner map since we are dealing with 2d  array here.

Same as our solution above we have r  and c which denotes the row and column of the cells we are adding .

2. Find the unique number

Codewars link: https://www.codewars.com/kata/find-the-unique-number-1/train/javascript

The problem is :

The solution:

Non ES6 approach: 

uniqObj is a variable that will hold the unique elements in the array as key.

hasOwnProperty() is an Object method that returns a boolean value if the key already exist in the object or not, if it exists we are setting it to true meaning the it is not unique, otherwise initialize it to false.

Object.keys() gets all the keys inside the object needed to iterate into the object values to find false in it, meaning it is a unique number then return the parseInt value of that key.

ES6 Approach: 

Uses the same idea as we did above, but instead of declaring a var uniqObj and using forEach to accumulate its value, we used reduce() instead, as well as to finding which key is the only unique number.

Instead of using if in checking to the unique number, we used a ternary operator.

We also change parseInt(strNumber) into +strNumber, which is the shorthand for parsing int.

That ends our article in Solving 6th kyu Codewars problem using ES6.

Check out the 7th kyu version of this article: http://onecompileman.com/blogs/3

In this article we are going to solve 3 Codewars' [7th kyu ] problems using Javascript (ES6) and  discuss approaches how problems can be solved .

Codewars is a great site for improving your problem solving skills and it's also great for discovering different approaches of other developers in solving each problems.

Problems at code wars are label by difficulty as kyu, [1st kyu] being the hardest and [8th kyu] being the easiest.

Let's now start with our first problem.

1. Sort array by string length

Codewars link:  https://www.codewars.com/kata/sort-array-by-string-length/train/javascript

The problem is :

Non ES6 approach: 

We used Javascript's sort() function here which takes a callback function as an optional parameter for sorting.

Since we are comparing the length of the string as the basis for sorting, we used length property of the string.

a.length - b.length  this will be sorted in ascending order,

if we want it in descending order we just have to reverse the expression b.length - a.length

Would you be believe that our solution above can be reduced into a line of codes?

ES6 approach:

What's new here is ES6's arrow function, click here to learn more about arrow functions.

2. Flatten and sort an array

Codewars link:  https://www.codewars.com/kata/57ee99a16c8df7b02d00045f

The problem is :

Non ES6 approach: 

We used reduce() array method to transform the 2d array into 1d array. 

acc stands for accumulator in reduce wherein it is initialized as empty array, concat() the array every iteration.

Again we can reduce the solution above into a single line of code.

ES6 Approach:

What we have used new here is this operator "...", which is called Spread Operator

Spread Operator, flattens and spreads the array content. To learn more click here 

3. The Office I - Outed

Codewars link:  https://www.codewars.com/kata/the-office-i-outed/train/javascript

The problem is :

Non ES6 approach:

We have used Object.keys() to get meet object keys, which we will need to compare if the person is the boss or not.

If boss multiply it by 2, after accumulating the sum of all team members, divide it by length of keys inside the meet  object to get the average.

After getting the avg check if <= 5 and return the necessary statement.

ES6 Approach:

We still used the arrow function here and some ternary operator to make the condition much more shorter.

That ends our article, there's a lot of possible code improvements when using ES6.

This is the continuation from the part 1 of this article series.

What we have accomplished here so far is adding of bubbles with random color and radius on mouse click.

Next step is to make those bubble move around the screen, to do that we need to keep track of bubbles x, y location and as well as its velocity.

1. Creating a bubble object 

We need to create a bubbles variable to contain all the bubbles that has been added to our canvas.

Next is to create a Bubble Object that will contain position, velocity, color, radius.

Next is to add show function in it, which is the same code we have in the mousePressed() function

Now let's move to our mousePressed() function and add new bubble object in the bubbles variable we have.

createVector()  takes 3 argument x, y, z which is the coordinates of our bubble, since we are doing this on 2d we are going to ignore z axis

If you try to run this now on our browser, you'll see nothing is displayed on the canvas, its because we have to loop and display all the bubbles.

On our draw() and setup() function, let's display all bubbles that has been created.

If you run this on the browser we get to see same results as to our part1 of this article series. But what has improved or change, if we still get the same results?

In this case its easier to keep track and manipulate each bubble's properties since its already wrapped in an Object.

2. Making the Bubbles move

Next step is making our bubbles move, which a lot more easier than you think.

On our bubble object let's add an update() function that adds the velocity to our position, to make the bubbles move.

On our mousePressed()  function let's add a random velocity to our bubble, every mouse click

And call the update() function of the bubble on draw

If we run this on browser, here's the output.

Next step, is to make the bubbles not to leave the canvas when it hit the edges.

3.  Making bubbles stay at the screen

Let's write an edges() function inside the Bubble object, which detects and inverses the velocity if it hits the edges of the canvas.

And let's call the edges() function inside the update() function.

After running, we can now see this as our final result.

Source code: https://github.com/onecompileman/simple-bubble-screen-animation

Try it here: https://www.openprocessing.org/sketch/631480

In this article we are going to make a simple Bubble screen saver like animation in HTML5.

We are going to use p5.js, a Javascript library for rendering web animations in Canvas.

To get started let us download click here.    

Select Single Files > p5.js. 

After that we can now start coding this simple animation.

1. Place the downloaded p5.js file in our project folder, create two files in it named sketch.js and index.html

The folder structure should be like this: 

index.html - Referenced the 2 js files inside the project

sketch.js 

setup() and draw() are the two main functions in p5.js

- setup - in p5.js being called once here after the document has loaded.

- draw - is being called every frame per second(fps), 

- createCanvas(windowWidth, windowHeight) - creates a canvas on our HTML, where we render our bubble animation with the size same as the window.

- background(0) - Renders black colored canvas

2. Creating bubbles

Let's add a bubble on our canvas, using the ellipse function

width / 2 and height / 2 makes our bubble be at the center of our screen

Let's open our index.html and try to see in browser, what our web animation currently looks like.

Cool, now we have our first bubble, the next step would be adding bubbles, every time the mouse is Pressed on the screen.

We are going to use p5.js function mousePressed(), to keep track of mouse clicks on the canvas.

Let's move the background(0), in the setup() for the mean time 

Leave the draw() function as blank.

And let's create bubble every mouse click.

mouseX and mouseY is current mouse position in the screen after we clicked the canvas.

After running and playing with mouse clicks, we should see something like this.

Let's try playing with this some more, by using random() function of p5.js.

- random() accepts two parameters the min and max value range to randomize

- color() accepts the rgb values

Let's run it again and try playing with it.

Cool! now we have something like this, next step is to make it move.

Next article: http://onecompileman.com/blogs/2