docker/pacman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加布景重置方法

Browse Source
This commit is contained in:
郑浩乐 2016-01-10 23:25:51 +08:00
parent 7941696e44
commit d1024d3e06
2 changed files with 52 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
game.js
View File

@ -2,16 +2,19 @@
/* /*
* 小型游戏引擎 * 小型游戏引擎
*/ */
function Game(id,options){ function Game(id,params){
var _ = this; var _ = this;
options = options||{}; params = params||{};
var settings = { var settings = {
width:960, //画布宽度 width:960, //画布宽度
height:640 //画布高度 height:640 //画布高度
}; };
for(var i in settings){ var _extend = function(target,settings,params){
this[i] = options[i]||settings[i]; for(var i in settings){
} target[i] = params[i]||settings[i];
}
};
_extend(this,settings,params);
var $canvas = document.getElementById(id); var $canvas = document.getElementById(id);
$canvas.width = _.width; $canvas.width = _.width;
$canvas.height = _.height; $canvas.height = _.height;
@ -21,9 +24,9 @@ function Game(id,options){
var _index, //当前布景索引 var _index, //当前布景索引
_hander; //帧动画控制 _hander; //帧动画控制
//活动对象构造 //活动对象构造
var Item = function(options){ var Item = function(params){
options = options||{}; this._params = params||{};
var settings = { this._settings = {
x:0, //位置坐标:横坐标 x:0, //位置坐标:横坐标
y:0, //位置坐标:纵坐标 y:0, //位置坐标:纵坐标
width:20, //宽 width:20, //宽
@ -43,14 +46,11 @@ function Game(id,options){
index:0, //对象索引 index:0, //对象索引
frames:1, //速度等级,内部计算器times多少帧变化一次 frames:1, //速度等级,内部计算器times多少帧变化一次
times:0, //刷新画布计数(用于循环动画状态判断) times:0, //刷新画布计数(用于循环动画状态判断)
timeout:0, //倒计时(用于过程动画状态判断)
control:{}, //控制缓存,到达定位点时处理 control:{}, //控制缓存,到达定位点时处理
update:function(){}, //更新参数信息 update:function(){}, //更新参数信息
draw:function(){} //绘制 draw:function(){} //绘制
}; };
for(var i in settings){ _extend(this,this._settings,this._params);
this[i] = options[i]||settings[i];
}
}; };
Item.prototype.bind = function(eventType,callback){ Item.prototype.bind = function(eventType,callback){
if(!_events[eventType]){ if(!_events[eventType]){
@ -71,9 +71,9 @@ function Game(id,options){
_events[eventType]['s'+this.stage.index+'i'+this.index] = callback.bind(this); //绑定作用域 _events[eventType]['s'+this.stage.index+'i'+this.index] = callback.bind(this); //绑定作用域
}; };
//地图对象构造器 //地图对象构造器
var Map = function(options){ var Map = function(params){
options = options||{}; this._params = params||{};
var settings = { this._settings = {
x:0, //地图起点坐标 x:0, //地图起点坐标
y:0, y:0,
size:20, //地图单元的宽度 size:20, //地图单元的宽度
@ -84,9 +84,7 @@ function Game(id,options){
update:function(){}, //更新地图数据 update:function(){}, //更新地图数据
draw:function(){}, //绘制地图 draw:function(){}, //绘制地图
}; };
for(var i in settings){ _extend(this,this._settings,this._params);
this[i] = options[i]||settings[i];
}
}; };
//获取地图上某点的值 //获取地图上某点的值
Map.prototype.get = function(x,y){ Map.prototype.get = function(x,y){
@ -182,19 +180,18 @@ function Game(id,options){
return result; return result;
}; };
//布景对象构造器 //布景对象构造器
var Stage = function(options){ var Stage = function(params){
options = options||{}; this._params = params||{};
var settings = { this._settings = {
status:1, //布景状态,0表示未激活,1表示正常,2表示暂停,3表示结束 status:1, //布景状态,0表示未激活,1表示正常,2表示暂停,3表示结束
maps:[], //地图队列 maps:[], //地图队列
audio:[], //音频资源 audio:[], //音频资源
images:[], //图片资源 images:[], //图片资源
items:[], //对象队列 items:[], //对象队列
timeout:0, //倒计时(用于过程动画状态判断)
update:function(){} //嗅探,处理布局下不同对象的相对关系 update:function(){} //嗅探,处理布局下不同对象的相对关系
}; };
for(var i in settings){ _extend(this,this._settings,this._params);
this[i] = options[i]||settings[i];
}
}; };
//动画开始 //动画开始
Stage.prototype.start = function() { Stage.prototype.start = function() {
@ -204,6 +201,9 @@ function Game(id,options){
var fn = function(){ var fn = function(){
_context.clearRect(0,0,_.width,_.height); //清除画布 _context.clearRect(0,0,_.width,_.height); //清除画布
f++; f++;
if(stage.timeout){
stage.timeout--;
}
stage.update(); stage.update();
if(stage.maps.length){ if(stage.maps.length){
stage.maps.forEach(function(map,index){ stage.maps.forEach(function(map,index){
@ -212,12 +212,9 @@ function Game(id,options){
}); });
} }
if(stage.items.length){ if(stage.items.length){
stage.items.forEach(function(item,index){ stage.items.forEach(function(item){
if(!(f%item.frames)){ if(!(f%item.frames)){
item.times = f/item.frames; //计数器 item.times = f/item.frames; //计数器
if(item.timeout){
item.timeout--;
}
} }
if(stage.status==1&&item.status==1){ //对象及布景状态都处于正常状态下 if(stage.status==1&&item.status==1){ //对象及布景状态都处于正常状态下
if(item.location){ if(item.location){
@ -238,6 +235,26 @@ function Game(id,options){
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame;
_hander&&cancelAnimationFrame(_hander); _hander&&cancelAnimationFrame(_hander);
}; };
//重置
Stage.prototype.reset = function(){
_extend(this,this._settings,this._params);
this.maps.forEach(function(map){
_extend(map,map._settings,map._params);
map.stage = this;
map.y_length = map.data.length;
map.x_length = map.data[0].length;
}.bind(this));
this.items.forEach(function(item,index){
_extend(item,item._settings,item._params);
item.index = index;
item.stage = this;
if(item.location){
var position = item.location.coord2position(item.coord.x,item.coord.y);
item.x = position.x;
item.y = position.y;
}
}.bind(this));
};
//添加对象 //添加对象
Stage.prototype.createItem = function(options){ Stage.prototype.createItem = function(options){
var item = new Item(options); var item = new Item(options);

11
index.js
View File

@ -113,11 +113,14 @@
var dy = item.y-player.y; var dy = item.y-player.y;
if(dx*dx+dy*dy<750){ if(dx*dx+dy*dy<750){
stage.status = 2; stage.status = 2;
stage.timeout = 30;
player.status = 3; player.status = 3;
player.frames = 1;
player.timeout = 50;
} }
}); });
}else if(stage.status=3){
if(!stage.timeout){
stage.reset();
}
} }
} }
}); });
@ -261,8 +264,8 @@
context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.01)*Math.PI,(.5*this.orientation-.01)*Math.PI,false); context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.01)*Math.PI,(.5*this.orientation-.01)*Math.PI,false);
} }
}else{ }else{
if(this.timeout) { if(stage.timeout) {
context.arc(this.x,this.y,this.width/2,(.5*this.orientation+1-.02*this.timeout)*Math.PI,(.5*this.orientation-1+.02*this.timeout)*Math.PI,false); context.arc(this.x,this.y,this.width/2,(.5*this.orientation+1-.02*stage.timeout)*Math.PI,(.5*this.orientation-1+.02*stage.timeout)*Math.PI,false);
} }
} }
context.lineTo(this.x,this.y); context.lineTo(this.x,this.y);