GameContainer
GameContainer
is responsible for starting up the game once the user taps the screen. It will do this using requestAnimationFrame()
--one of the custom timers implemented in React Native.
requestAnimationFrame()
is similar to setTimeout()
, but the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S); therefore, requestAnimationFrame()
is more suited for animated games as it deals only with frames.
As happens with most animated games, we need to create a loop to animate the sprites in the screen by calculating the next position of each element on each frame. This loop will be created by a function named nextFrame()
inside our GameContainer
:
nextFrame() { if (this.props.gameOver) return; var elapsedTime = new Date() - this.time; this.time = new Date(); this.props.tick(elapsedTime); this.animationFrameId = requestAnimationFrame(this.nextFrame.bind(this)); }
This function will...