Homework 2 - Pokemon Map Builder

Accept this assignment on GitHub Classroom

For your second HW, you will be making a Pokemon Map Builder. This will involve utilizing event listeners to lay out sprites as well as move a Pikachu avatar around the map. The goal is to get you familiar with the basics of JavaScript and DOM manipulation. This assignment will be broken down into 2 parts: placing sprites, and moving the character.

Before starting this assignment

Review Lecture 2 - you may also find any of the other resources on the lectures page helpful.

Also unlike other classes, we highly encourage the use of Google to search things up as long as you understand the materials you are reading. The ability to search things and understand others' work is so important in industry and especially with web development and JS. This is a skill that we wish you can master in this class as well!!

Getting Started

• Getting started guide
• Style guide

To run this project, all you have to do is open the index.html file in your preferred browser.

However, you shouldn't expect it to do anything since you haven't completed it yet! Thus comes our next part:

Completing the Homework

Now comes the actual challenge! Again, the homework files themselves contain instructions on how to complete the different parts, so just refer to them and they should explain the assignment pretty well. If you need clarification, you can ask on EdStem!

The only files you will need to modify are map-builder.js and player.js. You can ignore the other files, but feel free to check index.html to see how it works!

Here's a rundown of the functionality you'll have to implement:

• You will first lay out a grid of tiles on the map. This will involve using for loops to create a bunch of divs and appending them to the map.

• You will then add event listeners to the tiles to implement the following behavior:

  • When your mouse enters a tile, it should change the tile to the selected swatch.
  • When your mouse leaves a tile, it should change the tile back to the previous swatch.
  • When you click a tile, it should change the tile to the selected swatch and not change back on mouse leave.

Then for the player movement bit:

• Pikachu should be able to move using the arrow keys, onto any terrain tile.
• Pikachu should also turn to face the direction you move him.
  • Even if he cannot move, he will still turn to face the movement direction.

In general, these are the concepts that we're aiming to practice using this homework, so if you ever feel like there's just too much to look for out there concerning syntax or you feel as if there's just too many ways to do something, just refer back to this list to get an idea of what we're looking for:

• creating divs and appending them to the DOM using javascript (look into createElement and appendChild)
• adding event listeners
• adding and removing classes
• modifying style using JavaScript

Additionally, things can definitely seem scary and overwhelming in the beginning, but don't worry! It just takes time, and learning doesn't happen in one day, so remember to stay persistent!

Submitting the Homework

Simply push to main and we'll see your submission on GitHub Classroom. Note, you have infinite submissions.