delete 删除master分支内容
This commit is contained in:
mumuy
parent
ec1289d3f4
commit
6450f03c41
307
game.js
307
game.js
@ -1,307 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
/*
|
|
||||||
* 小型游戏引擎
|
|
||||||
*/
|
|
||||||
function Game(id,options){
|
|
||||||
var _ = this;
|
|
||||||
options = options||{};
|
|
||||||
var settings = {
|
|
||||||
width:960, //画布宽度
|
|
||||||
height:640 //画布高度
|
|
||||||
};
|
|
||||||
for(var i in settings){
|
|
||||||
this[i] = options[i]||settings[i];
|
|
||||||
}
|
|
||||||
var $canvas = document.getElementById(id);
|
|
||||||
$canvas.width = _.width;
|
|
||||||
$canvas.height = _.height;
|
|
||||||
var _context = $canvas.getContext('2d'); //画布上下文环境
|
|
||||||
var _stages = []; //布景对象队列
|
|
||||||
var _events = {}; //事件集合
|
|
||||||
var _index, //当前布景索引
|
|
||||||
_hander; //帧动画控制
|
|
||||||
//活动对象构造
|
|
||||||
var Item = function(options){
|
|
||||||
options = options||{};
|
|
||||||
var settings = {
|
|
||||||
x:0, //横坐标
|
|
||||||
y:0, //纵坐标
|
|
||||||
width:20, //宽
|
|
||||||
height:20, //高
|
|
||||||
type:0, //对象类型,0表示普通对象(不与地图绑定),1表示玩家控制对象,2表示程序控制对象
|
|
||||||
color:'#F00', //标识颜色
|
|
||||||
status:1, //对象状态,1表示正常,0表示隐藏,2表示暂停
|
|
||||||
orientation:0, //当前定位方向,0表示上,1表示右,2表示下,3表示左
|
|
||||||
vector:{}, //目标坐标
|
|
||||||
coord:{}, //如果对象与地图绑定,获得坐标值
|
|
||||||
speed:0, //移动速度
|
|
||||||
frames:1, //速度等级,内部计算器times多少帧变化一次
|
|
||||||
times:0, //计数
|
|
||||||
control:{}, //控制缓存,到达定位点时处理
|
|
||||||
path:[], //NPC自动行走的路径
|
|
||||||
index:0, //对象索引
|
|
||||||
stage:null, //绑定对象与所属布景绑定
|
|
||||||
update:function(){}, //更新参数信息
|
|
||||||
draw:function(){} //绘制
|
|
||||||
};
|
|
||||||
for(var i in settings){
|
|
||||||
this[i] = options[i]||settings[i];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Item.prototype.bind = function(eventType,callback){
|
|
||||||
if(!_events[eventType]){
|
|
||||||
_events[eventType] = {};
|
|
||||||
$canvas.addEventListener(eventType,function(e){
|
|
||||||
var position = _.getPosition(e);
|
|
||||||
_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){
|
|
||||||
var key = 's'+_index+'i'+item.index;
|
|
||||||
if(_events[eventType][key]){
|
|
||||||
_events[eventType][key](e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_events[eventType]['s'+this.stage.index+'i'+this.index] = callback.bind(this); //绑定作用域
|
|
||||||
};
|
|
||||||
//地图对象构造器
|
|
||||||
var Map = function(options){
|
|
||||||
options = options||{};
|
|
||||||
var settings = {
|
|
||||||
x:0, //地图起点坐标
|
|
||||||
y:0,
|
|
||||||
size:20, //地图单元的宽度
|
|
||||||
data:[], //地图数据
|
|
||||||
stage:null, //布景
|
|
||||||
x_length:0, //二维数组x轴长度
|
|
||||||
y_length:0, //二维数组y轴长度
|
|
||||||
update:function(){}, //更新地图数据
|
|
||||||
draw:function(){}, //绘制地图
|
|
||||||
};
|
|
||||||
for(var i in settings){
|
|
||||||
this[i] = options[i]||settings[i];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//获取地图上某点的值
|
|
||||||
Map.prototype.get = function(x,y){
|
|
||||||
if(this.data[y]&&typeof this.data[y][x]!='undefined'){
|
|
||||||
return this.data[y][x];
|
|
||||||
}
|
|
||||||
return -1;
|
|
||||||
};
|
|
||||||
//地图坐标转画布坐标
|
|
||||||
Map.prototype.coord2position = function(cx,cy){
|
|
||||||
return {
|
|
||||||
x:this.x+cx*this.size+this.size/2,
|
|
||||||
y:this.y+cy*this.size+this.size/2
|
|
||||||
};
|
|
||||||
};
|
|
||||||
//画布坐标转地图坐标
|
|
||||||
Map.prototype.position2coord = function(x,y){
|
|
||||||
var fx = (x-this.x)%this.size-this.size/2;
|
|
||||||
var fy = (y-this.y)%this.size-this.size/2;
|
|
||||||
return {
|
|
||||||
x:Math.floor((x-this.x)/this.size),
|
|
||||||
y:Math.floor((y-this.y)/this.size),
|
|
||||||
offset:Math.sqrt(fx*fx+fy*fy)
|
|
||||||
};
|
|
||||||
};
|
|
||||||
//寻址算法
|
|
||||||
Map.prototype.finder = function(param){
|
|
||||||
var defaults = {
|
|
||||||
map:null,//this.data,
|
|
||||||
start:{},
|
|
||||||
end:{}
|
|
||||||
};
|
|
||||||
var options = (function(target, params) {
|
|
||||||
for (var prop in params) {
|
|
||||||
target[prop] = params[prop];
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
})(defaults,param);
|
|
||||||
var result = [];
|
|
||||||
if(options.map[options.start.y][options.start.x]||options.map[options.end.y][options.end.x]){ //当起点或终点设置在墙上
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
var finded = false;
|
|
||||||
var y_length = options.map.length;
|
|
||||||
var x_length = options.map[0].length;
|
|
||||||
var steps = []; //步骤的映射
|
|
||||||
for(var y=y_length;y--;){
|
|
||||||
steps[y] = [];
|
|
||||||
for(var x=x_length;x--;){
|
|
||||||
steps[y][x] = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var _render = function(list){
|
|
||||||
var new_list = [];
|
|
||||||
var next = function(from,to){
|
|
||||||
if(!finded){
|
|
||||||
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;
|
|
||||||
to.y = (to.y+y_length)%y_length;
|
|
||||||
to.change = 1;
|
|
||||||
}
|
|
||||||
if(to.x==options.end.x&&to.y==options.end.y){
|
|
||||||
steps[to.y][to.x] = from;
|
|
||||||
finded = true;
|
|
||||||
}else if(!steps[to.y][to.x]){
|
|
||||||
steps[to.y][to.x] = from;
|
|
||||||
new_list.push(to);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
for(var i=0,len=list.length;i<len;i++){
|
|
||||||
var current = list[i];
|
|
||||||
next(current,{y:current.y+1,x:current.x});
|
|
||||||
next(current,{y:current.y,x:current.x+1});
|
|
||||||
next(current,{y:current.y-1,x:current.x});
|
|
||||||
next(current,{y:current.y,x:current.x-1});
|
|
||||||
}
|
|
||||||
if(!finded&&new_list.length){
|
|
||||||
_render(new_list);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_render([options.start]);
|
|
||||||
if(finded){
|
|
||||||
var current=options.end;
|
|
||||||
while(current.x!=options.start.x||current.y!=options.start.y){
|
|
||||||
result.unshift(current);
|
|
||||||
current=steps[current.y][current.x];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
//布景对象构造器
|
|
||||||
var Stage = function(options){
|
|
||||||
options = options||{};
|
|
||||||
var settings = {
|
|
||||||
status:1, //布景状态,1表示正常,0表示非活动
|
|
||||||
map:null, //布景地图对象
|
|
||||||
audio:[], //音频资源
|
|
||||||
images:[], //图片资源
|
|
||||||
items:[] //对象队列
|
|
||||||
};
|
|
||||||
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;
|
|
||||||
var f = 0; //帧数计算
|
|
||||||
var stage = this;
|
|
||||||
var fn = function(){
|
|
||||||
_context.clearRect(0,0,_.width,_.height); //清除画布
|
|
||||||
f++;
|
|
||||||
if(stage.map){
|
|
||||||
stage.map.update();
|
|
||||||
stage.map.draw(_context);
|
|
||||||
}
|
|
||||||
if(stage.items.length){
|
|
||||||
stage.items.forEach(function(item,index){
|
|
||||||
if(stage.status!=2&&item.status!=2){ //对象及布景状态不为暂停
|
|
||||||
if(!(f%item.frames)){
|
|
||||||
item.times = f/item.frames; //计数器
|
|
||||||
}
|
|
||||||
if(stage.map&&item.type){
|
|
||||||
item.coord = stage.map.position2coord(item.x,item.y);
|
|
||||||
}
|
|
||||||
item.update();
|
|
||||||
}
|
|
||||||
item.draw(_context);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_hander = requestAnimationFrame(fn);
|
|
||||||
};
|
|
||||||
this.stop();
|
|
||||||
_hander = requestAnimationFrame(fn);
|
|
||||||
};
|
|
||||||
//动画结束
|
|
||||||
Stage.prototype.stop = function(){
|
|
||||||
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame;
|
|
||||||
_hander&&cancelAnimationFrame(_hander);
|
|
||||||
};
|
|
||||||
//添加对象
|
|
||||||
Stage.prototype.createItem = function(options){
|
|
||||||
var item = new Item(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);
|
|
||||||
//动态属性
|
|
||||||
this.map = map;
|
|
||||||
map.stage = this;
|
|
||||||
map.y_length = map.data.length;
|
|
||||||
map.x_length = map.data[0].length;
|
|
||||||
return map;
|
|
||||||
};
|
|
||||||
//绑定事件
|
|
||||||
Stage.prototype.bind = function(eventType,callback){
|
|
||||||
if(!_events[eventType]){
|
|
||||||
_events[eventType] = {};
|
|
||||||
window.addEventListener(eventType,function(e){
|
|
||||||
var key = 's' + _index;
|
|
||||||
if(_events[eventType][key]){
|
|
||||||
_events[eventType][key](e);
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_events[eventType]['s'+this.index] = callback.bind(this); //绑定事件作用域
|
|
||||||
};
|
|
||||||
//事件坐标
|
|
||||||
this.getPosition = function(e){
|
|
||||||
var box = $canvas.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x:e.clientX-box.left*(_.width/box.width),
|
|
||||||
y:e.clientY-box.top*(_.height/box.height)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
//创建布景
|
|
||||||
this.createStage = function(options){
|
|
||||||
var stage = new Stage(options);
|
|
||||||
stage.index = _stages.length;
|
|
||||||
_stages.push(stage);
|
|
||||||
return stage;
|
|
||||||
};
|
|
||||||
//下个布景
|
|
||||||
this.nextStage = function(){
|
|
||||||
if(_index<_stages.length-1){
|
|
||||||
_stages[_index] = 0;
|
|
||||||
_index++;
|
|
||||||
_stages[_index].start();
|
|
||||||
}else{
|
|
||||||
throw new Error('unfound new stage.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//初始化游戏引擎
|
|
||||||
this.init = function(){
|
|
||||||
_index = 0;
|
|
||||||
if(_stages[_index]){
|
|
||||||
_stages[_index].start();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
16
index.html
16
index.html
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf8">
|
|
||||||
<title>Pac-Man . 吃豆游戏</title>
|
|
||||||
<style>
|
|
||||||
*{padding:0;margin:0;}
|
|
||||||
canvas{display:block;background: #000;margin:0 auto;line-height:36px;text-align: center;color:#999;}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas" width="960" height="640">Canvas not supported</canvas>
|
|
||||||
<script src="game.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
482
index.js
482
index.js
@ -1,482 +0,0 @@
|
|||||||
//主程序,业务逻辑
|
|
||||||
(function(){
|
|
||||||
var game = new Game('canvas');
|
|
||||||
//启动页
|
|
||||||
(function(){
|
|
||||||
var stage = game.createStage();
|
|
||||||
stage.bind('keydown',function(e){
|
|
||||||
switch(e.keyCode){
|
|
||||||
case 13:
|
|
||||||
case 32:
|
|
||||||
game.nextStage();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//logo
|
|
||||||
stage.createItem({
|
|
||||||
x:game.width/2,
|
|
||||||
y:game.height*.45,
|
|
||||||
width:100,
|
|
||||||
height:100,
|
|
||||||
frames:10,
|
|
||||||
draw:function(context){
|
|
||||||
context.fillStyle = '#FC3';
|
|
||||||
context.beginPath();
|
|
||||||
if(this.times%2){
|
|
||||||
context.arc(this.x,this.y,this.width/2,.20*Math.PI,1.80*Math.PI,false);
|
|
||||||
}else{
|
|
||||||
context.arc(this.x,this.y,this.width/2,.01*Math.PI,1.99*Math.PI,false);
|
|
||||||
}
|
|
||||||
context.lineTo(this.x,this.y);
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
context.fillStyle = '#000';
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(this.x+5,this.y-27,7,0,2*Math.PI,false);
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//游戏名
|
|
||||||
stage.createItem({
|
|
||||||
x:game.width/2,
|
|
||||||
y:game.height*.6,
|
|
||||||
draw:function(context){
|
|
||||||
context.font = 'bold 42px Helvetica';
|
|
||||||
context.textAlign = 'center';
|
|
||||||
context.textBaseline = 'middle';
|
|
||||||
context.fillStyle = '#FFF';
|
|
||||||
context.fillText('Pac-Man',this.x,this.y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//版权信息
|
|
||||||
stage.createItem({
|
|
||||||
x:game.width-12,
|
|
||||||
y:game.height-5,
|
|
||||||
draw:function(context){
|
|
||||||
context.font = '14px Helvetica';
|
|
||||||
context.textAlign = 'right';
|
|
||||||
context.textBaseline = 'bottom';
|
|
||||||
context.fillStyle = '#AAA';
|
|
||||||
context.fillText('© passer-by.com',this.x,this.y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
//游戏主程序
|
|
||||||
(function(){
|
|
||||||
var MAP_ORIENTATION = { //地图方向
|
|
||||||
'38':0,
|
|
||||||
'39':1,
|
|
||||||
'40':2,
|
|
||||||
'37':3
|
|
||||||
},
|
|
||||||
MAP_DATA = [ //地图数据
|
|
||||||
[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,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,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,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,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
|
|
||||||
[1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],
|
|
||||||
[0,0,0,0,0,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,0,0,0,0,0],
|
|
||||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
|
||||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
|
||||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
|
||||||
[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
|
|
||||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
|
||||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
|
||||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
|
||||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
|
||||||
[1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],
|
|
||||||
[1,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,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
|
||||||
[1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],
|
|
||||||
[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
|
|
||||||
[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
|
|
||||||
[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
|
|
||||||
[1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],
|
|
||||||
[1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,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]
|
|
||||||
],
|
|
||||||
MAP_SIZE = 20; //地图大小
|
|
||||||
var stage = game.createStage();
|
|
||||||
stage.bind('keydown',function(e){
|
|
||||||
switch(e.keyCode){
|
|
||||||
case 13:
|
|
||||||
case 32:
|
|
||||||
this.status = this.status==2?1:2;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//绘制地图
|
|
||||||
var map = stage.createMap({
|
|
||||||
x:50,
|
|
||||||
y:10,
|
|
||||||
data:MAP_DATA,
|
|
||||||
draw:function(context){
|
|
||||||
var y_length = this.data.length;
|
|
||||||
var x_length = this.data[0].length;
|
|
||||||
for(var j=0; j<this.y_length; j++){
|
|
||||||
for(var i=0; i<this.x_length; i++){
|
|
||||||
context.lineWidth = 2;
|
|
||||||
context.strokeStyle="#09C";
|
|
||||||
if(this.get(i,j)){
|
|
||||||
var code = 0;
|
|
||||||
if(this.get(i,j-1)&&!(this.get(i-1,j-1)&&this.get(i+1,j-1)&&this.get(i-1,j)&&this.get(i+1,j))){
|
|
||||||
if(j){
|
|
||||||
code += 1000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.get(i+1,j)&&!(this.get(i+1,j-1)&&this.get(i+1,j+1)&&this.get(i,j-1)&&this.get(i,j+1))){
|
|
||||||
if(i<x_length-1){
|
|
||||||
code += 100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.get(i,j+1)&&!(this.get(i-1,j+1)&&this.get(i+1,j+1)&&this.get(i-1,j)&&this.get(i+1,j))){
|
|
||||||
if(j<y_length-1){
|
|
||||||
code += 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.get(i-1,j)&&!(this.get(i-1,j-1)&&this.get(i-1,j+1)&&this.get(i,j-1)&&this.get(i,j+1))){
|
|
||||||
if(i){
|
|
||||||
code += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(code){
|
|
||||||
var pos = this.coord2position(i,j);
|
|
||||||
switch(code){
|
|
||||||
case 1100:
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(pos.x+this.size/2,pos.y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
break;
|
|
||||||
case 110:
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(pos.x+this.size/2,pos.y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
break;
|
|
||||||
case 11:
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(pos.x-this.size/2,pos.y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
break;
|
|
||||||
case 1001:
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(pos.x-this.size/2,pos.y-this.size/2,this.size/2,0,.5*Math.PI,false);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
var arr = String.prototype.split.call(code,'');
|
|
||||||
if(+arr.pop()){
|
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(pos.x,pos.y);
|
|
||||||
context.lineTo(pos.x-this.size/2,pos.y);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
}
|
|
||||||
if(+arr.pop()){
|
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(pos.x,pos.y);
|
|
||||||
context.lineTo(pos.x,pos.y+this.size/2);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
}
|
|
||||||
if(+arr.pop()){
|
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(pos.x,pos.y);
|
|
||||||
context.lineTo(pos.x+this.size/2,pos.y);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
}
|
|
||||||
if(+arr.pop()){
|
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(pos.x,pos.y);
|
|
||||||
context.lineTo(pos.x,pos.y-this.size/2);
|
|
||||||
context.stroke();
|
|
||||||
context.closePath();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//主角
|
|
||||||
var pos = map.coord2position(14,23);
|
|
||||||
var player = stage.createItem({
|
|
||||||
x:pos.x-MAP_SIZE/2,
|
|
||||||
y:pos.y,
|
|
||||||
width:30,
|
|
||||||
height:30,
|
|
||||||
type:1,
|
|
||||||
orientation:3,
|
|
||||||
speed:2,
|
|
||||||
frames:10,
|
|
||||||
update:function(){
|
|
||||||
var coord = this.coord;
|
|
||||||
if(!coord.offset){
|
|
||||||
if(typeof this.control.orientation!='undefined'){
|
|
||||||
switch(this.control.orientation){
|
|
||||||
case 0:
|
|
||||||
if(!map.get(coord.x,coord.y-1)){
|
|
||||||
this.orientation = this.control.orientation;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
if(!map.get(coord.x+1,coord.y)){
|
|
||||||
this.orientation = this.control.orientation;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
if(!map.get(coord.x,coord.y+1)){
|
|
||||||
this.orientation = this.control.orientation;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
if(!map.get(coord.x-1,coord.y)){
|
|
||||||
this.orientation = this.control.orientation;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.control = {};
|
|
||||||
switch(this.orientation){
|
|
||||||
case 0:
|
|
||||||
var value = map.get(coord.x,coord.y-1);
|
|
||||||
if(value==0){
|
|
||||||
this.y-=this.speed;
|
|
||||||
}else if(value<0){
|
|
||||||
this.y += map.size*(map.y_length-1);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
var value = map.get(coord.x+1,coord.y);
|
|
||||||
if(value==0){
|
|
||||||
this.x+=this.speed;
|
|
||||||
}else if(value<0){
|
|
||||||
this.x -= map.size*(map.x_length-1);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
var value = map.get(coord.x,coord.y+1);
|
|
||||||
if(value==0){
|
|
||||||
this.y+=this.speed;
|
|
||||||
}else if(value<0){
|
|
||||||
this.y -= map.size*(map.y_length-1);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
var value = map.get(coord.x-1,coord.y);
|
|
||||||
if(value==0){
|
|
||||||
this.x-=this.speed;
|
|
||||||
}else if(value<0){
|
|
||||||
this.x += map.size*(map.x_length-1);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
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 = '#FC3';
|
|
||||||
context.beginPath();
|
|
||||||
switch(this.orientation){
|
|
||||||
case 0:
|
|
||||||
if(this.times%2){
|
|
||||||
context.arc(this.x,this.y,this.width/2,1.70*Math.PI,1.30*Math.PI,false);
|
|
||||||
}else{
|
|
||||||
context.arc(this.x,this.y,this.width/2,1.51*Math.PI,1.49*Math.PI,false);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
if(this.times%2){
|
|
||||||
context.arc(this.x,this.y,this.width/2,.20*Math.PI,1.80*Math.PI,false);
|
|
||||||
}else{
|
|
||||||
context.arc(this.x,this.y,this.width/2,.01*Math.PI,1.99*Math.PI,false);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
if(this.times%2){
|
|
||||||
context.arc(this.x,this.y,this.width/2,.70*Math.PI,.30*Math.PI,false);
|
|
||||||
}else{
|
|
||||||
context.arc(this.x,this.y,this.width/2,.51*Math.PI,.49*Math.PI,false);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
if(this.times%2){
|
|
||||||
context.arc(this.x,this.y,this.width/2,1.20*Math.PI,.80*Math.PI,false);
|
|
||||||
}else{
|
|
||||||
context.arc(this.x,this.y,this.width/2,1.01*Math.PI,.99*Math.PI,false);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
context.lineTo(this.x,this.y);
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
stage.bind('keydown',function(e){
|
|
||||||
player.control = {orientation:MAP_ORIENTATION[e.keyCode]};
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
game.init();
|
|
||||||
game.nextStage(); //测试游戏主布景
|
|
||||||
})();
|
|
||||||
Loading…
x
Reference in New Issue
Block a user