YUI3框架下的精灵岛移植

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