= =用createJS写个flyppyPeople

最新推荐文章于 2022-04-13 16:42:56 发布

dfpbut5000

最新推荐文章于 2022-04-13 16:42:56 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/axes/p/3600751.html

版权

　　声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！

　　最近flyppybird很流行啊，今天中午闲着没事干，就用现有的素材写了个flyppyPeople，因为角色是个人，所以就叫People啦，哈哈

　　上链接：http://whxaxes.github.io/canvas-test/src/Game-demo/FlppyPeople/index.html。。。。。。。

　　最近在看createJs，所以就用了createJs来写啦。

　　起跳落下用了简单的自由落体运动公式。动画是通过createJS的精灵表绘制器实现的，话说用框架就是舒服啊，都给你封装好了，哪像楼主写的上一篇博文里的打飞机游戏，精灵表绘制器之类的还得自己手动写。。。。造轮子虽然好玩，不过如果赶时间还是尽量用别人的轮子吧。

　　= =游戏原理很简单。如果园友无聊。。。就可以玩玩

　　游戏有个我故意留的bug，因为楼主玩flyppybird的时候最高只有十分，所以留了那个bug，为了分高一点。。。。仅此而已 = =绝对不是因为楼主懒。。。 = =有人说有bug不好玩，于是还是修复了。。。

代码直接贴啦（因为是随便写来玩的，很多东西可能没考虑完全，性能之类的，将就下吧）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*#cas{margin:auto;display: block;}*/
        .view{width: 700px;height: 500px;margin:auto;position: relative;}
        #onceAgain{width: 152px;text-align: center;border:1px solid;background-color: #FFF;position: absolute;left: 270px;top: 190px;display: none;cursor: pointer;padding:20px 0 20px 0;}
        #points{position: absolute;left: 20px;top: 20px;font-size: 20px;color: #FFF;}
    </style>
    <title>FlyppyPeople</title>
    <script src="easeljs-0.7.1.min.js"></script>
    <script src="preloadjs-0.4.1.min.js"></script>
    <script src="person.js"></script>
    <script src="stone.js"></script>
</head>
<body>
    <div class="view">
        <canvas id="cas" width="700" height="500">您的浏览器不支持canvas</canvas>
        <div id="onceAgain"></div>
        <div id="points">得分：0</div>
        <div style="position: absolute;bottom:-30px;">按空格进行起跳</div>
    </div>
    <div id="showFPS"></div>
    <script>
        var fps = document.getElementById("showFPS")
        var stage , w , h , loader;
        var man , ground , sky , high;
        var stones = [] , again = document.getElementById("onceAgain") , pt = document.getElementById("points");

        function init(){
            stage = new createjs.Stage("cas");
            w = stage.canvas.width;
            h = stage.canvas.height;

            var manifest = [
                {src:"image/man.png" , id:"man"},
                {src:"image/ground.png" , id:"ground"},
                {src:"image/bg.png" , id:"bg"},
            ]

            loader = new createjs.LoadQueue(false);
            loader.addEventListener("complete" , handleComplete);
            loader.loadManifest(manifest);
        }


        function handleComplete(){
            var manImage = loader.getResult("man");
            var groundImage = loader.getResult("ground");
            var bgImage = loader.getResult("bg")
            ground = new createjs.Shape();
            sky = new createjs.Shape();
            sky.graphics.bf(bgImage).drawRect(0,0,w,h);

            ground.graphics.beginBitmapFill(groundImage).drawRect(0, 0, w+groundImage.width, groundImage.height);
            ground.tileW = groundImage.width;
            ground.y = h-groundImage.height;
            ground.activity = true;
            ground.action = {
                run:function(){
                    if(ground.activity){
                        ground.x = ground.x-3;
                        if(ground.x<-groundImage.width){
                            ground.x=0;
                        }
                    }
                }
            }

            stage.addChild(sky , ground , high);

            for(var i=0;i<10;i++){
                stones.push(new stone(w+5 , groundImage));
            }

            man = new Man(200,326,manImage);

            kuang = new createjs.Shape();
            kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(23 , 0 , 50 , 96);
            stage.addChild(kuang)

            createjs.Ticker.timingMode = createjs.Ticker.RAF;
            createjs.Ticker.setFPS(60);
            createjs.Ticker.addEventListener("tick", tick);

            window.addEventListener("keydown" , function(event){
                event = event||window.event;
                if(event.keyCode===32&&man.state!=="die"){
                    man.jump();
                }
            });

            again.onclick = function(){
                for(var i=0;i<stones.length;i++){
                    stones[i].visible = false;
                    stones[i].x = w+5;
                    stones[i].update();
                }

                man.run();
                ground.activity = true;
                stst = false;
                again.style.display="none";

                point = 0;
                pt.innerHTML = "得分："+point;
            }
        }

        var tt = true,stst=false,point=0,lastStone=null;
        function tick(event){
            var deltaS = event.delta/1000;
            var grantW = man.sprite.getBounds().width*man.scaleX;
            
            ground.action.run();
            man.update();

            if(tt&&!stst){
                tt = false;
                for(var i=0;i<stones.length;i++){
                    if(!stones[i].visible){
                        stones[i].visible = true;
                        stones[i].x = w;
                        stones[i].build();
                        break;
                    }
                }

                setTimeout(function(){
                    tt = true;
                },2000)
            }

            for(var i=0;i<stones.length;i++){
                if(stones[i].visible&&man.state!=="die"){
                    if(!stst) stones[i].update();

                    for(var j=0;j<stones[i].bones.length;j++){
                        var sbx = stones[i].bones[j].x+stones[i].getStoneSize()/2,
                            sby = stones[i].bones[j].y+stones[i].getStoneSize()/2,
                            manx = man.sprite.x+48,
                            many = man.sprite.y+48;

                        if(Math.abs(manx-sbx)<25+stones[i].getStoneSize()/2 && Math.abs(many-sby)<48+stones[i].getStoneSize()/2){
                            man.die();
                            ground.activity = false;
                            stst = true;
                            again.style.display="block";
                            again.innerHTML = "你的得分："+point+"<br>再来一遍"
                            break;
                        }else if(Math.abs(manx-sbx)<25+stones[i].getStoneSize()/2 && lastStone!==stones[i]){
                            point++;
                            pt.innerHTML = "得分："+point;
                            lastStone=stones[i];
                        }
                    }
                }
            }

            kuang.x = man.sprite.x;
            kuang.y = man.sprite.y;

            stage.update(event)
        }

        init();
    </script>
</body>
</html>

下面是人物处理js：就是对createJs的sprite对象进行进一步抽象成一个man对象。

(function(w){
    var FRAME_RATE = 13,    //精灵表播放速度
        SCALE_X = 1.5,    //X轴缩放
        SCALE_Y = 1.5,    //Y轴缩放
        GRAVITY = 9.8,    //重力加速度
        JUMP_SPEED = 2.5,        //垂直速度
        PROPORTION = 200/1;  //游戏与实际的距离比例

    w.Man = function(x , y , img){
        this.x = x;
        this.y = y;
        this.vy = 0;
        this.state = "run";
        this.init(img);
    }

    Man.prototype = {
        constructors:Man,

        init:function(img){
            var manSpriteSheet = new createjs.SpriteSheet({
                "images":[img],
                "frames":{"regX":0,"height":64,"count":45,"regY":1,"width":64},
                "animations":{
                    "run":{
                        frames:[21,20,19,18,17,16,15,14,13,12],
                        next:"run",
                        speed:1,
                    }, 
                    "jump":{
                        frames:[34,35,36,37,38,39,40,41,42,43],
                        next:"run",
                        speed:1,
                    },
                    "die":{
                        frames:[8,7,6,5,4,3,2,1,0],
                        next:"die",
                        speed:1,
                    },
                }
            });
            this.sprite = new createjs.Sprite(manSpriteSheet , this.state);
            this.sprite.framerate = FRAME_RATE;
            this.sprite.setTransform(this.x, this.y, SCALE_X, SCALE_Y);
            stage.addChild(this.sprite);
        },

        update:function(){
            var sprite = this.sprite;
            var time = createjs.Ticker.getInterval()/1000;
            switch(this.state){
                case "jump":
                    sprite.y += time*this.vy*PROPORTION;
                    this.vy += time*GRAVITY;
                    if(sprite.y > this.y && this.vy > 0){
                        sprite.state = "run";
                        sprite.y=this.y;
                        this.vy = 0;
                    }
                break;

                case "die":
                    sprite.y += time*this.vy*PROPORTION;
                    this.vy += time*GRAVITY;
                    if(sprite.y > this.y && this.vy > 0){
                        sprite.y=this.y;
                        this.vy = 0;
                    }
                    if(sprite.currentFrame===0){
                        sprite.paused = true;
                    }
                break;
            }
        },

        jump:function(){
            this.vy = -JUMP_SPEED;
            this.state = "jump";
            this.sprite.gotoAndPlay("jump")
        },

        die:function(){
            this.state = "die";
            this.sprite.gotoAndPlay("die")
        },

        run:function(){
            this.state = "run";
            this.sprite.gotoAndPlay("run")
        }
    }
})(window)

还有阻碍物的js：（就是分成上跟下两部分，总共的石头三块，然后取随机数，让它一个一个出来就行了）

(function(w){
    var STONE_SIZE = 70,
        STONE_NUM = 3,
        STONE_SPEED = 3;

    w.stone = function(x , img){
        this.x = x;
        this.y = 0;
        this.img = img
        this.visible = false;
        this.bones = [];

        this.init();
    }

    var s = stone.prototype;

    s.init = function(){
        for(var g=0;g<STONE_NUM;g++){
            bone = new createjs.Shape();
            bone.graphics.s("#000").f("#59554D").drawRect(0 , 0 , STONE_SIZE , STONE_SIZE);
            bone.x = this.x;
            stage.addChild(bone)
            this.bones.push(bone);
        }
    }

    s.getStoneSize = function(){
        return STONE_SIZE;
    }

    s.update = function(){
        var index=0;
        for(var z=0;z<this.top;z++){
            this.bones[index].x = this.x;
            this.bones[index].y = z*STONE_SIZE;
            index++;
        }

        for(var t=0;t<this.bottom;t++){
            this.bones[index].x = this.x;
            this.bones[index].y = h-this.img.height-(t+1)*STONE_SIZE;
            index++;
        }

        if(this.visible){
            if(this.x<=-STONE_SIZE){
                this.visible = false;
            }
            this.x -= STONE_SPEED;
        }
    }

    s.build = function(){
        this.top = parseInt(Math.random()*STONE_NUM);
        this.bottom = STONE_NUM-this.top;
    }
})(window)

　　源码地址：

　　https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/FlppyPeople

转载于:https://www.cnblogs.com/axes/p/3600751.html

dfpbut5000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
= =用createJS写个flyppyPeople

　　声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！　　最近flyppybird很流行啊，今天中午闲着没事干，就用现有的素材写了个flyppyPeople，因为角色是个人，所以就叫People啦，哈哈　　上链接：http://whxaxes.github.io/canvas-test/src/Game-demo/FlppyPeople/index.html。。。。。。...
复制链接

扫一扫