Day 3 and I've hit my first big struggle! Turns out math is hard, or I'm just using it wrong. It's probably me just using it wrong. I don't know the equation to calculate your movement on a grid based on your current rotation, so I'm trying to make one up. I know all numbers I have to play with and what answer I'm looking for, it's just trying to manuplulate those numbers to produce that answer is where I'm having the issue.
So today my commit is first my updated log file and the actual code I wrote.
Here is a list of what I accomplished:
- I got gulp live reloaded working on js & css changes instead of just html changes. Pretty simple.
- I made it so you can rotate your square (ship) both left and right.
- Where I've gotten stuck is calculating how your ship moves when you press up and down based on rotation. I'm trying to take your rotation divided by either 360 or 180 (I keep swithing back and forth trying to see which one is more accurate) then with that calculate your moves on the x/y grid. So far it's a total failure.
- I also just noticed I somehow broke the words from showing up... YAY
The figuring out how to properly rotate things did take me awhile, and a couple different Stack Overflow posts and reading MDN's post on CanvasRenderingContext2D.rotate(). While trying to do that I did break things in fun ways
This is the time I made the entire screen glitch out badly: 
Then the other time where I got sort of better but created a weird snaking trail. 
I ended up having to make an entirely new drawShip() instead of using my existing drawRect() as it turns out if you want to rotate things it requires a lot more things to calculate and I didn't want to update my background to cancel out all the rotating I was doing.
let drawShip = (rectangle, rotation = 0) => {
ctx.save();
ctx.beginPath();
ctx.translate((rectangle.x + rectangle.width / 2), (rectangle.y + rectangle.height / 2)); // this is supposed to rotate it around the center point
ctx.rotate(rotation * Math.PI / 180); // this is used to rotate the object
ctx.rect(-rectangle.width/2, -rectangle.height/2, rectangle.width, rectangle.height);
ctx.fillStyle = rectangle.color;
ctx.fill();
ctx.restore();
};
So the new things are setting a ctx.translate() which is changing where the center point that we're rotating around is, this is so the ship will rotate off it's center instead of a corner which would look goofy to the user. Then a simple ctx.rotate() which is just telling it the rotation. Looking at that now I might need Math.PI to help with my path I'm stuck on. The rest of that code is similar to what we had before instead before and after we now are .save() and .restore(), not 100% sure but I believe that is to keep you from rotating the entire context of the app and only this single element.
Here is my code in CodePen as it currently stands, you can use the arrow keys to play with it, it's fairly broken.
See the Pen 100 Days of Code day 3 by Josh Fabean (@fabean) on CodePen.
:wq