How to make a html5 breakout game in JavaScript

-

In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo.

Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later.

First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented by

if(position.x  + radius < 0) // bounce
if(velocity > 0) return; // moving
velocity *= -1; // change direction

direction is only changed if the ball tries to move  beyond the zero position.
i have touched a bit on the behavior of the ball apart from colliding with walls the ball will as well collide with blocks and the pedal.

Second entity is a pedal a static body with a rectangular fixture which only moves along the x-axis on the 2d plane movement is implemented by

let speed = 300; // define speed rate
if(keys.left == true) // move left
this.state.velocity.x = -speed;
if(keys.right == true) // move right
this.state.velocity.x = speed;

that's it apart from moving the pedal will also collide with the ball.

Third Entity is a block a stationary static body with a rectangular fixture as compared to the ball and pedal a block doesn't move much it awaits for collision with entities of type "ball", checks it's life then it terminates it's self if the life is below zero.

// handle response
if(entity instanceof Ball) {
    if(this.life < 0) this.kill(); // terminate
    else this.life -= 1; // subtract life
}

that's all for the block another property is spawning particles after collision to show impact caused by the ball.

I have explained in a nutshell the roles of the entities to make the game first
create a directory you can name it whatever you want i named mine panda-breakout

using the command line enter into the directory initiate a new npm project by running.

npm init -y

after doing that you'll get a response with your project details i.e
{
  "name": "breakout-panda",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Go-ahead and install craters.js by running the command below in your terminal.
npm i craters.js

Now create the following files in the base directory of your project again in your terminal run:

touch game.js
touch index.html

Further more create another directory called 'media' it will contain the images audios and other static files for the project.

mkdir media

next step in your terminal set the remote origin of your project to the git repository below to get the images and source code.

git remote add origin https://github.com/swashvirus/craters.js

or better still copy the code manually.

Comments

Post a Comment

Popular posts from this blog

How to wait for a promise within a loop block

-
JavaScript promises enable developers to write asynchronous applications in JavaScript Loops are ways of iterating elements For instance doing an asynchronous task within a for loop can be done as follows; Note that lag is used to emulate some delay. const items = [1, 2, 3, 4] const lag = async (delay) => {     return new Promise((resolve) =>         setTimeout(() => res(`${delay / 1000} sec`), delay)) } items.forEach(async (item) => {     const seconds = await lag(1000 * item)     console.log(seconds) }) expected output 1 sec 2 sec 3 sec 4 sec After running the code above every second some text was printed
Read more

JavaScript intro to classes

-
Classes are objects 'functions which introduce inheritance parent child relationship in JavaScript it promotes code reusability which reduces the amount of code in a JavaScript application. JavaScript class decelerations start with keyword class proceeded by class name with a class body having a constructor along with methods for instance class human {     constructor(name) {          this.name = name;          this.gender = null;     }     great() {         return "Greetings " +         (this.gender == "male") ? "mr " : "mrs " + this.name     } } Child classes are created by adding the keyword extends followed by the parent class name and parent class methods can be called using the syntax super.+"method name"(parameters) class man extends human {   ...
Read more

Tar basic commands to store and extract files

-
Targeted is an archiving program designed to package, store, and compress multiple files into a single portable package the name tar is an abbreviation for tape archiver Apart from creating .tar archives tar is also capable of compressing files using zip, bzip2, and gzip compression algorithms Tar flags c — compress directive x — extract directive t — tabulate contents f — specify filename z — use zip/gzip compression j — use bzip2 compression k — do not overwrite t — files from file w — ask for configuration v — verbose gzip flags d — decompress file Tar commandline commands syntax tar -{arguments} {params} Example tar commands tar -cf music.tar music.mp3 Tar archiver will be directed to compress music.mp3 into a tar archive named music.tar and save it in the current working directory tar -xf music.tar Tar will be directed to extract music.tar archive and save the constituent contents of the archive...
Read more

FlappingBird JS13K Games

-
Image
FlappingBird is a Mobile side scroller game where the player controls a bird, attempting to fly between columns trees without hitting them Development of this game started out when i was attempting to draw perfect clouds programmatically on a canvas i later added a few more clouds (Something's missing) add moon, stars,  buildings and also add Gradients and for the games character i settled on a bird (using Sprite sheet obtained freely from opengameart) add more them and animated everything. FlappingBird is a single player arcade-style game in which the player controls the bird, which moves persistently to the right. The player is tasked with navigating the bird through pairs of trees that have equally sized gaps placed at random heights. the bird automatically gravitates and only ascends when the player taps the touchscreen or spacebar. Each successful pass through a pair of trees awards the player one point. Colliding with a tree or the ground ends the gamepl...
Read more