17 Neat HTML5 Games To Keep You Busy This Weekend

Flash games are old and technology is advancing. I have collected some amazing HTML5 games that you can play this weekend and keep yourself busy. They are in random order (no ranking or anything else). Make sure you are using a modern browser that supports HTML5 and Canvas.

Continue reading “17 Neat HTML5 Games To Keep You Busy This Weekend”

20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master

Every now and then a new technology releases giving better features and advantages over the previous ones but learning them all without spending a lot of time can be a pain. HTML5 <canvas> element is one of those technologies which is used to draw graphics, on the fly, on a web page via scripting (normally JavaScript). Learning <canvas> is not hard at all but due to a lack of good tutorials around the web makes it difficult to understand, specifically for newcomers.

Continue reading “20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master”

How I Created My Version of Doodle Jump in HTML5

I’ll try to take you through my process of re-creating the famous Doodle Jump (which was originally released for mobile platforms) in HTML5 from scratch. The entire write up might help you with creating your own games from scratch!

Continue reading “How I Created My Version of Doodle Jump in HTML5”

Why clearRect Might Not be Clearing the Canvas Pixels

Sometimes the clearRect(x, y, width, height) method on the canvas context might not erase the previous graphics drawn. This usually happens when we’re drawing paths using methods like lineTo(), arc(), rect(), etc. and then stroking them with stroke() or filling their content area using fill(). Here’s an example of what I’m trying to convey.

Continue reading “Why clearRect Might Not be Clearing the Canvas Pixels”

Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)

I am going to share a neat little trick that was learnt while working on an HTML5 game recently. The game is pretty much like our HTML5 Doodle Jump. We had to make sure that the game scales down very well on smaller devices like mobiles, ipads, tablets, etc. and in the process learnt a neat trick to scale the entire canvas across all devices consistently.
Continue reading “Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)”

Games Physics: Basics and Implementation of Predictive (or Continuous) Collision Detection

Few days ago, I wrote a post about why time based animations are better than frame based animations. However, in animations done as a function of time, some serious problems could arise. One of them is that your regular collision detection techniques might fail if the frame rate is lower than acceptable. Your object might pass through the walls or even fall through the floor!

Continue reading “Games Physics: Basics and Implementation of Predictive (or Continuous) Collision Detection”