# Game Math **URL:** \ **Category:** Help\ **Created:** [July 27, 2020, 7:26pm UTC](https://forum.makecode.com/t/game-math/2934 "2020-07-27T19:26:29Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [July 27, 2020, 7:26pm UTC](https://forum.makecode.com/t/game-math/2934/1 "2020-07-27T19:26:29Z")
Hi - On some of the more recent Live Advance Arcade streams some Trig functions (sin, cos, tan) have been used. I can follow along, but still do not completely understand when those functions are applicable in games (trying to avoid just memorizing code). I was wondering if anyone know where there are some good resources that goes over this and how it is applied to games. I believe this functions could be beneficial in creating a Field Goal kicking game, where one bar bounces back forth on the x-axis to determine the kicking accuracy and another bounces up and down on the y-axis to determine the power of the kick. This might be a good idea for a live stream 😀 ---
**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\ **Post date:** [July 27, 2020, 7:49pm UTC](https://forum.makecode.com/t/game-math/2934/2 "2020-07-27T19:49:52Z")
It feels like something like in high school or college math. ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [July 28, 2020, 6:16pm UTC](https://forum.makecode.com/t/game-math/2934/3 "2020-07-28T18:16:04Z")
@jwunderl any ideas here? I’m guessing trig doesn’t get covered in the course… ---
**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\ **Post date:** [July 28, 2020, 6:46pm UTC](https://forum.makecode.com/t/game-math/2934/4 "2020-07-28T18:46:54Z")
Yeah, we don’t really go into trig in the course; only thing I see right away is a sin or two in one of the example games at the end ☹ ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 29, 2020, 8:32am UTC](https://forum.makecode.com/t/game-math/2934/5 "2020-07-29T08:32:35Z")
So, I’ll have a go at this. The following assumes knowledge of basic algebra (specifially, solving equations). Trigonometry often comes into play when we are dealing with velocity. Imagine we have a spaceship and an asteroid. Well, let’s not just imagine. Here ya go: ![arcade-Trig](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4fcd6d06370d4aa36c21e63d88f187bffa70c1ff.png) Now, let’s say we want to give the spaceship an appropriate velocity so that it moves toward the asteroid. In this case, we know the coordinates both of the spaceship and of the asteroid, so we can just do some quick subtractions to get an appropriate velocity: ![arcade-screenshot](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/d653802015e8a3234d59cc89d4d07ee874c8fd4a.png) ![arcade-Trig (1)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/a/a762cb5efdec9a0bf6e1aa8b79f9a55b3ea9c8a0.png) Other times, though, we don’t know coordinates. Instead, we have a _velocity vector_: We know the speed that we want the object to move, and we know the direction of the movement, expressed as an angle: ![arcade-Trig-2 (2)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/47a4317acc46aed5f2f9a5a56f83ffd4e060f019.png) In this case, we know we want to move the spaceship at a speed of 50 and an angle of 30 degrees. We don’t have a way to express this in MakeCode Arcade natively, so we need to translate this information into an _x_ velocity and a _y_ velocity. This is where our trigonometry facts come into play. Remember _soh-cah-toa_: _sine_ is _opposite_ over _hypotenuse_, _cosine_ is _adjacent_ over _hypotenuse_, and _tangent_ is _opposite_ over _adjacent_: ```auto opposite sine = ---------- hypotenuse adjacent cosine = ---------- hypotenuse opposite tangent = -------- adjacent ``` For our triangle, _vy_ is opposite (or across from) our angle, _vx_ is adjacent (or connected) to our angle, and the hypotenuse (the long side of the triangle) is 50. To figure out _vx_, we are dealing with the adjacent side and the hypotenuse, so we know we need to use the _cosine_ function. Rearranging the equation a bit, we get _vx_ = 50 \* cosine(30) Similarly, we need _sine_ to figure out _vy_: _vy_ = 50 \* sine(30) Since MakeCode Arcade has access to trig functions, we can let our program do the calculations: ![arcade-screenshot (2)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/1/1bfbdb84db25014bb37c6b1ea2982d0bf67f8cdc.png) ![arcade-Trig-2 (3)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/c/cffd1597ef3eb5c1677f333cced3d8607d73641e.png) Last bit of trickery: Like most programming languages, the functions in MakeCode Arcade do not use degrees to measure angles. Rather, they use _radians_. Quick conversion: 180 degrees = π (pi) radians. You can see that conversion in the code above. Now, _why_ would we ever need this? Here’s one example: ![arcade-Ball-and-Paddle (1)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/3ce565ddceef602a4809fe7459347730f46f26ad.png) Let’s say we have a ball and a paddle at the bottom of the screen controlled by the player. Instead of simply reflecting the ball off of the paddle, we want the player to have some control over how the ball bounces off of the paddle. If the ball hits in the middle of the paddle, then the ball will bounce straight up. The more off-center the hit is, the more sideways we want the ball to bounce. No matter which direction the ball is moving, though, we want it to move at a constant speed. The code could look something like this: ![arcade-screenshot (3)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4af515b38029a3cb617997456f8f3a9bb0bbb79e.png) Feel free to play around with these samples. - [Trig I](https://makecode.com/_acm6dAhbKb2w) - [Trig II](https://makecode.com/_dAaWJmTLLTcX) - [Ball and Paddle](https://makecode.com/_gtHCqtPhKLo0) To learn more about trigonometry, perhaps give Khan Academy a try. > **[Trigonometry with right triangles | Math | Khan Academy](https://www.khanacademy.org/math/trigonometry/trigonometry-right-triangles)** > > Learn the basics of trigonometry: What are sine, cosine, and tangent? How can we use them to solve for unknown sides and angles in right triangles? As always, if you have any questions, feel free to ask! P.S. Yes, I have written an extension that handles some of this math for you. Check the link below for the _Vector Math_ extension. * * * [See all of my MakeCode Arcade games and extensions here!](https://sites.google.com/site/akulcsarsite/makecode/makecode-arcade) ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [July 29, 2020, 4:34pm UTC](https://forum.makecode.com/t/game-math/2934/6 "2020-07-29T16:34:23Z")
@AlexK Thank you for really breaking that down! That does clarifies the use of those functions & I did check out the Khan Academy’s lessons. Let me see if I get this right, looking at the Paddle & Ball overlap code, Delta X is the displacement of the paddle and ball, you are multiplying percentageOffCenter by 90 to make a right triangle, then the bouncleAngleReads iconverts the angle into Radians then once we have that we figure out the vx & vy using the cos & sin. You did 16 - deltaX because it is 16 pixels from the bottom of the ball sprite to the center of the paddle sprite? Then by dividing by 16 you are putting that into a decimal so it can be converted into a percentage? Am I correct with this? Again thank you for taking the time to explain this! ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 29, 2020, 10:01pm UTC](https://forum.makecode.com/t/game-math/2934/7 "2020-07-29T22:01:33Z")
I’d say you are on the right track, @rymc88! One of the things that you get used to when using trig functions is getting the orientation correct. Depending on the application, you may need to do a little bit of magic (e.g. switch _vx_ and _vy_, make one of them negative, add 90 degrees) to get the numbers that you need. When dealing with vectors, it helps to know which angle points in which direction: ![arcade-Trig-Angles](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4c8a2cd8de24a67dc293aad1ec973a5910897bf7.png) Zero degrees points to the right; 90 straight up; 180 to the left; 270 (or -90) straight down. I use these values to help me figure out how to handle the _displacement_ (the amount the ball is off-center of the paddle). If the ball strikes the center of the paddle, I need an angle of 90 degrees. If I treat the displacement as a fraction or percentage, I’ll consider that 100%. If it hits the right side of the paddle, then, I need that to be 0% (or zero degrees). If it hits the left side of the paddle, I need that to be 200% (or 180 degrees). The width of the paddle is 32 pixels, so I know the greatest displacement (I call this `deltaX` in the code; _delta_ often refers to _change_ or _difference_) between the ball and the paddle will be 16 pixels. To get the correct percentages, then, `16 - deltaX` gives me the correct numerator (top of the fraction) when the denominator is 16. Quick tests: - If the ball hits the middle, then `deltaX` is 0. The percentage, then, is `(16 - 0) / 16 = 1` (or 100%). - If the ball hits the right side of the paddle, then `deltaX` is 16. The percentage, then, is `(16 - 16) / 16 = 0`. - If the ball hits the left side of the paddle, then `deltaX` is -16. The percentage, then, is `(16 - -16) / 16 = 2` (or 200%). Also, you might notice that I set _vy_ to `0 - BALL_SPEED * sin(bounceAngleRads)`. That’s because the calculation gives me a positive value, but I need the ball to go up the screen. So, I need to change the sign (i.e. make _vy_ negative). Glad you found both the explanation and the Khan Academy tutorials helpful! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [July 30, 2020, 12:00am UTC](https://forum.makecode.com/t/game-math/2934/8 "2020-07-30T00:00:52Z")
Thank you @AlexK! You are a great teacher! ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 30, 2020, 1:34am UTC](https://forum.makecode.com/t/game-math/2934/9 "2020-07-30T01:34:59Z")
You bet, mate! Always happy to help. You’ve given me an idea for an extra chapter in my book. 😃 ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [July 30, 2020, 3:38am UTC](https://forum.makecode.com/t/game-math/2934/10 "2020-07-30T03:38:41Z")
If the book is about game programming let me know when it comes…I will surely be a customer. So this is the game I have been working on, it is an American Football Field Goal game where there is an angle indicator and a power bar. Right now, the angle indicator is bouncing back and forth between 0 - 180 but I have been trying to only bounce between 0 - 90. I don’t know if adding something to the cos & sin functions would help or using a constraint. Any help and/or feedback would be appreciated! [https://makecode.com/\_3vD3wYWvLX3k](https://makecode.com/_3vD3wYWvLX3k) ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [July 30, 2020, 7:03am UTC](https://forum.makecode.com/t/game-math/2934/11 "2020-07-30T07:03:39Z")
I love this, @rymc88! Even the title is clever! This is another great use of the trigonometric functions: having an object trace an arc or a circle. If you want to restrict the angle indicator, you’re going to need to add a set of constraints similar to what you are doing for `thePowerIndicator`. You’ll want to make your change value a variable instead of using a constant. (I used `angleDelta`.) When the angle indicator exceeds one of the bounds, reset the angle indicator and switch the sign for the amount of change. (_Hint_: 90 degrees = π / 2 radians.) I’ve made the changes to your `on update` routine and included them below. I’ve hidden them behind a spoiler, in case you want to try to make the changes for yourself first. Click on the image to reveal the spoiler. ![arcade-screenshot](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/0/0c7d1d5f08243de1cbd8b7e9d6df571edb96b73a.png) You clearly understand math, so I’ll pose the next question: Do you know which shape you’re going to use for the path of the football when the player kicks it? P.S. Yes, the book is about MakeCode Arcade and game programming. You’ll be among the first to know when I release the preview! Thanks for the interest! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [July 31, 2020, 11:05pm UTC](https://forum.makecode.com/t/game-math/2934/12 "2020-07-31T23:05:12Z")
I believe it is going to be a parabola? Thank you for the solution and setting up a spoiler…I eventually looked cause I was having trouble resetting the currentAccuracyAngle because I didn’t think to use a variable for it. I am excited about the book! Thanks again! ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 1, 2020, 1:59am UTC](https://forum.makecode.com/t/game-math/2934/13 "2020-08-01T01:59:46Z")
While you can directly alter things like a sprite’s _vx_ and _vy_ values, I typically use variables when complex logic or calculations are involved. I find it makes the code a bit neater, even though it’ll be a little longer. Yup, parabola makes the most sense to me, too. 🙂 Three points can be used to define a unique parabola. In your game, one of the points will be the initial position of the ball. The other two points could be determined by the two values of your indicators. Desmos has a nice calculator that walks you through the steps of deriving the formula for a parabola given three points: [https://www.desmos.com/calculator/lac2i0bgum](https://www.desmos.com/calculator/lac2i0bgum) Good luck! As always, if you have questions, just holler! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [August 3, 2020, 1:13am UTC](https://forum.makecode.com/t/game-math/2934/14 "2020-08-03T01:13:01Z")
Thank you for the advice and I am sure I will be reaching out to you sometime in the future with more questions. Cheers! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [November 17, 2020, 4:16pm UTC](https://forum.makecode.com/t/game-math/2934/15 "2020-11-17T16:16:32Z")
Hey @AlexK, ``` How is the book going? Just want to see if it was close to be done! ``` ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [November 19, 2020, 4:12am UTC](https://forum.makecode.com/t/game-math/2934/16 "2020-11-19T04:12:06Z")
Hi, @rymc88 ! I’m about four chapters in. I’ve taken a break from writing for a few weeks while I work on the book’s support web site and the online course. Once I get those up and running, I plan on working on all three projects (book, support site, and online course) in parallel. Still moving along. Happy with the content so far. Looking forward to getting back to writing really soon. Thanks for checking in! I appreciate it! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [November 19, 2020, 10:00pm UTC](https://forum.makecode.com/t/game-math/2934/17 "2020-11-19T22:00:16Z")
It certainly a good time to stay busy, and I am glad to hear you are also creating online content too! As always, let me know when you have things to check out. Cheers!