12-玩家飞船的状态变化
8.5.2 玩家飞船的状态变化
仅需要在静止状态和推进状态之间进行简单的切换就可以模拟动画。下面看看实现这个效果的完整的HTML文件。例8-4在drawScreen()函数上面的新代码段中设置了canvasApp类级别的变量。在这个位置可以放置在canvasApp()函数作用域中的全局变量。
例8-4 在推进动画中玩家飞船的状态改变
<!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类级别变量
var shipState=0; //0=static, 1=thrust
function drawScreen(){
//update the shipState
shipState++;
if (shipState >1){
shipState=0;
}
// 绘制背景和文字
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px sans-serif';
context.textBaseline = 'top';
context.fillText ("Player Ship - Thrust", 0, 180);
//绘制飞船
context.strokeStyle = '#ffffff';
context.beginPath();
context.moveTo(10,0);
context.lineTo(19,19);
context.lineTo(10,9);
context.moveTo(9,9);
context.lineTo(0,19);
context.lineTo(9,0);
if (shipState==1){
//绘制推进火焰
context.moveTo(8,13);
context.lineTo(11,13);
context.moveTo(9,14);
context.lineTo(9,18);
context.moveTo(10,14);
context.lineTo(10,18);
}
context.stroke();
context.closePath();
}
var FRAME_RATE=40;
var intervalTime=1000/FRAME_RATE;
gameLoop();
function gameLoop() {
drawScreen();
window.setTimeout(gameLoop, intervalTime);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>当运行例8-4时，可以看到玩家飞船位于画布的左上角，每一帧会切换静止与推进状态。