How to make a character generator using sprite sheet and JavaScript

Question

http://www.famitsu.com/freegame/tool/chibi/index1.html

I want to build a character generator exactly like this one. Someone suggested me that it'd be easy to use a canvas library, followed by low level JavaScript programming. Some said I don't need canvas and can do it easily with JavaScript. Since I've only learnt core JavaScript so far, hence I really don't have any knowledge or idea about this scene. So can you suggest me where and how to start this project of mine? And what are the required languages I should acquire first before jumping onto this project?

Answer 1

The components of an interactive, graphic application:

• Something on which to draw ( canvas )
• Something to draw ( graphics )
• Looping drawing logic ( animation loop and how to throttle it )
• The game/application's functionality ( game loop )
• Interactivity (event listeners that can react to key presses , clicks , etc.)
• Sound effects and music

These things are the basic building blocks of any interactive, graphic application.

JavaScript is a great language to use when starting out (or even beyond that) because the same concepts apply here as anywhere else, but you can save your code, and run it in your favorite browser!

Here's a Tetris example I've been working on lately in JavaScript that draws the board on an HTML5 canvas. It may seem a little complicated and overwhelming, but all the pieces are there that I've discussed (except for sound =/).

Just for reference, the tick function is my main animation loop. It runs as fast as the window will return animation frames, which is usually quicker than necessary. Once the tick function is called once, it will continue to run until explicitly stopped.

Tet.prototype.tick = function()
{
  var _self = this; // needed for next step
  // This line is what will make this function run repeatedly
  this.requestId = requestAnimationFrame(function(){_self.tick()});

  // Get some time information
  this.tickNow = Date.now();
  this.tickDelta = this.tickNow - this.tickThen;

  // If it's been long enough, and it's time to draw a frame...
  if (this.tickDelta > this.tickInterval)
  {
    this.tickThen = this.tickNow - (this.tickDelta % this.tickInterval);

    // Run the game loop
    this.doGameLoop();

    // Draw the updated board
    this.renderer.drawBoard(this.data, this.curPiece, this.curPieceGuide);
  }
}

Game making can be intimidating at first, because it seems there are SO MANY pieces that need to be understood before you can accomplish what you see in your head, but if you take the concepts one-at-a-time, and start small, you'll be making crazy stuff in no time!