updated 添加4个NPC角色，实现多NPC包抄玩家功能
This commit is contained in:
郑浩乐
parent
6ad13f8bd4
commit
ec1289d3f4
20
game.js
20
game.js
@ -29,6 +29,7 @@ function Game(id,options){
|
||||
width:20, //宽
|
||||
height:20, //高
|
||||
type:0, //对象类型,0表示普通对象(不与地图绑定),1表示玩家控制对象,2表示程序控制对象
|
||||
color:'#F00', //标识颜色
|
||||
status:1, //对象状态,1表示正常,0表示隐藏,2表示暂停
|
||||
orientation:0, //当前定位方向,0表示上,1表示右,2表示下,3表示左
|
||||
vector:{}, //目标坐标
|
||||
@ -110,7 +111,7 @@ function Game(id,options){
|
||||
//寻址算法
|
||||
Map.prototype.finder = function(param){
|
||||
var defaults = {
|
||||
map:this.data,
|
||||
map:null,//this.data,
|
||||
start:{},
|
||||
end:{}
|
||||
};
|
||||
@ -125,7 +126,6 @@ function Game(id,options){
|
||||
return [];
|
||||
}
|
||||
var finded = false;
|
||||
var _self = this;
|
||||
var y_length = options.map.length;
|
||||
var x_length = options.map[0].length;
|
||||
var steps = []; //步骤的映射
|
||||
@ -139,7 +139,7 @@ function Game(id,options){
|
||||
var new_list = [];
|
||||
var next = function(from,to){
|
||||
if(!finded){
|
||||
var value = _self.get(to.x,to.y);
|
||||
var value = typeof options.map[to.y][to.x] !='undefined'?options.map[to.y][to.x]:-1;
|
||||
if(value!=1){ //当前点是否可以走
|
||||
if(value==-1){
|
||||
to.x = (to.x+x_length)%x_length;
|
||||
@ -190,7 +190,7 @@ function Game(id,options){
|
||||
for(var i in settings){
|
||||
this[i] = options[i]||settings[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
//动画开始
|
||||
Stage.prototype.start = function() {
|
||||
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame;
|
||||
@ -233,9 +233,21 @@ function Game(id,options){
|
||||
//动态属性
|
||||
item.stage = this;
|
||||
item.index = this.items.length;
|
||||
if(this.map&&item.type){
|
||||
item.coord = this.map.position2coord(item.x,item.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);
|
||||
|
||||
240
index.js
240
index.js
@ -339,120 +339,140 @@
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
var pos = map.coord2position(12,14);
|
||||
stage.createItem({
|
||||
x:pos.x,
|
||||
y:pos.y,
|
||||
width:30,
|
||||
height:30,
|
||||
type:2,
|
||||
frames:10,
|
||||
speed:1,
|
||||
update:function(){
|
||||
if(!this.coord.offset){
|
||||
this.path = map.finder({
|
||||
start:this.coord,
|
||||
end:player.coord
|
||||
});
|
||||
if(this.path.length){
|
||||
this.vector = this.path[0];
|
||||
if(this.vector.change){ //是否转变方向
|
||||
this.coord.x = this.vector.x;
|
||||
this.coord.y = this.vector.y;
|
||||
var pos = map.coord2position(this.coord.x,this.coord.y);
|
||||
this.x = pos.x;
|
||||
this.y = pos.y;
|
||||
var NPC_COLOR = ['#96F','#6C6','#C30','#3C9'];
|
||||
for(var i=0;i<4;i++){
|
||||
var pos = map.coord2position(12+i,14);
|
||||
stage.createItem({
|
||||
x:pos.x,
|
||||
y:pos.y,
|
||||
width:30,
|
||||
height:30,
|
||||
color:NPC_COLOR[i],
|
||||
type:2,
|
||||
frames:10,
|
||||
speed:1,
|
||||
update:function(){
|
||||
if(!this.coord.offset){
|
||||
var new_map = [];
|
||||
for(var j=0;j<map.data.length;j++){
|
||||
new_map[j]=[];
|
||||
for(var k=0;k<map.data[0].length;k++){
|
||||
new_map[j][k]=map.data[j][k];
|
||||
}
|
||||
}
|
||||
var items = stage.getItemsByType(2);
|
||||
var index = this.index;
|
||||
items.forEach(function(item){
|
||||
if(item.coord.y&&item.index!=index){
|
||||
new_map[item.coord.y][item.coord.x]=1;
|
||||
}
|
||||
});
|
||||
this.path = map.finder({
|
||||
map:new_map,
|
||||
start:this.coord,
|
||||
end:player.coord
|
||||
});
|
||||
if(this.path.length){
|
||||
this.vector = this.path[0];
|
||||
if(this.vector.change){ //是否转变方向
|
||||
this.coord.x = this.vector.x;
|
||||
this.coord.y = this.vector.y;
|
||||
var pos = map.coord2position(this.coord.x,this.coord.y);
|
||||
this.x = pos.x;
|
||||
this.y = pos.y;
|
||||
}
|
||||
}
|
||||
if(this.vector.x>this.coord.x){
|
||||
this.orientation = 1;
|
||||
}else if(this.vector.x<this.coord.x){
|
||||
this.orientation = 3;
|
||||
}else if(this.vector.y>this.coord.y){
|
||||
this.orientation = 2;
|
||||
}else if(this.vector.y<this.coord.y){
|
||||
this.orientation = 0;
|
||||
}
|
||||
}
|
||||
if(this.vector.x>this.coord.x){
|
||||
this.orientation = 1;
|
||||
}else if(this.vector.x<this.coord.x){
|
||||
this.orientation = 3;
|
||||
}else if(this.vector.y>this.coord.y){
|
||||
this.orientation = 2;
|
||||
}else if(this.vector.y<this.coord.y){
|
||||
this.orientation = 0;
|
||||
switch(this.orientation){
|
||||
case 0:
|
||||
this.y-=this.speed;
|
||||
break;
|
||||
case 1:
|
||||
this.x+=this.speed;
|
||||
break;
|
||||
case 2:
|
||||
this.y+=this.speed;
|
||||
break;
|
||||
case 3:
|
||||
this.x-=this.speed;
|
||||
break;
|
||||
}
|
||||
},
|
||||
draw:function(context){
|
||||
context.fillStyle = this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);
|
||||
switch(this.times%2){
|
||||
case 0:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.4);
|
||||
context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);
|
||||
break;
|
||||
case 1:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);
|
||||
break;
|
||||
}
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.fillStyle = '#FFF';
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.fillStyle = '#000';
|
||||
switch(this.times%4){
|
||||
case 2:
|
||||
case 0:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
case 1:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
case 3:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
}
|
||||
}
|
||||
switch(this.orientation){
|
||||
case 0:
|
||||
this.y-=this.speed;
|
||||
break;
|
||||
case 1:
|
||||
this.x+=this.speed;
|
||||
break;
|
||||
case 2:
|
||||
this.y+=this.speed;
|
||||
break;
|
||||
case 3:
|
||||
this.x-=this.speed;
|
||||
break;
|
||||
}
|
||||
},
|
||||
draw:function(context){
|
||||
context.fillStyle = '#F00';
|
||||
context.beginPath();
|
||||
context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);
|
||||
switch(this.times%2){
|
||||
case 0:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.4);
|
||||
context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);
|
||||
break;
|
||||
case 1:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);
|
||||
break;
|
||||
}
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.fillStyle = '#FFF';
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.fillStyle = '#00F';
|
||||
switch(this.times%4){
|
||||
case 2:
|
||||
case 0:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.27,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
case 1:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
case 3:
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.13,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.beginPath();
|
||||
context.arc(this.x+this.width*.17,this.y-this.height*.25,this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
stage.bind('keydown',function(e){
|
||||
player.control = {orientation:MAP_ORIENTATION[e.keyCode]};
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user