Jump to content

Recommended Posts

I have recently decided to build a simple HTML5/Canvas platformer game. This is the first time I have created any type of game and I just had a few questions so any answers will be much appreciated.

I have currently created a platformer where the character can move left and right, the camera follows him as expected and I have even added blocks for him to jump on. However how would I make the character walk up some steps or up and down a slope such as a hill or some stairs?

Also I am currently using one big image for the background of the game however I have seen some examples where background/levels are built up using really small tiles (sprite sheets) along with arrays to plot the tiles. Which is the best way to do this and if its using an array is there any examples or tutorials of how I can create levels this way?

I tried to go through the code on the following site http://madebyevan.com/metroid/ as it has the up and down stair functionality I require, however I found the code quite difficult to understand.


Link to post
Share on other sites

Well, I think you use plain js right? I have a feeling :D


A solution for your stairs:

when your character is walking there  must be a statement like "posX--;" in your code. If you want to walk up you must also change the value for the Y-position. You must add the maximum high, which your character can walk up without jumping, for example 20px to you posY and save the value in an variable

"var testPosY = posY - MaxStepUp".

Now you can use a while-loop to set the testPosY lower and lower until you detect a bottom, so: 

...posX--;for(var testPosY = posY - MaxStepUp; testPosY < posY; testPosY++){    if(isAtBottom[posX][testPosY]/*You must create here your own solution, i don't know how your world works, srry*/){        break;    }}posY = testPosY;...

I just want to tell you this concept (hope you understand me xD else you can write me a message) I do not know if the solution works on your game, because I don't know how your game works :D


BTW: I like madebyevan.com, I found this site some weeks ago. http://madebyevan.com/webgl-water/ is fantastic :)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...