HTML and CSS Reference
In-Depth Information
our interval at 30 FPS, we first need to divide 1,000 by 30. The result is the number of
milliseconds in each interval:
const FRAME_RATE = 30;
var intervalTime = 1000/FRAME_RATE;
setInterval(drawScreen, intervalTime );
By calling the drawScreen() function repeatedly on each interval, we can simulate
animation.
Sometimes we will refer to each of the frame intervals as a frame tick .
The Player Ship State Changes
We simply need to switch between the static and thrust states to simulate the animation.
Let's take a look at the full HTML file to do this. In Example 8-4 , we will start to place
canvasApp class-level variables in a new section just above the drawScreen() function.
This will be the location going forward for all variables needing a global scope inside
the canvasApp() object.
Example 8-4. The player ship state changes for thrust animation
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH8EX4: Ship Animation Loop</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp(){
var theCanvas = document.getElementById("canvas");
if (!theCanvas || !theCanvas.getContext) {
return;
}
var context = theCanvas.getContext("2d");
if (!context) {
return;
}
//canvasApp level variables
var shipState = 0; //0 = static, 1 = thrust
Search WWH ::




Custom Search