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

updated 游戏引擎结构调整，物品和地图去除索引改为ID，且不在配置中

Browse Source
This commit is contained in:
mumuy 2017-03-15 17:46:04 +08:00
parent cc2d104c4a
commit 594130498c
2 changed files with 78 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
game.js
View File

@ -29,18 +29,18 @@ Date.now = function() { return new Date().getTime(); };
function Game(id,params){ function Game(id,params){
var _ = this; var _ = this;
params = params||{};
var settings = { var settings = {
width:960, //画布宽度 width:960, //画布宽度
height:640 //画布高度 height:640 //画布高度
}; };
var _extend = function(target,settings,params){ var _extend = function(target,settings,params){
params = params||{};
for(var i in settings){ for(var i in settings){
target[i] = params[i]||settings[i]; target[i] = params[i]||settings[i];
} }
return target; return target;
}; };
_extend(this,settings,params); _extend(_,settings,params);
var $canvas = document.getElementById(id); var $canvas = document.getElementById(id);
$canvas.width = _.width; $canvas.width = _.width;
$canvas.height = _.height; $canvas.height = _.height;
@ -48,10 +48,12 @@ function Game(id,params){
var _stages = []; //布景对象队列 var _stages = []; //布景对象队列
var _events = {}; //事件集合 var _events = {}; //事件集合
var _index=0, //当前布景索引 var _index=0, //当前布景索引
_hander; //帧动画控制 _hander; //帧动画控制
//活动对象构造 //活动对象构造
var Item = function(params){ var Item = function(params){
this._params = params||{}; this._params = params||{};
this._id = 0; //标志符
this._stage = null; //与所属布景绑定
this._settings = { this._settings = {
x:0, //位置坐标:横坐标 x:0, //位置坐标:横坐标
y:0, //位置坐标:纵坐标 y:0, //位置坐标:纵坐标
@ -68,8 +70,6 @@ function Game(id,params){
path:[], //NPC自动行走的路径 path:[], //NPC自动行走的路径
vector:null, //目标坐标 vector:null, //目标坐标
//布局相关 //布局相关
stage:null, //绑定对象与所属布景绑定
index:0, //对象索引
frames:1, //速度等级,内部计算器times多少帧变化一次 frames:1, //速度等级,内部计算器times多少帧变化一次
times:0, //刷新画布计数(用于循环动画状态判断) times:0, //刷新画布计数(用于循环动画状态判断)
timeout:0, //倒计时(用于过程动画状态判断) timeout:0, //倒计时(用于过程动画状态判断)
@ -86,7 +86,7 @@ function Game(id,params){
var position = _.getPosition(e); var position = _.getPosition(e);
_stages[_index].items.forEach(function(item){ _stages[_index].items.forEach(function(item){
if(Math.abs(position.x-item.x)<item.width/2&&Math.abs(position.y-item.y)<item.height/2){ if(Math.abs(position.x-item.x)<item.width/2&&Math.abs(position.y-item.y)<item.height/2){
var key = 's'+_index+'i'+item.index; var key = 's'+_index+'i'+item._id;
if(_events[eventType][key]){ if(_events[eventType][key]){
_events[eventType][key](e); _events[eventType][key](e);
} }
@ -95,24 +95,25 @@ function Game(id,params){
e.preventDefault(); e.preventDefault();
}); });
} }
_events[eventType]['s'+this.stage.index+'i'+this.index] = callback.bind(this); //绑定作用域 _events[eventType]['s'+this._stage.index+'i'+this._id] = callback.bind(this); //绑定作用域
}; };
//地图对象构造器 //地图对象构造器
var Map = function(params){ var Map = function(params){
this._params = params||{}; this._params = params||{};
this._id = 0; //标志符
this._stage = null; //与所属布景绑定
this._settings = { this._settings = {
x:0, //地图起点坐标 x:0, //地图起点坐标
y:0, y:0,
size:20, //地图单元的宽度 size:20, //地图单元的宽度
data:[], //地图数据 data:[], //地图数据
stage:null, //布景 x_length:0, //二维数组x轴长度
x_length:0, //二维数组x轴长度 y_length:0, //二维数组y轴长度
y_length:0, //二维数组y轴长度 frames:1, //速度等级,内部计算器times多少帧变化一次
frames:1, //速度等级,内部计算器times多少帧变化一次 times:0, //刷新画布计数(用于循环动画状态判断)
times:0, //刷新画布计数(用于循环动画状态判断) cache:false, //是否静态（如静态则设置缓存）
cache:false, //是否静态（如静态则设置缓存） update:function(){}, //更新地图数据
update:function(){}, //更新地图数据 draw:function(){}, //绘制地图
draw:function(){}, //绘制地图
}; };
_extend(this,this._settings,this._params); _extend(this,this._settings,this._params);
}; };
@ -162,12 +163,9 @@ function Game(id,params){
var result = []; var result = [];
var y_length = options.map.length; var y_length = options.map.length;
var x_length = options.map[0].length; var x_length = options.map[0].length;
var steps = []; //步骤的映射 var steps = []; //步骤的映射
for(var y=y_length;y--;){ for(var y=y_length;y--;){
steps[y] = []; steps[y] = new Array(x_length).fill(0);
for(var x=x_length;x--;){
steps[y][x] = 0;
}
} }
var _getValue = function(x,y){ //获取地图上的值 var _getValue = function(x,y){ //获取地图上的值
if(options.map[y]&&typeof options.map[y][x]!='undefined'){ if(options.map[y]&&typeof options.map[y][x]!='undefined'){
@ -175,7 +173,7 @@ function Game(id,params){
} }
return -1; return -1;
}; };
var _next = function(to){ //判定是非可走,可走放入列表 var _next = function(to){ //判定是否可走,可走放入列表
var value = _getValue(to.x,to.y); var value = _getValue(to.x,to.y);
if(value<1){ if(value<1){
if(value==-1){ if(value==-1){
@ -238,6 +236,7 @@ function Game(id,params){
var Stage = function(params){ var Stage = function(params){
this._params = params||{}; this._params = params||{};
this._settings = { this._settings = {
index:0, //布景索引
status:0, //布景状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时,4表示异常 status:0, //布景状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时,4表示异常
maps:[], //地图队列 maps:[], //地图队列
audio:[], //音频资源 audio:[], //音频资源
@ -248,19 +247,54 @@ function Game(id,params){
}; };
_extend(this,this._settings,this._params); _extend(this,this._settings,this._params);
}; };
//添加对象
Stage.prototype.createItem = function(options){
var item = new Item(options);
//动态属性
if(item.location){
var position = item.location.coord2position(item.coord.x,item.coord.y);
item.x = position.x;
item.y = position.y;
}
//关系绑定
item._stage = this;
item._id = this.items.length;
this.items.push(item);
return item;
};
//重置物体位置 //重置物体位置
Stage.prototype.resetItems = function(){ Stage.prototype.resetItems = function(){
this.status = 1; this.status = 1;
this.items.forEach(function(item,index){ this.items.forEach(function(item,index){
_extend(item,item._settings,item._params); _extend(item,item._settings,item._params);
item.index = index;
item.stage = this;
if(item.location){ if(item.location){
var position = item.location.coord2position(item.coord.x,item.coord.y); var position = item.location.coord2position(item.coord.x,item.coord.y);
item.x = position.x; item.x = position.x;
item.y = position.y; item.y = position.y;
} }
}.bind(this)); });
};
//获取对象列表
Stage.prototype.getItemsByType = function(type){
return this.items.filter(function(item){
if(item.type==type){
return item;
}
});
};
//添加地图
Stage.prototype.createMap = function(options){
var map = new Map(options);
//动态属性
map.data = JSON.parse(JSON.stringify(map._params.data));
map.y_length = map.data.length;
map.x_length = map.data[0].length;
map.imageData = null;
//关系绑定
map._stage = this;
map._id = this.maps.length;
this.maps.push(map);
return map;
}; };
//重置地图 //重置地图
Stage.prototype.resetMaps = function(){ Stage.prototype.resetMaps = function(){
@ -268,10 +302,10 @@ function Game(id,params){
this.maps.forEach(function(map){ this.maps.forEach(function(map){
_extend(map,map._settings,map._params); _extend(map,map._settings,map._params);
map.data = JSON.parse(JSON.stringify(map._params.data)); map.data = JSON.parse(JSON.stringify(map._params.data));
map.stage = this;
map.y_length = map.data.length; map.y_length = map.data.length;
map.x_length = map.data[0].length; map.x_length = map.data[0].length;
}.bind(this)); map.imageData = null;
});
}; };
//重置 //重置
Stage.prototype.reset = function(){ Stage.prototype.reset = function(){
@ -279,41 +313,6 @@ function Game(id,params){
this.resetItems(); this.resetItems();
this.resetMaps(); this.resetMaps();
}; };
//添加对象
Stage.prototype.createItem = function(options){
var item = new Item(options);
//动态属性
item.stage = this;
item.index = this.items.length;
if(item.location){
var position = item.location.coord2position(item.coord.x,item.coord.y);
item.x = position.x;
item.y = position.y;
}
this.items.push(item);
return item;
};
//获取对象列表
Stage.prototype.getItemsByType = function(type){
var items = this.items.filter(function(item){
if(item.type==type){
return item;
}
});
return items;
};
//添加地图
Stage.prototype.createMap = function(options){
var map = new Map(options);
//动态属性
map.data = JSON.parse(JSON.stringify(map._params.data));
map.stage = this;
map.y_length = map.data.length;
map.x_length = map.data[0].length;
map.imageData = null;
this.maps.push(map);
return map;
};
//绑定事件 //绑定事件
Stage.prototype.bind = function(eventType,callback){ Stage.prototype.bind = function(eventType,callback){
if(!_events[eventType]){ if(!_events[eventType]){
@ -406,10 +405,7 @@ function Game(id,params){
//下个布景 //下个布景
this.nextStage = function(){ this.nextStage = function(){
if(_index<_stages.length-1){ if(_index<_stages.length-1){
_stages[_index].status = 0; return this.setStage(++_index);
_index++;
_stages[_index].status = 1;
return _stages[_index];
}else{ }else{
throw new Error('unfound new stage.'); throw new Error('unfound new stage.');
} }

28
index.js
View File

@ -33,6 +33,12 @@
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
], ],
_GOODS = { //能量豆
'1,3':1,
'26,3':1,
'1,23':1,
'26,23':1
},
_COS = [1,0,-1,0], _COS = [1,0,-1,0],
_SIN = [0,1,0,-1], _SIN = [0,1,0,-1],
_COLOR = ['#F00','#F93','#0CF','#F9C'],//红,橙, _COLOR = ['#F00','#F93','#0CF','#F9C'],//红,橙,
@ -104,7 +110,7 @@
})(); })();
//游戏主程序 //游戏主程序
(function(){ (function(){
var stage,map,goods,beans,player,times; var stage,map,beans,player,times;
stage = game.createStage({ stage = game.createStage({
update:function(){ update:function(){
var stage = this; var stage = this;
@ -237,12 +243,6 @@
} }
}); });
//物品地图 //物品地图
goods = {
'1,3':1,
'26,3':1,
'1,23':1,
'26,23':1
};
beans = stage.createMap({ beans = stage.createMap({
x:60, x:60,
y:10, y:10,
@ -254,7 +254,7 @@
if(!this.get(i,j)){ if(!this.get(i,j)){
var pos = this.coord2position(i,j); var pos = this.coord2position(i,j);
context.fillStyle = "#F5F5DC"; context.fillStyle = "#F5F5DC";
if(goods[i+','+j]){ if(_GOODS[i+','+j]){
context.beginPath(); context.beginPath();
context.arc(pos.x,pos.y,3+this.times%2,0,2*Math.PI,true); context.arc(pos.x,pos.y,3+this.times%2,0,2*Math.PI,true);
context.fill(); context.fill();
@ -340,9 +340,9 @@
if(this.status==1){ if(this.status==1){
if(!this.timeout){ //定时器 if(!this.timeout){ //定时器
new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0)); new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));
var index = this.index; var id = this._id;
items.forEach(function(item){ items.forEach(function(item){
if(item.index!=index&&item.status==1){ //NPC将其它所有还处于正常状态的NPC当成一堵墙 if(item._id!=id&&item.status==1){ //NPC将其它所有还处于正常状态的NPC当成一堵墙
new_map[item.coord.y][item.coord.x]=1; new_map[item.coord.y][item.coord.x]=1;
} }
}); });
@ -357,9 +357,9 @@
} }
}else if(this.status==3){ }else if(this.status==3){
new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0)); new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));
var index = this.index; var id = this._id;
items.forEach(function(item){ items.forEach(function(item){
if(item.index!=index){ if(item._id!=id){
new_map[item.coord.y][item.coord.x]=1; new_map[item.coord.y][item.coord.x]=1;
} }
}); });
@ -469,7 +469,7 @@
update:function(){ update:function(){
var coord = this.coord; var coord = this.coord;
if(!coord.offset){ if(!coord.offset){
if(typeof this.control.orientation!='undefined'){ if(this.control.orientation!='undefined'){
if(!map.get(coord.x+_COS[this.control.orientation],coord.y+_SIN[this.control.orientation])){ if(!map.get(coord.x+_COS[this.control.orientation],coord.y+_SIN[this.control.orientation])){
this.orientation = this.control.orientation; this.orientation = this.control.orientation;
} }
@ -487,7 +487,7 @@
if(!beans.get(this.coord.x,this.coord.y)){ //吃豆 if(!beans.get(this.coord.x,this.coord.y)){ //吃豆
_SCORE++; _SCORE++;
beans.set(this.coord.x,this.coord.y,1); beans.set(this.coord.x,this.coord.y,1);
if(goods[this.coord.x+','+this.coord.y]){ //吃到能量豆 if(_GOODS[this.coord.x+','+this.coord.y]){ //吃到能量豆
items.forEach(function(item){ items.forEach(function(item){
if(item.status==1||item.status==3){ //如果NPC为正常状态，则置为临时状态 if(item.status==1||item.status==3){ //如果NPC为正常状态，则置为临时状态
item.timeout = 450; item.timeout = 450;