Directions App!

Find it here: https://fisheymug.github.io/DirectionsApp/

TL;DR:
An updated version of my web based directions game. Move the character around the map and get him to his goal. This has more options of default maps including School and City, plus the ability for students and teachers to make their own original maps.
Read below for a more detailed breakdown!
Cheers

This is my Directions app for use in ESL classrooms to help students practise giving and receiving directions.
It follows but refines the same basic principle as my previous direction games but with the added ability of letting the students create their own unique "maps".

The way the game is played is by moving the character to the goal (via the buttons or arrow keys). The sentence shows the current goal.
For a kind of two player/group version, a "direction giver" can click on a building/school room (making sure that the "controlling player" does not see) and that will become the new goal. The idea being the “controlling player" moves the character according to the “direction givers” instructions. The sentence changes to reflect this, hiding the goal so that the player has to listen to the directions.
At any point we can click on a “move marker” (the black dots) to select it as a start location. This will stop the player being spawned in random locations after a goal is reached. To go back to random spawn points, click the same move marker again.
There is also a check button to hide the move markers altogether if you prefer.
Choose the City or School option in the main menu to be given a choice of default maps to play on.

The create a level option will let us create our own unique maps for use in the exact same kind of game. We have two options;

1. Click a default blank map, then drag buildings into it making sure to avoid overlapping the roads.
   We can click on a placed location to highlight it. Then using the plus and minus buttons we can adjust its size.

2. Drag your own image file into the map area. Using this method we can see the player in the level in order to adjust its size. Click the player image in the right panel to hide and show it in the map as needed.
   You can click and drag move markers - the black circles, and unique location boxes - the blue squares, onto the image. The location boxes have a text box for naming the location. You are also free to drag the building pictures into the map also.
   We can adjust the size of locations by highlighting them with a click and using the corresponding plus and minus buttons, just like with a default blank map.

When we are ready, we can click start. We will be taken to the finished level ready to play. It will work the same as the default maps, with the addition of a check button to hide the blue location boxes.
The created level is also saved in the browser's cookies. Click on Player made level in the main menu to get back to it. Creating a new map and selecting play will overwrite this save.

I hope that with the addition of being able to create unique maps that students will be invigorated to practise giving and taking directions within their own creations.
The limits abound when you consider taking an image of the school map, or a screenshot of the local area from google maps, or perhaps even photos of dream town posters that students make - to name a few possibilities.

There are however some limitations that need to be taken into account when creating your own maps.
Importantly, the character can only “move” up, down, left and right. Diagonals and curved lines that are typical of genuine maps will not translate well into the app. When placing locations and move markers we need to be careful that they are placed in straight lines and right angles. The character will only move to a location that it can “see”. Imagine a straight line from the player's face - this is where he can move if you push go straight. If a location or move marker diverges too much off of this straight line, it will not be able to move to it.

There are also bound to be some edge cases where the player begins to loop in its walk animations. This is often a bug that can be rectified by a page refresh or worst case, remaking the level. If the problem persists however it may be that the size of the player, or location, needs changing.
Also I have not been able to fully test this on different browsers and devices, your mileage may vary.

Finally I will briefly mention that in order to circumvent any potential problems with copyright I have attempted most of the art myself. That is why it looks so terrible to which I can only apologise, it is a work in progress. Ideally we should let the students create their own beautiful maps to use!

I hope that people out there can get some use out of the app. All feedback is much appreciated, like the art, the app is still a work in progress.
Thank you!

Find it here: https://fisheymug.github.io/DirectionsApp/