CODEWITHSUNDEEP
htmlcanvas
jimjim
jimjim

Reputation: 225

Starting point for horizontal run game

I was wondering if anyone could point me in the direction of a starting point for creating a game like run field or similar as a way of learning HTML 5 (CSS3).

I have play a bit with GUI elements, but am interested in interactive animation like the above.

Upvotes: 1

Views: 197

Answers (3)

erikbstack
erikbstack

Reputation: 13254

here the links I use myself to learn about canvas:

  1. a Guide (only this chapter was interesting for me)
  2. an example with its sourcecode

After reading a short guide I suggest you only work with sourcecode examples and googling for specific things. It is fast and you will see that you work most of the time on your own code, thus creating something to show off and getting the nessesary experience with the Canvas API.

Upvotes: 1

Phrogz
Phrogz

Reputation: 303234

  1. Figure out what you want the game to be (explicitly).
    • Draw multiple planes of images scrolling at different rates, along with an animated sprite.
    • Have the character 'stick' to the ground.
    • Have the character jump based on mouse/keyboard interaction.
    • Have the character and fall with gravity, landing on the ground.
    • Find out when the character falls in a hole, or hits a wall.
  2. Figure out what things you need to do to accomplish that.
    • Draw tiling images.
    • Keep track of image offsets.
    • Create a level generator.
    • Perform some sort of hit detection to keep the character on the ground.
    • Use physics or a simple equation for gravity.
    • Use event handling to track keyboard/mouse input.
    • Write a game loop performing the animation.
  3. Attempt to implement it yourself.
  4. Ask specific, detailed, targeted questions when you get stuck.

This may sound like a snide answer, but I'm being serious. A really general question of "how do I solve this enormous problem" requires you to analyze it and break it down into ever-smaller chunks until they are bite-sized and accomplishable.

Having a good understanding of the capabilities of your development platform will help your brain perform path-finding, figuring out how to get from your goal to your final implementation.

Upvotes: 2

Juho Vepsäläinen
Juho Vepsäläinen

Reputation: 26873

Check out the list of JavaScript game engines. You might find something fitting your purposes there.

Upvotes: 2

Related Questions