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-01 00:41:40 +08:00
parent f85907d46d
commit f202f1f707
4 changed files with 228 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
game.js Normal file
View 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();
}
};
}

2
index.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<canvas id="canvas">Canvas not supported</canvas> <canvas id="canvas">Canvas not supported</canvas>
<script src="pacman.js"></script> <script src="game.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

68
index.js
View File

@ -1,5 +1,71 @@
//主程序,业务逻辑 //主程序,业务逻辑
(function(){ (function(){
var game = new Game('canvas'); 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
View File

@ -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
});
}