HTML and CSS Reference
In-Depth Information
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()
ob-
ject.
Example 8-4. The player ship state changes for thrust animation
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH8EX4: Ship Animation Loop
</title>
</title>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasApp
(){
var
var
theCanvas
=
document
.
getElementById
(
"canvas"
);
iif
(
!
theCanvas
|| !
theCanvas
.
getContext
) {
return
return
;
}
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
iif
(
!
context
) {
return
return
;
}
//canvasApp level variables
var
var
shipState
=
0
;
//0 = static, 1 = thrust
function
function
drawScreen
() {
//update the shipState
shipState
++
;
iif
(
shipState
>
1
) {
shipState
=
0
;
}
