游戏引擎
分离代码，构建建议游戏引擎
This commit is contained in:
郑浩乐
parent
f85907d46d
commit
f202f1f707
160
game.js
Normal file
160
game.js
Normal file
@ -0,0 +1,160 @@
|
||||
'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:1, //对象类型
|
||||
status:1, //对象状态,1表示正常,0表示隐藏
|
||||
orientation:0, //当前定位方向,0表示上,1表示右,2表示下,3表示左
|
||||
vector:{ //目标坐标
|
||||
x:0,
|
||||
y:0
|
||||
},
|
||||
speed:1, //速度等级,内部计算器times多少帧变化一次
|
||||
update: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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
_events[eventType]['s'+this.stage.index+'i'+this.index] = callback;
|
||||
};
|
||||
//布景对象构造器
|
||||
var Stage = function(options){
|
||||
options = options||{};
|
||||
var settings = {
|
||||
map:{ //地图信息
|
||||
x:0, //地图起点坐标
|
||||
y:0,
|
||||
size:20, //地图单元的宽度
|
||||
data:[] //地图数据
|
||||
},
|
||||
status:1, //布景状态
|
||||
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); //清除画布
|
||||
if(stage.items.length){
|
||||
f++;
|
||||
stage.items.forEach(function(item,index){
|
||||
if(!(f%item.speed)){
|
||||
item.times = f/item.speed; //计数器
|
||||
}
|
||||
item.update(_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; //对象层级
|
||||
this.items.push(item);
|
||||
return item;
|
||||
};
|
||||
//绑定事件
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
_events[eventType]['s'+this.index] = callback;
|
||||
};
|
||||
//事件坐标
|
||||
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(_stages[_index+1]){
|
||||
_index++;
|
||||
_stages[_index].start();
|
||||
}else{
|
||||
throw new Error('unfound new stage.');
|
||||
}
|
||||
};
|
||||
//初始化游戏引擎
|
||||
this.init = function(){
|
||||
_index = 0;
|
||||
if(_stages[_index]){
|
||||
_stages[_index].start();
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas">Canvas not supported</canvas>
|
||||
<script src="pacman.js"></script>
|
||||
<script src="game.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
68
index.js
68
index.js
@ -1,5 +1,71 @@
|
||||
//主程序,业务逻辑
|
||||
(function(){
|
||||
var game = new Game('canvas');
|
||||
game.launch();
|
||||
//启动页
|
||||
(function(){
|
||||
var stage = game.createStage();
|
||||
stage.bind('keydown',function(e){
|
||||
game.nextStage();
|
||||
});
|
||||
//logo
|
||||
var item = stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.45,
|
||||
width:100,
|
||||
height:100,
|
||||
speed:10,
|
||||
update: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();
|
||||
}
|
||||
});
|
||||
item.bind('click',function(){
|
||||
console.log('不要点我！');
|
||||
});
|
||||
//游戏名
|
||||
var item2 = stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.6,
|
||||
update: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,
|
||||
update: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 stage = game.createStage();
|
||||
stage.bind('keydown',function(){
|
||||
console.log('没东西啦……还按！');
|
||||
});
|
||||
})();
|
||||
game.init();
|
||||
})();
|
||||
156
pacman.js
156
pacman.js
@ -1,156 +0,0 @@
|
||||
'use strict';
|
||||
//活动对象构造
|
||||
function Item(options){
|
||||
options = options||{};
|
||||
var _ = this;
|
||||
var settings = {
|
||||
x:0, //横坐标
|
||||
y:0, //纵坐标
|
||||
width:20, //宽
|
||||
height:20, //高
|
||||
type:1, //对象类型
|
||||
status:1, //对象状态,1表示正常
|
||||
orientation:0, //当前定位方向,0表示上,1表示右,2表示下,3表示左
|
||||
vector:{ //目标坐标
|
||||
x:0,
|
||||
y:0
|
||||
},
|
||||
speed:1, //速度等级,1表示与刷新频率一致
|
||||
update:function(){}, //更新参数信息
|
||||
draw:function(){} //绘制
|
||||
};
|
||||
for(var i in settings){
|
||||
_[i] = options[i]||settings[i];
|
||||
}
|
||||
}
|
||||
//游戏对象
|
||||
function Game(id,options){
|
||||
var _ = this;
|
||||
var _settings = {
|
||||
name:'Pac-Man', //游戏名称
|
||||
copyright:'passer-by.com', //版权信息
|
||||
width:960, //画布宽度
|
||||
height:640, //画布高度
|
||||
map:{ //地图信息
|
||||
x:0, //地图起点坐标
|
||||
y:0,
|
||||
size:20, //地图单元的宽度
|
||||
data:[]
|
||||
},
|
||||
audio:[], //音频资源
|
||||
images:[], //图片资源
|
||||
};
|
||||
for(i in options){
|
||||
_settings[i] = options[i];
|
||||
}
|
||||
var $canvas = document.getElementById(id);
|
||||
$canvas.width = _settings.width;
|
||||
$canvas.height = _settings.height;
|
||||
var _context = $canvas.getContext('2d'); //画布上下文环境
|
||||
var _items = []; //动画对象队列
|
||||
var _status, //页面状态
|
||||
_hander; //画布更新
|
||||
//动画开始
|
||||
this.startAnimate = function(callback,frame){
|
||||
frame = frame||1;
|
||||
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame;
|
||||
var t = 0; //帧数计算
|
||||
var fn = function(){
|
||||
t++;
|
||||
if(!(t%frame)){
|
||||
_context.clearRect(0,0,_settings.width,_settings.height); //清除画布
|
||||
callback(t/frame);
|
||||
}
|
||||
_hander = requestAnimationFrame(fn);
|
||||
};
|
||||
_.stopAnimate();
|
||||
_hander = requestAnimationFrame(fn);
|
||||
};
|
||||
//动画开始
|
||||
this.stopAnimate = function(){
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame;
|
||||
_hander&&cancelAnimationFrame(_hander);
|
||||
};
|
||||
//事件坐标
|
||||
this.windowToCanvas = function(x,y){
|
||||
var box = $canvas.getBoundingClientRect();
|
||||
return {
|
||||
x:x-box.left*(_settings.width/box.width),
|
||||
y:y-box.top*(_settings.height/box.height)
|
||||
};
|
||||
}
|
||||
//开始画面
|
||||
this.launch = function(){
|
||||
_status = 0;
|
||||
_.startAnimate(function(t){
|
||||
//logo
|
||||
_context.fillStyle = '#FC3';
|
||||
_context.beginPath();
|
||||
if(t%2){
|
||||
_context.arc(_settings.width/2,_settings.height*.45,50,.20*Math.PI,1.80*Math.PI,false);
|
||||
_context.lineTo(_settings.width/2,_settings.height*.45);
|
||||
}else{
|
||||
_context.arc(_settings.width/2,_settings.height*.45,50,.01*Math.PI,1.99*Math.PI,false);
|
||||
_context.lineTo(_settings.width/2,_settings.height*.45);
|
||||
}
|
||||
_context.closePath();
|
||||
_context.fill();
|
||||
_context.fillStyle = '#000';
|
||||
_context.beginPath();
|
||||
_context.arc(_settings.width/2+5,_settings.height*.45-27,7,0,2*Math.PI,false);
|
||||
_context.closePath();
|
||||
_context.fill();
|
||||
//游戏名
|
||||
_context.font = 'bold 42px Helvetica';
|
||||
_context.textAlign = 'center';
|
||||
_context.textBaseline = 'middle';
|
||||
_context.fillStyle = '#FFF';
|
||||
_context.fillText(_settings.name,_settings.width/2,_settings.height*.6);
|
||||
//版权信息
|
||||
_context.font = '14px Helvetica';
|
||||
_context.textAlign = 'right';
|
||||
_context.textBaseline = 'bottom';
|
||||
_context.fillStyle = '#AAA';
|
||||
_context.fillText('© '+_settings.copyright,_settings.width-12,_settings.height-5);
|
||||
},10);
|
||||
};
|
||||
//开始游戏
|
||||
this.start = function(){
|
||||
_status = 1;
|
||||
_.startAnimate(function(){
|
||||
|
||||
},10);
|
||||
};
|
||||
//更新画布
|
||||
this.update = function(){
|
||||
_startAnimate(function(t){
|
||||
_items.forEach(function(item,index){
|
||||
item.update(t);
|
||||
});
|
||||
});
|
||||
};
|
||||
//添加对象
|
||||
this.addItem = function(item){
|
||||
_items.push(item);
|
||||
};
|
||||
//条件嗅探
|
||||
this.render = function(){
|
||||
|
||||
};
|
||||
//绘图
|
||||
this.draw = function(){
|
||||
|
||||
};
|
||||
//事件
|
||||
//鼠标点击事件
|
||||
$canvas.addEventListener('mousedown',function(e){
|
||||
var position = _.windowToCanvas(e.clientX,e.clientY);
|
||||
if(!_status){
|
||||
_.start();
|
||||
}
|
||||
});
|
||||
$canvas.addEventListener('mouseup',function(e){
|
||||
var position = _.windowToCanvas(e.clientX,e.clientY);
|
||||
//React to the mouse down event
|
||||
});
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user