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

updated 添加启动动画

Browse Source
This commit is contained in:
郑浩乐 2015-12-31 14:42:42 +08:00
parent 103e166072
commit e2965f8b77
3 changed files with 122 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@ -5,95 +5,12 @@
<title>Eat Beans - 吃豆游戏</title>
<style>
*{padding:0;margin:0;}
canvas{display:block;background: #000;margin:0 auto;}
canvas{display:block;background: #000;margin:0 auto;line-height:36px;text-align: center;color:#999;}
</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>
<canvas id="canvas">Canvas not supported</canvas>
<script src="pacman.js"></script>
<script src="index.js"></script>
</body>
</html>

5
index.js Normal file
View File

@ -0,0 +1,5 @@
//主程序,业务逻辑
(function(){
var game = new Game('canvas');
game.launch();
})();

113
pacman.js Normal file
View File

@ -0,0 +1,113 @@
'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:'Eat Beans', //游戏名称
width:960, //画布宽度
height:640, //画布高度
map:{ //地图信息
x:0, //地图起点坐标
y:0,
size:20, //地图单元的宽度
data:[]
},
fresh:100, //画布刷新频率,一秒10帧
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 = 0; //页面状态
var _t = 0; //内部计算器,交替帧数更新动画
var _hander = null; //画布更新
//开始画面
this.launch = function(){
_hander = setInterval(function(){
_t++;
var s = _t%4;
//清除画布
_context.clearRect(0,0,_settings.width,_settings.height);
//logo
_context.fillStyle = '#FC3';
_context.beginPath();
if(s<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*.618);
},_settings.fresh);
};
//动画停止
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(){
};
}