6.3_精灵对象的行为

最新推荐文章于 2020-05-19 13:10:33 发布

信封中的阳光

最新推荐文章于 2020-05-19 13:10:33 发布

阅读量455

点赞数

分类专栏： HTML5_CANVAS练习案例

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

版权

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

81 篇文章 1 订阅

订阅专栏

6.3_精灵对象的行为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>精灵对象的行为</title>
        <style>
            body{
                background: #ddd;
            }
            #canvas{
                position: absolute;
                top: 30px;
                left: 10px;
                background: #FFFFFF;
                cursor: crosshair;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            input{
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <input id="animateButton" type="button" value="Animate" />
        <canvas id="canvas" width="462" height="500"></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>
        var SpriteSheetPainter = function(cells){
            this.cells = cells || [];
            this.cellIndex = 0;
        }

        SpriteSheetPainter.prototype = {
            advance:function(){
                if(this.cellIndex == (this.cells.length-1)){
                    this.cellIndex = 0;
                }else{
                    this.cellIndex++;
                }
            },
            paint:function(sprite,context){
                var cell = this.cells[this.cellIndex];
                context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);
            }
        }
    </script>

    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var animateButton = document.getElementById('animateButton');

        var spritesheet = new Image();

        var runnerCells =[
                        {x:0,y:0,w:47,h:64},
                        {x:55,y:0,w:44,h:64},
                        {x:107,y:0,w:39,h:64},
                        {x:150,y:0,w:46,h:64},
                        {x:208,y:0,w:49,h:64},
                        {x:265,y:0,w:46,h:64},
                        {x:320,y:0,w:42,h:64},
                        {x:380,y:0,w:35,h:64},
                        {x:425,y:0,w:35,h:64}
                    ];
        var runInPlace = {
            lastAdvance :0,
            pageFlip_interval:100,
            execute:function(sprite,context,time){

                if(time - this.lastAdvance >this.pageFlip_interval){
                    sprite.painter.advance();
                    this.lastAdvance = time;
                }
            }
        };

        var sprite = new Sprite('runner',new SpriteSheetPainter(runnerCells),[runInPlace]);


        var paused = false;

        //初始化
        spritesheet.src = 'img/running-sprite-sheet.png';

        spritesheet.onload = function(){
            context.drawImage(spritesheet,0,0);
        }

        sprite.left = 200;
        sprite.top = 100;

        context.strokeStyle = 'llightgray';
        context.lineWidth = 0.5;

        drawBackground();

        //事件
        animateButton.onclick = function(){
            if(animateButton.value === 'Animate'){
                startAnimation();
            }else{
                pauseAnimation();
            }
        }

        function startAnimation(){
            animateButton.value = 'Pause';
            paused = false;
            window.requestAnimationFrame(animate);
        }

        function pauseAnimation(){
            animateButton.value = 'Animate';
            paused = true;
        }

        function animate(time){
            //这里的time不能用他传进来的参数
            //time = +new Date();
            if(!paused){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawBackground();
                context.drawImage(spritesheet,0,0);

                sprite.update(context,time);
                sprite.paint(context);
                window.requestAnimationFrame(animate);
            }
        }
        //绘制横隔背景
        function drawBackground(){
            context.save();
            context.shadowColor = undefined;
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 0;

            var step_y = 12;
            var left_margin = step_y*4;
            var top_margin = 64;
            var i = canvas.height;

            context.strokeStyle = 'lightgray';
            context.lineWidth = 0.5;

            while(i>top_margin){
                context.beginPath();
                context.moveTo(0,i);
                context.lineTo(canvas.width,i);
                context.stroke();
                i-=step_y;
            }
            context.restore();
        }
    </script>
</html>

这里写图片描述

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.3_精灵对象的行为

6.3_精灵对象的行为<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精灵对象的行为</title> <style> body{ background: #ddd; }
复制链接

扫一扫

专栏目录