See the Pen Crazy Tortoise [http://codepen.io/khanhhua/pen/pJWMzX/] by Khanh Hua (@khanhhua [http://codepen.io/khanhhua]) on CodePen [http://codepen.io].

I would like to share a pen I made in June. It is a simple console looking game to demonstrate various aspects of creating a game for browsers. Please give it a try here http://codepen.io/khanhhua/full/pJWMzX/ In the following section, I would like to give the details of the game from ideas to implementations, from problems to solutions.

Version 1 (June 23rd 2015) Features: Keep it Simple As the tortoise, player can:

  1. Move left by holding the LEFT KEY
  2. Move right by holding the RIGHT KEY
  3. Jump up by pressing the SPACE BAR

Things that we don’t see in Version 1

  1. Physics: gravity, collision counter-force…
  2. Enemies, obstacles
  3. Props: trees, clouds, mountains
  4. Non-uniform terrains: cleavage, streams…
  5. Sounds
  6. Tutorial
  7. Game Pause
  8. Multiplayers
  9. Internationalization

Game Design

User Interface (HTML/CSS)

Rendering techniques

  1. CSS Sprite, CSS Backgrounds
  2. Fixed size HTML elements

Sprite appearance

  1. Animation with passive element repositioning
  2. Animations with CSS background positioning

Game Engine (JavaScript)

  1. setInterval to control the frame rate at 15 FPS
  2. requestAnimationFrame to schedule next repaints
  3. Use native event handler to handle simultaneous key inputs
  4. A simple gameLoop function to orchestrate game activities
  5. Apply OOP to manage game object states
  6. Control game object states based on FPS

References

  1. Game Programming Patterns by Robert Nystrom [http://gameprogrammingpatterns.com]
  2. Sprite source [http://www.spriters-resource.com/fullview/22504/]
  3. CSS3 Patterns Gallery [http://lea.verou.me/css3patterns/]
  4. Sky Gradients [http://codepen.io/zessx/full/rDEAl/]”