Question

For the past year or so I’ve been familiarizing myself with Javascript, and in an attempt to really learn the language thoroughly I decided to make an HTML5 game! The problem i’ve run into is that I have absolutely no idea how to move an image across the screen smoothly, and at an angle. I could move it at a forty five degree angle by moving it one pixel up/down the x axis and one pixel up/down the y axis, but that’s just not specific enough. How would I go about moving it at a very specific angle? It seems to me that there would have to be a function that rounds it to the nearest pixel?

Not exactly sure… Any solution is will work fine, although a non-library specific explanation would be preferred!

Thanks!

Answer 1

What you want to look at is a javascript implementation of Linear Interpolation (or lerp). Another name is motion tween but I believe that is more of an animation term than game development.

The idea is that you have two coordinates, the start, and the end, and a time that for the animation to occur, and you use linear interpolation to animate between the two.

From the Stack Question linked, this article explains a browser implementation that will allow you to do interpolation.