updated 添加启动动画
This commit is contained in:
郑浩乐
parent
103e166072
commit
e2965f8b77
91
index.html
91
index.html
@ -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
5
index.js
Normal file
@ -0,0 +1,5 @@
|
||||
//主程序,业务逻辑
|
||||
(function(){
|
||||
var game = new Game('canvas');
|
||||
game.launch();
|
||||
})();
|
||||
113
pacman.js
Normal file
113
pacman.js
Normal 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(){
|
||||
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user