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

updated 游戏引擎动画函数优化

Browse Source
This commit is contained in:
mumuy 2016-04-20 14:58:12 +08:00
parent dd657d97c8
commit 35d89365ae
1 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
game.js
View File

@ -2,6 +2,33 @@
/* /*
* 小型游戏引擎 * 小型游戏引擎
*/ */
//动画处理
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
function Game(id,params){ function Game(id,params){
var _ = this; var _ = this;
params = params||{}; params = params||{};
@ -22,7 +49,7 @@ function Game(id,params){
var _context = $canvas.getContext('2d'); //画布上下文环境 var _context = $canvas.getContext('2d'); //画布上下文环境
var _stages = []; //布景对象队列 var _stages = []; //布景对象队列
var _events = {}; //事件集合 var _events = {}; //事件集合
var _index=0, //当前布景索引 var _index=0, //当前布景索引
_hander; //帧动画控制 _hander; //帧动画控制
//活动对象构造 //活动对象构造
var Item = function(params){ var Item = function(params){
@ -67,7 +94,7 @@ 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.index] = callback.bind(this); //绑定作用域
@ -77,7 +104,7 @@ function Game(id,params){
this._params = params||{}; this._params = params||{};
this._settings = { this._settings = {
x:0, //地图起点坐标 x:0, //地图起点坐标
y:0, y:0,
size:20, //地图单元的宽度 size:20, //地图单元的宽度
data:[], //地图数据 data:[], //地图数据
stage:null, //布景 stage:null, //布景
@ -270,15 +297,15 @@ function Game(id,params){
if(_events[eventType][key]){ if(_events[eventType][key]){
_events[eventType][key](e); _events[eventType][key](e);
} }
e.preventDefault(); e.preventDefault();
}); });
} }
_events[eventType]['s'+this.index] = callback.bind(this); //绑定事件作用域 _events[eventType]['s'+this.index] = callback.bind(this); //绑定事件作用域
}; };
//动画开始 //动画开始
this.start = function() { this.start = function() {
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame; // var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame;
var f = 0; //帧数计算 var f = 0; //帧数计算
var fn = function(){ var fn = function(){
var stage = _stages[_index]; var stage = _stages[_index];
_context.clearRect(0,0,_.width,_.height); //清除画布 _context.clearRect(0,0,_.width,_.height); //清除画布
@ -292,9 +319,9 @@ function Game(id,params){
map.update(); map.update();
map.draw(_context); map.draw(_context);
}); });
} }
if(stage.items.length){ if(stage.items.length){
stage.items.forEach(function(item){ stage.items.forEach(function(item){
if(!(f%item.frames)){ if(!(f%item.frames)){
item.times = f/item.frames; //计数器 item.times = f/item.frames; //计数器
} }
@ -317,7 +344,7 @@ function Game(id,params){
}; };
//动画结束 //动画结束
this.stop = function(){ this.stop = function(){
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame; // var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame;
_hander&&cancelAnimationFrame(_hander); _hander&&cancelAnimationFrame(_hander);
}; };
//事件坐标 //事件坐标
@ -358,4 +385,4 @@ function Game(id,params){
_index = 0; _index = 0;
this.start(); this.start();
}; };
} }