• html5 飞船动画


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Follow Mouse</title>
        <script type="text/javascript" src="utils.js"></script>
        <script type="text/javascript" src="ball.js"></script>
        <style type="text/css">
            body{background-color: silver;}
            #canvas{background-color: black;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="400" height="400"></canvas>
        <textarea name="" id="log" cols="30" rows="10"></textarea>
        <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:
                            vr=-3;
                            break;
                        case 39:
                            vr=3;
                            break;
                        case 38:
                            thrust=0.05;
                            ship.showFlame=true;
                            break;
                    }
                }, false)
                window.addEventListener("keyup", function(){
                    vr=0;
                    thrust=0;
                    ship.showFrame=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,
                        left=0,
                        right=canvas.width,
                        top=0,
                        bottom=canvas.height;
                    vx+=ax;
                    vy+=ay;
                    ship.x+=vx;
                    ship.y+=vy;
    
                    if (ship.x-ship.width/2>right) {
                        ship.x=ship.width/2;
                    }else if(ship.x+ship.width/2<left){
                        ship.x=right+ship.width/2;
                    }
                    if (ship.y-ship.height/2>bottom) {
                        ship.y=top-ship.height/2;
                    }else if(ship.y<top-ship.height/2){
                        ship.y=bottom+ship.height/2;
                    }
                    ship.draw(context);
                }())
            }
        </script>
    </body>
    </html>
    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="white";
        context.beginPath();
        context.moveTo(10,0);
        context.lineTo(-10,10);
        context.lineTo(-5,0);
        context.lineTo(-10,-10);
        context.lineTo(-5,0);
        context.lineTo(-10,-10);
        context.lineTo(10,0);
        context.stroke();
        if(this.showFlame){
            context.beginPath();
            context.moveTo(-7.5,-5);
            context.lineTo(-15,0);
            context.lineTo(-7.5,5);
            context.stroke();
        }
        context.restore();
    }
  • 相关阅读:
    python应用之文件属性浏览
    python进阶之路之文件处理
    magento安装时的数据库访问错误
    magento麦进斗客户地址属性不保存在sales_flat_order_address
    自动填写麦进斗Magento进货地址字段
    麦进斗magentoRequireJs回调失败
    如何在麦进斗magento2中调用站外的JS?
    在magento1.9结账地址中删除验证
    麦进斗:在windows系统里面刷新magento2的缓存
    如何安装麦进斗Magento2
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/html5_animation_ship.html
Copyright © 2020-2023  润新知