1. What to do:
   • In PHP, create a home page with registration/login options as well as a list of the top 10 high scores. The home page should have a login form as well as a link to a registration page. The PHP should be backed by a persistent store (SQL database). Registration is validated both in the front end and the backend (in your PHP code). For registration form backend validation, on invalid data, re-populate form fields and redisplay the registration form. A username can only appear in the database at most one time. Once a user is registered, they can either be automatically logged in, or placed back on the registration page for login, the choice is yours. When they login, a session is started for the user and they are shown the game page. Users can not see the game page if they are not logged in, they should be redirected to the login page.
   • A little bit about htpasswd and htaccess: The ww directory I have given you contains two files, .htaccess and htpasswd. In general, you would not put the htpasswd file in such a 'convenient' place. In any case, I have set this up so that self can access the directory with password changeThis. Your job is to fix .htaccess so that it points to your htpasswd and also change the password using the htpasswd command. Otherwise, curious students can simply browse into your directory, download your game and play with it, and then look at your code. See Authentication and Authorization. By the way, this is not great security, at least cs uses https though, so the whole conversation is encrypted.
   • Monsters can kill the player by touching them (occupying the same square) as well as the player can kill monsters (when a monster is completely surrounded, and not by a player).
   • Create a notion of score based on the elapsed time since the start of the game. Have this time displayed continuously.
   • You can control the game either by pressing the arrow image buttons or by using the keyboard. See the keypress event. q-NW w-N e-NE a-E s- d-W z-SW x-S c-SE
   • A player can move into any empty, adjacent square, if the square has a box in it, the box is moved by the player. The player can move a long line of boxes (use object recursion).
   • The game should know when it is over (player wins or looses).
   • Create at least one new type of Monster, one that moves a bit more intelligently. For example, when it runs into an obstacle, it should choose another, available direction. You can use containment to imitate inheritance. See inheritance notes at in the references section. You will need another class.
   Some more details are below...
2. Control: In addition to being able to play via the keyboard, your UI should allow the user to play via clicking on a collection of images. You should setup a small table of images which are clickable. When the user clicks on an image it causes the player to move. For example (click the arrows below): This will make your game 'almost' playable on a tablet. Unfortunately, double clicking on an icon will cause the browser to respond by enlarging that section of the webpage. This can be fixed.
3. The Stage: The stage contains all of the actors in the game. There are two approaches to the interaction of the stage with the actors, one is to have the stage understand and move the actors, the other is to have each actor understand how it moves and simply move itself. To do this, the actors will have to look back at the stage to understand which actors are where. The first is the more procedural approach, the second, the more object oriented approach. You can see the more object oriented approach in flys. You can make each actor responsible for drawing itself to the correct spot on the table (the correct element). For a non-oo example, on this page I have a central loop which moves the icons on the page. In your case, you have a step loop in the stage which asks each actor to take a step. The actors themselves will update their appearance in the table.
    
4. The Game loop: We will use the event driven paradigm for the game loop. To do this, you should set a Javascript timer (=interval) which will repeatedly fire. Each time it fires, it will ask the stage to take a step, which in turn asks all of the actors on the stage to take a step. Remember, in your case, each of the actors can contact the table through the stage and update the appropriate images. For example:
   • (see JavaScript Timing Events)
   Note that in your case, there is a single thread managing the game.
5. I have included a Legend, and I use the Legend images for their source in the Stage.
6. Don't use Inheritance! This will cause you trouble, you will need to simulate it. Instead, just copy methods and instance variables to subclasses, or use containment to simulate Inheritance. So for example, simulate 'a SmartMonster is a Monster' by allowing a SmartMonster to contain a Monster and then delegate some of the SmartMonster functions to the Monster instance. There are other ways to deal with inheritance in Javascript.
7. Debugging Javascript: This is very difficult. You may want to use the developer console or install firebug inside Firefox. This may already be there in the lab. Also, take small steps. Make sure something works and then add to it. Check the Firefox error console for errors. Remember, this time code is executing on the browser, even though it is loaded from the server.

References

• Javascript Inheritance References (to understand what the issue is)
  • Javascript Inheritance
  • Javascript Inheritance
  • klass and selfish.js try to solve the inheritance problem.

Questions and Answers

Question:

How can I debug my code?

Answer:

Use Firebug or the developer tools in Firefox. Use the debug console. Note that you can include debug code such as console.log("this is a log message") as well.

Question:

When I double click on the arrows, on a tablet, the browser thinks I want to zoom!

Answer:

Prevent the event from propogating and handling its default. Try some of the following in your handler... event.preventDefault(); event.stopImmediatePropagation(); event.stopPropagation();

Question:

Where is the supplied code?

Answer:

here

Question:

HELP! There are so many things to know before getting started on this!

Answer:

Yes there are, here is a starter list... There are many points that will get you stuck on this assignment. Please let me know of any issues ASAP, I will post solutions to the Q&A for the assignment. To get you started... 0) This assignment has more introductory material in more areas than I have ever given so early in the term. I still believe that you will all, very quickly come up to speed and do an excellent job on this. Just to let you know, some already have much of this figured out. 1) There is starter code, see the Q&A 2) You can not use JQuery, the Canvas, CSS, Ajax, etc. Just what we have discussed so far in class. This is about a bunch of basics. PHP HTML5 (keep it simple) Javascript 3) Permissions on directories and files are important. The principle: We are running suphp. This means that, a) normal web content is accessed by the apache server process run as user apache (on cslinux) b) php scripts are run as you I should not have to say anything more, but just in case... user file type permissions apache plain 644 apache directory 711 UTORID plain 600 UTORID directory 700 Bonus example: .htaccess, if in a directory, needs 644 permissions. apache needs to see this. 4) If you are using the database, run from cslinux.utm.utoronto.ca https://cslinux.utm.utoronto.ca/~UTORID/ww/ The web server on cslinux is connecting to the postgresql database running on cslinux. Misc db things: your database is UTORID your database user is UTORID your database password is the last 5 digits of your T-card barcode ssh -Y UTORID@cslinux.utm.utoronto.ca psql 5) Debugging PHP is hard. Take small steps and make sure they work. on cslinux ... grep -e UTORID /var/log/httpd/ssl_error_log | tail -n 10 change this as appropriate to narrow down your search for errors your script threw into the log. 6) I have spoken with campus police. They say, no problem, you all should have access to DH 24/7. You may have to speak directly with the guard. Please make use of the building to ensure that we can justify them hiring the guard. Also, if there are any problems, be polite, but let us know asap. Most likely it is a miscommunication. 7) Debugging Javascript is difficult. Use Firefox and the developer console. Take small steps and verify that they work. 8) You do not have to use my MVC framework for the php side of the application. Alternatives include collection of individual php scripts which include common library code at the top as well as using the php header function to redirect (Location:) the browser to the next page. I encourage you to explore and see why the page at a time web development is difficult. 9) We will not be marking security in depth for this assignment. My guess is that your application is vulnerable to SQL Injection, XSS, session fixation, cross site request forgery, malicious user forging high scores etc... The simple fix for many things is whitelist (know your inputs and reject things that do not look good). We will mark security to this extent. Whitelist = check for good input, reject the rest.

Question:

I need a partner!

Answer:

I sent out an email with a link to a shared Google Doc. Take a look at that.

Question:

setInterval(stage.step, 100); or someother thing related to this does not work.

Answer:

See, for example Understand JavaScript’s “this” With Clarity, and Master It, specifically point 1, Fix this when used in a method passed as a callback. Alternatively, create a global function... function step(){ stage.step(); } and use this in setInterval. Another alternative is below, cleaner, with an anonymous function. setInterval(function(){ stage.step(); }, 100); Bonus reading JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals. But I don't expect you to read all of these articles. Just letting you know that there is lots to this! Unfortunately!

Question:

Still having trouble with postgresql and php!

Answer:

OK, look at this and postgresql.zip, expecially examples.php, where I demo inserting as well as running through query results.