= =用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中包 ...
随机推荐
- Hive启动失败
启动hive报如下错误 [root@node01 conf]# hive19/03/31 09:57:31 WARN conf.HiveConf: HiveConf of name hive.meta ...
- 使用 cacti 监控 windows 服务器硬盘的 I/O 状况
https://blog.csdn.net/m0_37814112/article/details/80742433
- CentOS6.9安装socat
yum -y install epel-release yum -y install socat
- 无法创建链接服务器 "ORCL" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例 （错误：7302）
原文:https://www.cnblogs.com/tiger2soft/p/6954308.html 在sqlserver中创建oracle的链接服务器时,提示此错误. 按照网上的方案,先后使用了 ...
- BFC的形成和排版规则
何为bfc? BFC(Block Formatting Context)直译为“块级格式化范围”.是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...
- 关于sql和MySQL的语句执行顺序
sql和mysql执行顺序,发现内部机制是一样的.最大区别是在别名的引用上. 一.sql执行顺序 (1) from (3) join (2) on (4) where (5) group by(开始使 ...
- Codeforces Gym100543L Outer space invaders 区间dp 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100543L.html 题目传送门 - CF-Gym100543L 题意 $T$ 组数据. 有 $n ...
- git 错误解决
1.今天 当我 执行 git add somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...
- 月薪3万的python程序员都看了这本书
想必大家都看过吧 Python编程从入门到实践 全书共有20章,书中的简介如下: 本书旨在让你尽快学会 Python ,以便能够编写能正确运行的程序 —— 游戏.数据可视化和 Web 应用程序,同时掌 ...
- 046 Oracle执行慢的SQL
-- 执行最慢的sql SELECT * FROM (SELECT sa.SQL_TEXT, sa.SQL_FULLTEXT, sa.EXECUTIONS as "exeCount" ...