To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

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();
}

 

posted on 2013-07-17 18:08  Ijavascript  阅读(323)  评论(0)  编辑  收藏  举报