7.1.1_物体的下落

来源：互联网发布：saas软件是什么编辑：程序博客网时间：2024/05/01 21:14
7.1.1_物体的下落

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>物体的下落</title>        <style>            body{                background: #fff;            }            #canvas{                background: #eee;            }            #controls{                position: absolute;                left: 25px;                top: 25px;            }        </style>    </head>    <body>        <div id="controls">            <input id="clickBtn" type="button" value="start" />        </div>        <canvas id="canvas" width="500" height="600"></canvas>    </body>    <!-- 精灵对象 -->    <script>        var Sprite = function(name,painter,behaviors){            if(name !== undefined){ this.name = name; }            if(painter !== undefined){ this.painter = painter; }            this.top = 0;            this.left = 0;            this.width = 10;            this.height = 10;            this.velocityX = 0;            this.velocityY = 0;            this.visible = true;            this.animating = false;            this.behaviors = behaviors || [];        }        Sprite.prototype = {            paint:function(context){                if(this.painter !== undefined && this.visible){                    this.painter.paint(this,context);                }            },            update:function(context,time){                for(var i=0;i<this.behaviors.length;i++){                    this.behaviors[i].execute(this,context,time);                }            }        }    </script>    <!-- 动画计时器 -->    <script>        StopWatch = function(){};        StopWatch.prototype = {            startTime: 0,            running: false,            elapsed: undefined, //过去的时间            start:function(){                this.startTime = +new Date();                this.elapsed = undefined;                this.running = true;            },            stop:function(){                this.elapsed = (+new Date()) - this.startTime;                this.running = false;            },            getElapsedTime:function(){                if(this.running){                    return (+new Date()) - this.startTime;                }else{                    return this.elapsed;                }            },            isRunning:function(){                return this.running;            },            reset:function(){                this.elapsed = 0;            }        }        AnimationTimer = function(duration){            this.duration = duration;        }        AnimationTimer.prototype ={            duration:undefined,            stopwatch:new StopWatch(),            start:function(){                this.stopwatch.start();            },            stop:function(){                this.stopwatch.stop();            },            getElapsedTime:function(){                var elapsedTime = this.stopwatch.getElapsedTime();//              if(!this.stopwatch.running){//                  return undefined;//              }else{                    return elapsedTime;//              }            },            isRunning:function(){                return this.stopwatch.isRunning();            },            isOver:function(){                return this.stopwatch.getElapsedTime()>this.duration;            }        }    </script>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        var clickBtn = document.getElementById('clickBtn');        var ledge_top = 100;        var gravity_force = 9.81; //重力系数        var platform_height_in_meters = 8; //假设从平台到canvas底部有10米的距离        var pixelsPerMeter = (canvas.height - ledge_top)/platform_height_in_meters; //每米所代表的像素数        var lastTime = 0;        var moveBall = {            execute:function(sprite,context,time){                if(fallingAnimationTimer.isRunning()){ //如果小球正在下落                    sprite.top +=sprite.velocityY*(time -lastTime)/1000;                    lastTime = time;                    sprite.velocityY = gravity_force*(fallingAnimationTimer.getElapsedTime()/1000)*pixelsPerMeter;                    console.log(sprite.velocityY);                    if(sprite.top>canvas.height){                        stopFalling();                    }                }            }        };        var fallingAnimationTimer = new AnimationTimer();        var ball = new Sprite('ball',                    {paint:function(sprite,context){                        var radius = sprite.width/2;                        var x = sprite.left +radius;                        var y = sprite.top +radius;                        var width = sprite.width;                        var height = sprite.height;                        context.save();                        context.beginPath();                        context.arc(x,y,radius,0,Math.PI*2,false);                        context.fillStyle ='rgb(218,165,32)';                        context.fill();                        context.restore();                    }},                    [moveBall]);        //初始化        ball.left = 300;        ball.top = 50;        ball.width = 50;        ball.height = 50;        //drawPlate();        ball.paint(context);        //事件        clickBtn.onclick = function(){            startFalling();        }        function startFalling(){            clickBtn.disabled = true;            fallingAnimationTimer.start();            window.requestAnimationFrame(animate);        };        function stopFalling(){            clickBtn.disabled = false;            fallingAnimationTimer.stop();            ball.left = 300;            ball.top = 50;            ball.velocityY =0;            context.clearRect(0,0,canvas.width,canvas.height);            ball.paint(context);            window.cancelAnimationFrame(animate);        };        function animate(time){            context.clearRect(0,0,canvas.width,canvas.height);            ball.update(context,time);            ball.paint(context);            window.requestAnimationFrame(animate);        }        //绘制平台        function drawPlate(){            context.save();            context.beginPath();            context.fillStyle = 'darkslategray';            context.fillRect(325,100,100,15);            context.restore();        };    </script></html>
阅读全文
0 0