您的位置：首页 > 其它

笔记二十一（综合运用——飞船）

2015-12-07 20:21 399 查看

基本动画知识总结综合运用。

首先创建一个飞船构造函数。

文件名：ship.js。

function Ship(){
this.x = 0;
this.y = 0;
this.width = 25;
this.height = 20;
this.rotation = 0;
this.showFlame = false;
}
Ship.prototype.draw = function(context){
context.save();
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = "#fff";
context.beginPath();
context.moveTo(10,0);
context.lineTo(-5,10);
context.lineTo(20,5);
context.lineTo(30,5);
context.lineTo(35,0);
context.lineTo(30,-5);
context.lineTo(20,-5);
context.lineTo(-5,-10);
context.lineTo(10,0);
context.stroke();
if (this.showFlame) {
context.beginPath();
context.moveTo(-7.5,-5);
context.lineTo(-15,-5);
context.lineTo(-10,-2);
context.lineTo(-15,0);
context.lineTo(-10,2);
context.lineTo(-15,5);
context.lineTo(-7.5,5);
context.fillStyle = "#ff0";
context.fill();
context.stroke();
};
context.restore();
}

创建飞船飞行程序。

文件名：ship.html。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞船</title>
<style type="text/css">
#canvas{background-color: #000}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ship.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
ship = new Ship(),
vr = 0,
vx = 0,
vy = 0,
thrust = 0;
ship.x = canvas.width/2;
ship.y = canvas.height/2;
window.addEventListener("keydown",function(event){
switch(event.keyCode){
case 37: //left
vr = -3;
break;
case 39: //right
vr = 3;
break;
case 38: //up
thrust = 0.05;
ship.showFlame = true;
break;
}
},false);
window.addEventListener("keyup",function(event){
vr = 0;
thrust = 0;
ship.showFlame = false;
},false);
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ship.rotation += vr * Math.PI/180;
var angle = ship.rotation,
ax = Math.cos(angle)*thrust,
ay = Math.sin(angle)*thrust;
vx += ax;
vy += ay;
ship.x += vx;
ship.y += vy;
ship.draw(context);
}());
}
</script>
</body>
</html>

效果图：

参见《HTML5+Javascript动画基础》。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航