Step 8 - Create background pieces of game

Step 8: Create background pieces of the game

• Test buttons against actions that should occur (doing text responses rather than the animations) - learn whatever functions are needed to get this to occur (I’m sure Arrays are involved.
• Learn about displaying things on Canvas for HTML

Score: 10

Evaluation & Deliverables:

This week, I made all the graphics necessary for the game, and I plugged them into the functions I made previously. Everything is in the right place and working as it should. Sometimes there is a lag in uploading the images, so you see parts popping up at random times as the page loads. I'm wondering if I did a JQuery fade in and fade out if that would cover up the graphics rendering lag? Or is there a function I can do that doesn't display any of the graphics until all the parts are ready?

Anyways, I abandoned the HTML Canvas approach to displaying the game. What I have now with HTML, CSS, and JavaScript seems to be working out alright.

I have several layers of graphics. This allows for the hero to move behind some pieces but in front of others. For example, there is a door that the hero sometimes has to go through. I wanted it to look like he was passing through the door, with some of the graphics in front and some behind. I tested it out by moving the hero around the screen and it seems to work well. Anyways, I have a list of all the images needed for the game in HTML (but I set them to a blank, transparent page; Javascript will change the blank pieces to other images as needed). In CSS, I have each image set to taking an absolute position so that they can be stacked on top of each other. I also assigned them z-scores so I can specify what should be above the hero and what should be below.

Next week I'll be working on getting the animations to come together. Just about done!