Images mysteriously shifting on App Lab screen

1

For the final project in the Creating Apps with Devices course (Prototype an Innovation), I’m trying to help some students make a small Galactica game in the App Lab which uses the Circuit Playground as the joystick (the Game Lab interface does not currently allow enabling the Maker Toolkit). However, I’m having some trouble with the missiles shifting on the screen during the game.

Here’s a link to my code: Galactica Prototype

Here’s a video of what the problem encounter in the app and describe below: Galactica Problem Video

Thus far I’ve successfully made the ‘hero’ move (a pointer finger) with the roll of the Circuit Playground accelerometer, and shoot missiles with the left board button. The code works to shoot the missiles correctly, but when one missile reaches the top of the screen and is removed, the remaining missiles shift to the left by ~10-15px.

I’ve also used console.log() to display the values of the arrays that are tracking the missile X positions, and they don’t seem to change even though the images are shifting on the screen.

Thanks for you help!

2

While i am not able to completely diagnose the issue the timedLoop definitely seems to be the culprit though that’s mainly just speculation so maybe someone can diagnose if my hunch is correct

3

Could you tell me more about your hunch? Maybe I can try something different based on what you’re thinking. Thanks!

4

well since no one else has contributed i went ahead and looked at it further, when launching projectiles while remaining stationary they also offset themselves by the same amount before resorting to the intended position… long story short dumb html render’s there position as relative by default when it really should be fixed or absolute I’m not really an expert when it comes to exact use cases and I didn’t have a board to emulate your issue so i went ahead and built my own functional version of yours

setStyle(missileId, "position: fixed;")

this is all i really changed for it to no longer give me any issues I’ll also link my remix down below though do note that i did remove the tool kit so that way i could debug it
Non Toolkit Version

Best Varrience