Games states help you arrange the game into logical groupings<\/p>\n\n\n\n
- \n
- LOADING<\/li>\n\n\n\n
- BUILD MAP – make map<\/strong>, then gameObjects<\/strong><\/li>\n\n\n\n
- PLAYING<\/li>\n\n\n\n
- OVER<\/li>\n<\/ul>\n\n\n\n
Only swap between states when necesary, and only the bits that are necessary – e.g. <\/p>\n\n\n\n
\/\/Set the game's current state to `play`:\nlet state = play;\nfunction gameLoop(){\n\u00a0\u00a0\/\/Loop this function at 60 frames per second\n\u00a0 requestAnimationFrame(gameLoop);\n\u00a0 \/\/Update the current game state:\n\u00a0 state();\n\u00a0 \/\/Render the stage to see the animation\n\u00a0 renderer.render(stage);\n}\nfunction play(){\n\u00a0 \/\/Move the sprite 1 pixel to the right each frame\n\u00a0 anySprite.x += 1;\u00a0\n}\n```<\/code><\/pre>\n\n\n\n\u2026structuring your game loop like this will make it much, much easier to do things such as switching game scenes and levels. It means that you can completely change what your game or application is doing by simply pointing the state variable to any other function that contains the next bit of code you want to run.<\/p>\n\n\n\n
HTML<\/h2>\n\n\n\n
sets up a base structure to then fill and modify with JS code<\/p>\n\n\n\n
e.g. place holders for various aspects of the project<\/p>\n\n\n\n
Game structure<\/h2>\n\n\n\n
Use multiple 2d arrays to store various elements of the game<\/p>\n\n\n\n
- \n
- a game map array<\/li>\n\n\n\n
- a game object array<\/li>\n<\/ul>\n\n\n\n
Map code<\/p>\n\n\n\n
And, have a set of map codes for items<\/p>\n\n\n\n
Each one of these aligns to a sprite number<\/p>\n\n\n\n
let EMPTY = 0;
let FLOOR = 1;
let BOX = 2;
let WALL = 3;
let ALIEN = 4;
let BOMB = 5;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/figure>\n\n\n\n
An example structure<\/h2>\n\n\n\n
canvas and drawing surface<\/p>\n\n\n\n
game map array<\/p>\n\n\n\n
game object array<\/p>\n\n\n\n
map code<\/p>\n\n\n\n
tile cell size<\/p>\n\n\n\n
Render<\/p>\n\n\n\n
Managing levels for maps<\/h2>\n\n\n\n
Have an array to hold the map and map objects arrays<\/p>\n\n\n\n
So long as the ‘exit’ on one map, matches the ‘entry’ (or, start point) on the next map, it should be all good.<\/p>\n\n\n\n
But if you have multiple entry\/exit points?<\/p>\n\n\n\n
Tile map editors<\/p>\n\n\n\n
Tiled<\/p>\n\n\n\n
Or, create your own JS one<\/p>\n\n\n\n
Swapping between maps<\/h3>\n\n\n\n
this is ONE way to do it\u2026<\/p>\n\n\n\n
In Phaser for example – just swap the map data, not the whole ‘level’ scene<\/p>\n\n\n\n
this is a good tutorial: https:\/\/www.youtube.com\/watch?v=bJ166s6qFVU<\/p>\n\n\n\n
no need to make a scene for each map<\/p>\n\n\n\n
all you need to do is reset the game scene<\/p>\n\n\n\n
detect when entering certain areas<\/p>\n\n\n\n
restart game scene<\/p>\n\n\n\n
update map and position data<\/p>\n\n\n\n
in tiled – make a layer called ‘transportation’ with a game object<\/p>\n\n\n\n
The basic logic is:<\/p>\n\n\n\n
- \n
- create a ‘transportation layer’ object which will hold a collection of all the identified transportation objects<\/li>\n\n\n\n
- get the transportationLayer data from the map data\n
- \n
- map to load<\/li>\n\n\n\n
- tileSet image to use<\/li>\n\n\n\n
- spawnX location<\/li>\n\n\n\n
- spawnY location<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- create custom collisions for each of the transportation objects<\/li>\n\n\n\n
- add in a call back function which is called when there is an overlap between the objects and the player\n
- \n
- save the game state in a ‘new game state’\n
- \n
- position X to teleport to<\/li>\n\n\n\n
- position Y to teleport to<\/li>\n\n\n\n
- previous map position<\/li>\n\n\n\n
- health<\/li>\n\n\n\n
- coins<\/li>\n\n\n\n
- previous position<\/li>\n\n\n\n
- current frame of char animation<\/li>\n\n\n\n
- current facingDirection of char<\/li>\n\n\n\n
- map to load<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- restart scene (with new map data)<\/li>\n<\/ul>\n\n\n\n
Resources<\/h2>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"See also: Game loop Games states help you arrange the game into logical groupings Only swap between states when necesary, and only the bits that are necessary – e.g. \u2026structuring your game loop like this will make it much, much easier to do things such as switching game scenes and levels. It means that you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-378","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":1,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/378\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- save the game state in a ‘new game state’\n