7.1.1_物体的下落

最新推荐文章于 2020-12-11 11:48:04 发布

信封中的阳光

最新推荐文章于 2020-12-11 11:48:04 发布

阅读量524

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/72963211

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
1
评论
7.1.1_物体的下落

7.1.1_物体的下落<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>物体的下落</title> <style> body{ background: #fff; } #c
复制链接

扫一扫

专栏目录