Posts

Showing posts from November, 2019

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 byif(position.x  + radius < 0) // bounce
if(velocity > 0) return; // moving
velocity *= -1; // change directiondirection is only changed if the ball tries to move  beyond the zero position.
i have touched a bit on …