Global coordinate versus Local coordinate
When handling scroll map, especially for arbitrary scroll, you need to handle both global coordinate and local coordinate and these two are often converted from one to the other. “Global coordinate” means the absolute position in entire map, whereas “local coordinate” refers to the position on the screen. For these three games, I use “canvas” of HTML5, therefore the upper left corner of the screen is (0, 0). So, the key is, we always need to figure out the global coordinate of this (0, 0). In “Ponta’s adventure”, because a main character is fixed at center, the upper left corner (0,0) can be calculated by as follows.
var screen_left = mainCharacter_pos - canvas.width/2; var screen_top = mainCharacter_pos - canvas.height/2;
In “Jumping Ponta”, “screen_left” is only calculated when a main character comes at left margin or right margin. If the margin is too small (say only margin is 1 cell long.), it restricts player’s view. Therefore, I made these margin a bit wider (the margin is 2-3 cell long).
Poke a floor
Other than a scroll map, the main theme of this game is to poke a floor. When the main character’s head hits the bottom of a floor, these segments are lifted up. To complete this part, it took a few days. I had a bug, which I could not figure out why. When a character has a contact with a block (obstacle) at left or right, and press jump key, it fell through a floor. Finally, I came to find out a solution. It has three types of collision, such as character’s whole body collide with obstacle(When walk), character’s head collide with obstacle (When jump up), character’s foot collide with obstacle(When jump down). But these states (walk, jump up, jump down) are not rigidly dividable. When the interval is too short, “walk” state transform directly to “jump down”. So, important thing was to have a cancellation, especially movements of left or right. To do collision detection, first thing you need to check is a collision between whole body and an obstacle. If it has a collision, moving left or right has to be cancelled. After that, we can proceed next checks, such as head collision and foot collision. Anyway, after this modification, the main character never fell through a floor.
Bees and monsters
As you can see, Monsters walk only on 1 chunk of the floor, on the other hand, Bees move across the screen. Blue blocks are spawn points, where monsters and bees are born. To manage monster’s walk, I created “floor” class. In the beginning, the entire map is scanned and the upper-left position of a floor and the length of a floor are stored in the class. A monster belongs to one of “floor” class, so it knows left-end and right-end of the floor. As for bees, the left-end and right-end are same as the screen, so that its local coordinate is used to judge. Having “floor” class make “Ponta” walk easier. Without having “floor” class, just moving on from one cell to the other, the sate changes from “walk” to “jump down”. With floor class, the state remains “walk”.
How to play this game?
This is a game that you get all coins while avoiding hitting monsters and bees. Poke a floor to erase a monster or a bee. If these are on the lifted floor, it will be erased. For jump, touch ↑ button. For move, touch ←→ button. (On keyboard, For jump, press space key. For move, press left or right arrow keys.) Touch jump and move keys at once to jump at an angle. If you take all coins with your life score, you win!
Please watch youtube demo video
You tube demo video is here.
Just watch to see how it looks like. Thanks for reading! Have a nice day!