debugger;

Make the world a better place, one bug at a time.

New HTML5 Game: Asteroids
Tuesday, 8 July 2014 by @giancarlo84

The Game

Asteroids is a classic space shooter game written in Javascript as a demo for my HTML5 graphics engine j5g3.

Click on the image to start the game.

Features

Lessons Learned

Audio

To play overlapping audio samples I used the cloneNode function of the HTML Audio element.


		$assets.shoot.cloneNode().play();
	

Device Orientation

The game displays a warning message when the device is not in landscape mode. To achieve this I used a combination of HTML and CSS.


	@media (orientation: portrait) {
	#portrait-warning { display: block; }
}

It also detects through javascript when the orientation changes and pauses the engine if needed.


window.onorientationchange = function reorient(e) {
	if (window.orientation % 180 === 0)
		engine.resume();
	else
		engine.pause();
};
	

The Future

There is still a lot of room for improvement, and I'm planning to add more features as I continue working on the engine.


html5-game j5g3 asteroids