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

最新推荐文章于 2025-04-09 14:15:04 发布

草木黄尘

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量310

点赞数

分类专栏：前端动画基础学习笔记

本文链接：https://blog.youkuaiyun.com/qq_24849765/article/details/50210505

版权

前端动画基础学习笔记专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用HTML5和JavaScript实现一个简单的飞船动画。通过创建飞船构造函数并定义其属性，结合键盘事件来控制飞船的方向和速度。此外，还实现了火焰效果以模拟飞船推进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本动画知识总结综合运用。
首先创建一个飞船构造函数。
文件名：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>