浏览 5283 次
|
锁定老帖子 主题：YUI3框架下的精灵岛移植
精华帖 (0) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-26
最后修改：2010-05-27
Google首页的pacman 很有意思，可pacman对我似乎太遥远，不由想起了7年前没有电脑的时候，唯一的智能电器就是文曲星，而且下载游戏超级麻烦，当时一个比较著名的游戏：电脑蛙蛙GvBasic开发的精灵岛 挺好玩，我就一段段地把代码输进去了，那时候真是很佩服能写那么长代码的大虾：），虽然Basic，Goto看得晕头转向....
这两天受google影响，就把精灵岛移植到浏览器下了。
演示：
p 键：开始／暂停游戏 方向键控制方向
截图：
对应文曲星下：
代码：
难度主要不在算法，而在于如何用面向对象的设计来改造Basic，我采用YUI3的OOP架构，主要就是利用Attribute的apo以及事件支持
调用： <script type="text/javascript" src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI({
modules: {
EidolonGame: {
fullpath: 'eidolon.js',
requires: ['event', 'base', 'node']
}
}
}).use("node", "event", "base","EidolonGame",
function(Y) {
//game canvas中渲染游戏
var g=Y.EidolonGame("game");
});
结构：
YUI.add('EidolonGame', function (Y) {
/*
缩放倍数
*/
var ZOOM = 3;
/*
底层图形引擎
*/
var GraphicUtils = {
initCanvas: function (id) {
},
unDraw: function (XX, YY, l) {
},
drawEidolon: function (XX, YY) {
},
drawDevil: function (XX, YY) {
}
..........
}
/*
地图字典
*/
var MapConfig = (function () {
return {
/**
插入关卡
@map:关
**/
insertMap: function (map) {
},
/**
@gen{Function} 对应关标志处理函数
**/
insertGens: function (gen) {
Y.mix(mapGen, gen);
},
/**
选择制定关卡
**/
drawMap: function (level) {
}
};
})();
/**
生物，恶魔，精灵公共父类
**/
function Creature(config) {
}
Creature.NAME = "Creature";
Creature.ATTRS = {
/*
位置属性
*/
pos: {
},
/*
所在游戏
*/
game: {},
/*
当前移动方位
*/
direction: {
}
};
Y.extend(Creature, Y.Base, {
/*
渲染生物
*/
draw: function () {
},
/*
搽除
*/
unDraw: function () {
}
});
/*
精灵
*/
function Eidolon(config) {
}
Y.extend(Eidolon, Creature, {
initializer: function (cfg) {
/*
位置属性改变处理
*/
this.after("posChange", this._posChange, this);
},
/*
根据当前方移动
*/
move: function () {
}
});
/*
恶魔
*/
function Devil(config) {
}
Y.extend(Devil, Creature, {
initializer: function (cfg) {
/*
位置属性改变处理函数
*/
this.after("posChange", this._posChange, this);
},
/*
撞墙或者到了思考点，就思考下
*/
think: function () {
},
/*
AI 移动
*/
move: function () {
}
});
/*
心
*/
function Heart(config) {
}
Y.extend(Heart, Y.Base, {
/*
随机位置显示
*/
show: function () {
}
});
/*
游戏引擎
*/
function Game(config) {
}
Game.NAME = "Game";
Game.ATTRS = {
//地图
map: {
},
//当前关
level: {
},
//当前精灵
eidolon: {
},
//当前恶魔
devil: {
},
//精灵生命
life: {
},
//最多生命数
max_life: {
},
//收集心数
eats: {
},
//过关收集心上限
max_eat: {
},
//是否暂停
waitFlag: {
},
//心产生器
heart: {
}
}
};
Y.extend(Game, Y.Base, {
/*
游戏缩放
*/
zoomAdjust: function (z) {
},
initializer: function () {
/*
对应属性变化处理
*/
this.after("waitFlagChange", this._waitFlagChange, this);
this.after("lifeChange", this._lifeChange, this);
this.after("eatsChange", this._eatsChange, this);
this.on("eatsChange", this._onEatsChange, this);
this.after("levelChange", this._levelChange, this);
this.on("levelChange", this._onLevelChange, this);
this.on("lifeChange", this._onLifeChange, this);
/*
键盘操作初始化
*/
Y.one(document).on("keydown", function (e) {
},
this);
this.start();
},
/*
开始游戏
*/
start: function () {
},
/*
死了？继续游戏
*/
startLife: function () {
},
/*
恶魔回调，吃精灵
*/
die: function () {
//全部死光，才reset eats
},
/*
精灵回调，收集心
*/
eat: function () {
},
/*
模拟时钟
*/
tick: function () {
}
});
Y.EidolonGame = function (id, cfg) {
if (GraphicUtils.initCanvas(id)) {
return new Game(cfg);
} else {
alert("Browser too old,do not use ie.");
}
};
});
扩展性考虑：
1.可以设置各种游戏属性：
Y.EidolonGame(canvasId,{
//设置 Game 属性
//查看 Game.ATTRS
//可以设置 life 生命数，max_eat 过关条件
//也可以 对实例 set(attr,value)设置，与 yui3 attribute 保持一致
})
2.可以定制地图：
g=Y.EidolonGame(cavasId,cfg)
// 为地图配置
map =g.get("map")
//map 包含操作：
/**
插入关卡
@map:关
**/
insertMap
/**
@gen{Function} 对应关标志处理函数
**/
insertGens
问题：
1.暂不支持 IE，有空试试 excanvas 2.关卡暂时只有15个，很容易扩展，查看 MapConfig 对象即可。 3.直接做一个GvBasic解释器不知可行否，很有难度，渲染屏幕到 canvas，basic的文件操作映射到 localStorage
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-27
初中 没好好上过课，一直在用文曲星编游戏
严重荒废了学业 那时候拿的是pc1000，每天都对看不懂的peek代码耿耿于怀。。 |
| 返回顶楼 | |
|
发表时间：2010-05-27
就应为对编程有兴趣，才有现在编程的你撒
|
| 返回顶楼 | |
|
发表时间：2010-05-27
基本上都是封装好的，自己能设置的太少了
|
| 返回顶楼 | |
|
发表时间：2010-05-27
caowei3047 写道 基本上都是封装好的，自己能设置的太少了 Y.EidolonGame 么 ，我考虑了可扩展性的，可以看下demo页面调用 1.可以设置各种游戏属性： 可以设置 zoom，可以设置 level，可以传递 config 来生成 game 实例
Y.EidolonGame(canvasId,{
//设置 Game 属性
//查看 Game.ATTRS
//可以设置 life 生命数，max_eat 过关条件
//也可以 对实例 set(attr,value)设置，与 yui3 attribute 保持一致
})
2.可以定制地图：
g=Y.EidolonGame(cavasId,cfg)
map =g.get("map") // 为地图配置
//map 包含操作：
/**
插入关卡
@map:关
**/
insertMap
/**
@gen{Function} 对应关标志处理函数
**/
insertGens
具体地图格式看看贴子源码模块内的 MapConfig 对象 |
| 返回顶楼 | |
|
发表时间：2010-05-28
楼主,我关注你有一段时间了.发现你时间貌似很充裕.经常写博.而且都非常不错.实在是佩服得很呢.
不知道你是什么做到的,请教一二. |
| 返回顶楼 | |
|
发表时间：2010-05-29
楼主是TAOBAO前端中级工程师吧
|
| 返回顶楼 | |
