Save My Cheese (Part 1)

Hello, I hope you have been well. With the guidance of my mentor, I've been working on a game called Save My Cheese, and I'm going to try to briefly write about the process, which will be divided into multiple steps. Each step will have an aim, and I'm going to write about the approach I took and the questions I had

Save My Cheese is a game where you try to protect a piece of cheese from a group of mice by placing puzzle pieces in their path. 

For this project, I will need to learn some HTML and JavaScript. Up until now, I have been focusing on Java, and I have no experience with JavaScript, but at least the syntax is similar. This is also the first time I deal with graphics.

Step 1

Aim: Draw a polygon on an HTML canvas grid, and move it with the mouse.

I was provided with the following link to have an idea of where to start. I first started with the basics of  HTML, and then moved on to the JavaScript part. I searched up every line of code I didn't understand, and I even had to refer back to the explanations multiple times during the first two weeks to better understand some details. Not understanding most of it was irritating, but after dividing the code into parts and giving it some time, it started making sense.

Question: I don't want to code on Notepad, where should I code?

Solution: I followed this video and started coding on Visual Studio Code, I was also able to view my work on google chrome.

After setting up VS Code, I rewrote every part of the code and started messing around with it, whenever I had an idea or a question, I would try to implement it. In the end, I ended up not changing much of the original code.

Some important links I used: getBoundingClientRect() - Mouse Position - addEventListener()

Step 2

Aim: Find out which grid rectangles are underneath the polygon and draw them in a different color.

The first thing that came to my mind was "To color specific cells, shouldn't we be able to pick specific cells. And to do that, shouldn't the cells be drawn individually rather than just drawing lines?" so I rewrote the function responsible for drawing a grid (This was later changed back because it was unnecessary). I then tried drawing cells in different colors but was stuck, and the following question came up: 

Question: Why can't I color different lines with different colors?

Answer: I found the answer here.

Next, I just added a double loop that gets the coordinates of the intersections on the grid and adds them to an array.

I tried to write a function that draws blue cells under a polygon but got nowhere, I was stuck. My mentor then provided me with this link, and I ended up reaching this page which, through Figure 1,  made me understand the logic of how to determine whether a point is inside a polygon or not. I didn't understand the function in the first link, so I decided to try to write one myself. 

After a while, I ended up writing a function that draws blue cells under rectangles, but I needed to update it so it would work for other shapes as well. I wrote a function that extends a line to the right to check how many times a point intersects a vertex's x coordinate and determines whether the point is inside accordingly, but turns out it doesn't work for all polygons. On my last attempt, I tried counting the times the same line intersects black pixels using the getImageData function, but my code started to become laggy. In the end, I decided to just go with the code in the first link, and it worked nicely.