DOM Scripting

DOM Scripting

Overview

In this assignment, you will complete a small browser-based adventure game.

Instructions

Warmup

1. Copy the adventure folder to your computer. Look at the source code for adventure.html. Then, open it in a browser. You should be able to navigate around the adventure world by entering commands like ‘n’, ‘e’, ‘s’, ‘w’.
2. Using your browser’s Developer Tools, set a breakpoint in the JavaScript and step through the code, examining values.

Part 1 (35 points)

Make the following enhancements without using any JavaScript libraries.

1. (15 points) Add code to the enterRoom( ) function to do the following:
   • Display the appropriate image
   • Display the exits
   • Display the items present in the room
   • Display the items carried by the user

The result should look like this:

2. (10 points) Implement the take and drop functionality.
3. (10 points) Hyperlink the exits, so the user can click on them to navigate, instead of having to enter a command. Hyperlink the items carried and items present, so the user can click on them to take and drop items.

Part 2 (15 points)

Make a copy of Adventure.html named AventureJQ.html. Add a reference to the jQuery library hosted on a CDN. In this version, you will rework the code using JQuery as follows:

1. (5 points) Remove any explicit event handlers from the body of the HTML. Replace them with jQuery-style registrations done in the init() function. Don’t forget to register the init() function itself with the jQuery $( document ).ready( ) handler.
2. (5 points) Replace any uses of document.getElementById( ) with $( ) calls. When possible, invoke jQuery methods on the result, rather than directly manipulating the DOM object.
3. (5 points) Use the jQuery fade in / fade out functions to move from room to room.

The post DOM Scripting appeared first on My Assignment Online.

Expert Help With This Assignment — On Your Terms