Character movements still not smooth

[hanizahra]

What you are trying to do:

I'm trying to get my character to move throughout the maze smoothly with keyboard commands.

Detailed description of the bug or error

Right now there is a delay for every redraw of the board.

Technologies being used/attempted

JavaScript -setInterval()

Documentation you have looked at:

I've looked at Master's codepen:
https://codepen.io/anon/pen/bLpKWO
I've also looked at these links among many others:
https://www.sitepoint.com/quick-tip-game-loop-in-javascript/ http://jsfiddle.net/ktHdD/1/ https://johnresig.com/blog/how-javascript-timers-work/

Steps you have taken to solve the problem

I've tried using the setInterval and it seems to redraw consecutively (I can tell by the way the gif is loading on the page - when it's not redrawing, the gif opens and closes mouth freely and smoothly - when it redraws, it's broken up) but it's very very slow.

@jsm13 @johnrbell

[jsm13]

Any time a new image tag is created, the style is reapplied and the gif will start over. Easiest solution I think would be to keep one ms-pacman div that doesn't re-render but it has display: relative and it's top and bottom style are adjusted whenever the piece moves.

[jsm13]

Looking at it a bit more. I think a lot of the game board is being redrawn unnecessarily. I think it might be easier to draw once at the beginning and then each move you just need move the pacman character and if there is food in that space, remove it. That way instead of redrawing a 868 squares, only two squares get updated.

[jsm13]

That codepen updated to include a gif