After first tests on mobile device my game seems to work. I've done basic logic such as displaying player, simple map (with locations and moving between them) and player control - with collisions with the environment. Tomorrow i will work on enemies (finally, ZOMBIES!) and survivors. I want to finish engine in next two days and use rest of the time to build world, expanded with many locations and put final graphics on. I already found graphic designer with enough free time in that week to make some sprites and tiles - meet
Kuba from HighColors. And meet first Zombie I've ever seen - 1st location guy from Resident Evil (it was 1996 on PSX)
And one technical aspect of designing tileset-based map movement. Let us consider map created from simple array with '0' as road and '1' in the role of wall, e.g.
map[0] = [];
map[0].push([0, 0, 1, 0, 0, 0, 0]); //0
map[0].push([0, 0, 1, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 1, 0]); //2
map[0].push([0, 0, 0, 0, 0, 0, 0]);
map[0].push([0, 0, 1, 0, 1, 0, 0]); //4
map[0].push([0, 0, 1, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 0, 1, 0, 0]); //6
map[0].push([0, 0, 0, 0, 1, 0, 0]);
map[0].push([1, 1, 1, 1, 1, 1, 1]); //8
map[0].push([0, 0, 0, 0, 0, 0, 0]);
Movement and collision detection are easy if we want our character just 'jump' from one cell to another. We need then simply calculate if destination tile is not '1'type (wall).
var x = (player.xPosition/tileSize) + deltaX,
//if we move along X axis deltaX is 1 or -1 and deltaY is 0
y = (player.yPosition/tileSize) + deltaY;
//and vice versa in here
if (map[actualMapIndex][y][x] !== 1) {
//move player
} else {
displayFunnyWallHitAnimation();
}
It gets complicated when we want it to take smaller steps, what is necessary if we want animation. For example our player moves 9px each step in 50px big tile. Because DOM coords are calculated from top-left corner, we can observe case in which our character is moving 'on the wall', like that:
With yellow fields as roads, red walls & dark blue dot as sprite's 0,0. We can see that 0 point of the sprite is on the road but the sprite itself is traveling on the wall. So I got the idea of adding one more point to that, i call it x2, like that:
var x = ((player.xPosition+tileSize*0.2)/tileSize) + deltaX,
x2 = ((player.xPosition+tileSize*0.8)/tileSize) + deltaX
y = (player.yPosition / tileSize) + deltaY;
if (map[actualMapIndex][y][x] !== 1 && map[actualMapIndex][y][x2] !== 1) {
//move player
} else {
displayFunnyWallHitAnimation();
}
I add 1/5 size of the tile to the 0.0 point, and 4/5 for another one. It's because my sprite has a little free, transparent space from each size. In practice it looks like that:
And because of kind of isometric (or oblique) view I use ('will use', because it's hard to say about perspective if i have only semi-colored squares as background), i don't have to introduce additional point in Y-s. It looks good when character is standing in front of the wall like on screen below (like in the old Pokemon games for gameboy).
Ok, I will return to developing now, because, paraphrasing
George Bernard Shaw (I don't really remember how it was originally), "Able is creating, unable is teaching" , and I always find writing blogs as a kind of teaching:).
I decide not to show everything in here - it has to be a little mysterious and something must motivate you to play when the game will be finished:). What I want to say & show today, two days before the deadline, is very simple table based map editor I write in about 200LOC with simple DOM manipulation using 24 sewers tiles placed in one png file. It is easy and not so annoying to use, just watch the video below. Second part shows early location exiting/entering (it is already changed), Zombies AI, and better than yesterday connected map tiles.
pure JavaScript. I choose jQuery because I made before a few projects using it. And here it is, a simple puzzle game like almost 10years old 
