HTML JS Game: Parallax HTML Game

Even though I have been enjoying video games since I was 3 years old, I had never been successful in building my own games. Although I had built some basic games in DOS, they never worked like proper games at all.

A few weeks into my new company and with no work being assigned to me, I luckily got a terminal. So I decided to try out my skills in HTML and JavaScript and build a right-to-left scrolling game. I was inspired by Space Impact, one of the best games featured on Nokia phones.

Creating a Parallax Effect

One of the key visual elements I wanted to implement was a parallax scrolling effect. Parallax scrolling creates depth by moving background elements at different speeds - distant objects move slower than closer objects, creating an illusion of depth.

In web-based games, we can achieve this by:

1. Creating multiple layers of backgrounds
2. Moving each layer at a different speed
3. Using absolute positioning and transitioning

// Example of moving parallax layers
function moveParallaxLayers() {
  // Move the far background slowly
  $('#background-far').css('left', '-=' + (gameSpeed * 0.2));
  
  // Move the mid background at medium speed
  $('#background-mid').css('left', '-=' + (gameSpeed * 0.5));
  
  // Move the foreground at full speed
  $('#background-near').css('left', '-=' + gameSpeed);
  
  // Reposition backgrounds when they move off-screen
  checkBackgroundPositions();
}

Game Physics and Controls

For the game mechanics, I implemented:

• Keyboard controls for player movement
• Collision detection for obstacles and enemies
• Projectile firing mechanism
• Score tracking

// Simple player control
$(document).keydown(function(e) {
  switch(e.keyCode) {
    case 38: // up arrow
      movePlayer('up');
      break;
    case 40: // down arrow
      movePlayer('down');
      break;
    case 32: // space bar
      fireProjectile();
      break;
  }
});

Performance Challenges

Building games in HTML and JavaScript comes with performance challenges. Some strategies I used to optimize the game included:

• Using CSS transforms for smoother animations
• Implementing object pooling for projectiles and enemies
• Throttling collision detection checks
• Using requestAnimationFrame instead of setTimeout for the game loop

Browser Compatibility

While testing the game, I found it worked best in WebKit-based browsers like Chrome and Safari. The game leveraged some advanced CSS3 features that weren't consistently supported across all browsers at the time.

Learnings and Takeaways

Building this game taught me valuable lessons about:

1. Game loop implementation
2. Managing game state
3. Performance optimization for web-based games
4. The importance of efficient collision detection

Conclusion

Although simple by today's standards, building this HTML/JS game was an excellent learning experience that deepened my understanding of creating interactive web applications. The skills acquired from this project helped me in later web development work, particularly for applications requiring complex user interactions and animations.

The source code for this game is available in my GitHub repositories for anyone interested in exploring how browser-based games were built during the early days of HTML5.

Note: This article was migrated from the original A thousand nodes blog (2011)