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

开始工程

Browse Source 
start
This commit is contained in:
郑浩乐 2015-12-31 08:09:47 +08:00
commit 557e045e61
1 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
index.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Eat Beans - 吃豆游戏</title>
<style>
*{padding:0;margin:0;}
canvas{display:block;background: #000;margin:0 auto;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//活动对象构造
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 = {
width:960, //画布宽度
height:640, //画布高度
view:{ //视图
x:0,
y:0,
width:640,
height:640
},
fresh:125, //画布刷新频率,一秒8帧
map:[], //地图信息
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 _t = 0; //内部计算器,交替帧数更新动画
var _hander = null; //画布更新
//动画停止
this.stop = function(){
_hander&&clearInterval(_hander);
};
//动画开始
this.start = function(){
_.stop();
_hander = setInterval(function(){ //定时刷新画布
_t++;
_items.forEach(function(item,index){
item.update(_t);
});
},settings.fresh);
};
//添加对象
this.addItem = function(item){
_items.push(item);
};
//条件嗅探
this.render = function(){
};
//绘图
this.draw = function(){
};
}
//主程序,业务逻辑
(function(){
var game = new Game('canvas');
game.start();
})();
</script>
</body>
</html>