= =用createJS写个flyppyPeople

　　声明：本文为原创文章，如需转载，请注明来源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

= =用createJS写个flyppyPeople的更多相关文章

createjs 利用createjs 写拼图功能
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
Html5游戏框架createJs的简单用法
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!http://www.it165.net/pro/html/201403/11105.html 楼主记忆力不好,最近刚好用了一下create ...
html游戏引擎，createJs框架
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! createJs网上的中文教程挺少的,以前UC有个Xcanvas的论坛有createJs的详细教程,但是随着XCanvas团队的解散,那个 ...
自己动手写一个简单的MVC框架（第二版）
一.ASP.NET MVC核心机制回顾在ASP.NET MVC中,最核心的当属“路由系统”,而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在这个System.W ...
制作动画或小游戏——CreateJS基础类（一）
前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...
FLASH CC 2015 CANVAS （二）html中写JS调用flash中的元件、函数、变量
注意此贴为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到如下文件,(请先 ...
玩转createjs
标题党"玩转", 真的是在玩怎么转... 参考一篇很经典的博文:createjs入门做移动版(750x1334)的时候出来不居中啊, 不是掉在下面就是滑到右面, canvas里面 ...
前端要怎么学createjs！！！？？？
前端想做js开发,可以.但是思维要变通,思维要重塑.为啥?因为被div+css坑的有点深.这些都是我自己总结的,不知道其他人是不是这样. 在我看来div+css算是开发吗?肯定不是,这些东西有难的东西 ...
一篇文章带你快速入门createjs
开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看. createjs简介官网:http://www.createjs.cc/ createjs中包 ...

随机推荐

论文阅读笔记二-ImageNet Classification with Deep Convolutional Neural Networks
分类的数据大小:1.2million 张,包括1000个类别. 网络结构:60million个参数,650,000个神经元.网络由5层卷积层,其中由最大值池化层和三个1000输出的(与图片的类别数相同 ...
饮冰三年-人工智能-linux-08 软件包管理（Python的安装）
1:软件包存放的位置 media/CentOS_6.9_Final/Packages文件夹下 2.RPM就是Red Hat Package Manger(红帽软件包管理工具)的缩写. 2.1 常用的命 ...
Java+selenium之WebDriver的抛出异常分析(七)
NoSuchElementException 1.检查元素的定位器是否正确 2.如果定位器正确,增加休眠时间 3.等待了足够的时间依然找不到的话,更换定位器的定位方式 NoSuchWindowExce ...
Selenium+PhantomJS使用时报错原因及解决方案
问题今天在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium support for PhantomJS has been dep ...
一脸懵逼学习Hadoop中的MapReduce程序中自定义分组的实现
1:首先搞好实体类对象: write 是把每个对象序列化到输出流,readFields是把输入流字节反序列化,实现WritableComparable,Java值对象的比较:一般需要重写toStrin ...
为tomcat8安装Native library
安装依赖包 yum install -y cmake gcc expat-devel perl wget 安装apr wget http://mirrors.hust.edu.cn/apache//a ...
uva 1232
题意: 建筑物在多长的部分是最高的成为该建筑物的覆盖度.求所有建筑物的覆盖度之和. 链接: https://vjudge.net/contest/202699#problem/E 题解: 这道题还是挺 ...
Codeforces 1019C Sergey's problem 构造
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1019C.html 题目传送门 - CF1019C 题意给定一个有 $n$ 个节点 . $m$ 条边的有向 ...
2018牛客网暑假ACM多校训练赛（第四场）B Interval Revisited 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-B.html 题目传送门 - https://www.no ...
016 pickle
英文也是泡菜的意思. 学完了,还是感觉这个模块是蛮不错的,对多数据保存到文件中,然后在使用的时候,再读取出来,让程序闲的更加优雅,简洁. 一:介绍 1.为什么使用在开篇已经介绍了,但是我这里粘贴一下 ...

= =用createJS写个flyppyPeople

= =用createJS写个flyppyPeople的更多相关文章

随机推荐

热门专题