Recently I learned JavaScript and while I was two weeks into the learning of JS, I wrote a game. Though it was a paired project so technically Taylor Moore and I wrote the game. It came out really dope and I'm super proud of it. If you feel so inclined, you can play it here. The inspiration for this game was from an old computer game that I used to play as a kid called Gorillaz (it was really called Gorillas but I added the z for dramatic effect). Gorillas was a really fun game and it really simple. There are two gorillas on top of towers, you select the angle and velocity, then shoot an explosive banana. The first person to hit the other gorilla wins. And you can play that here. Now on the surface it seems like a really simple game, but there is a lot of complex math going on behind the scenes. Let me show you some of them maths.
So this math right here took us a while to figure out. What we are essentially doing is drawing and imaginary circle around the center point of the cannon base. And then we are continuously drawing a line from the center point of the cannon base to the end of the circle. The moveUp and moveDown prototype functions are allowing us to move the point of the circle we are directed to by pressing up or down on the keyboard. This was actually quite difficult to pull off for us, as it involved a lot of trigonometry that neither of us have used since high school. It was a lot of trial and error until we got it just right. We then tried for many many hours to get an image of a cannon barrel to overlay on top of our line, but we could never figure that out. I'm sure there's a way to do it but we were fine with just making a thick black line with rounded edges be our cannon barrel.
This math was pretty tricky to figure out as well. We knew we had to somehow simulate gravity and that would have to change depending on the velocity and angle of the cannon ball (we referred to it as projectile in our code). We found some basic trajectory formulas online and were able to adapt it for our code. If you played our fabulous game you know that there is a power bar on the left side of the screen that continuously goes up and down and depending on where the power bar is when you hit the space bar, that is your power setting. We are setting that result output as our g variable, which sorta symbolizes gravity. The lower the g value is, the lower the "gravity" will be which allows the ball to go way faster. This might not be the most correct way to explain this but it was the best way for me to understand it. We calling on the protoype functions setPostion and movement continuously until either the ball leaves the screen or it hits a target. So while we are calling on these continuously we are increasing the the y coordinate which makes it go down. The Canvas that we are using is actually inverted so the higher the y coordinate the lower it is on the screen.
Projectile.prototype.movement = function() { this.x += this.xVel / 3; this.y += this.yVel / 3; this.yVel+=this.g; };
This chunk of code took us awhile to figure out. For a while we were just setting this.x += this.xVel / this.y += this.yVel and this was causing the ball skip around. The trajectory would be the same but the ball would miss targets and towers. This was because we were updating the x and y coordinates with too much of a space between each interval. Dividing by 3 on both of these lines was a major breaking point for us. It made the ball fly smoothly! The only thing left we had to worry about was collision detection..
The collision detection math wasn't really too hard. In fact there's not much math involved. It's simple geometry and we're just using the x and y coordinates of the ball, targets, and towers. We are essential making a box with each object and checking to see if any part of a box is touching another box. We wrote it another way originally and it would only work sometimes. Our main problem is we didn't have the conditionals properly labeled and completely forgot to cover one side of our targets. But when we sat down and really thought it through, it wasn't that hard to figure out.
It's like I always say, "maths make the world go 'round." If you thinking about or starting to learn JavaScript, I think a great way to learn is to make a game. Doesn't have to be an original idea, but the code does. And if you make a game that involved Physics at all, then there is going to be a good amount of math involved. Good luck out there!