聲明：本文為原創文章，如需轉載，請注明來源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