Google首页的pacman
很有意思,可pacman对我似乎太遥远,不由想起了7年前没有电脑的时候,唯一的智能电器就是文曲星,而且下载游戏超级麻烦,当时一个比较著名的游戏:电脑蛙蛙GvBasic开发的精灵岛
挺好玩,我就一段段地把代码输进去了,那时候真是很佩服能写那么长代码的大虾:),虽然Basic,Goto看得晕头转向....
这两天受google影响,就把精灵岛移植到浏览器下了。
演示:
p 键:开始/暂停游戏
方向键控制方向
注释源码
精灵岛演示(非IE)
截图:
对应文曲星下:
代码:
难度主要不在算法,而在于如何用面向对象的设计来改造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.可以设置各种游戏属性:
可以设置 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
问题:
1.暂不支持 IE,有空试试 excanvas
2.关卡暂时只有15个,很容易扩展,查看 MapConfig 对象即可。
3.直接做一个GvBasic解释器不知可行否,很有难度,渲染屏幕到 canvas,basic的文件操作映射到 localStorage
- 大小: 42.5 KB
- 大小: 22.6 KB
分享到:
相关推荐
本API说明文档是针对YUI框架开发的比较经典的帮助文档,对你进行YUI前台开发能提供非常大的帮助,希望对你的开发起到事半功倍的作用
yui框架集,内含多个demo,yui框架将ajax完美的包装,以及包含基于ajax的各种js组件,让开发人员可以缩短开发时间。
yui3-master.zip
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
这是一个完整的yui框架包,对开发很有用途!
从YUI2到YUI3看前端的演变
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
YUI-EXT使用详解,免费送给大家
本书作者便是在此背景下,以国外最优秀的JavaScript框架之一——Yahoo User Interface Library(简称YUI)的最新版本YUI 3.15为基础编写而成。本书通过通俗易懂的语言和大量丰富的实例,帮助读者解决实际生产环境...
Jquery、YUI、ExtJs 三大js主流框架,实现表单输入框的提示,错误验证的强大demo;
将yuicompressor-2.4.2.jar 放在c:下,将editor.js放在c:盘下。 将editor.js进行压缩 命令为: C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明: yuicompressor-2.4.2.jar 为工具包...
alloy_Liferay使用YUI封装的框架,含使用文档
yui对于开发者来说是绝对的好用,开发者福利,特献上最新版
YUI3 源码 非compress版 YUI3 源码 非compress版 YUI3 源码 非compress版