类似于别踩白块儿的阉割版游戏-别碰我的松鼠

来源：互联网发布：mac开机弹出icloud 编辑：程序博客网时间：2024/04/26 04:58

介绍

其中一个项目用到了别踩白块儿的游戏，想要做这种游戏，笔者一开始用的是网上开源的html5脚本—当然是那种压缩版的，慢慢跟着客户的要求改，生不如死，所以就重新用lufylegend写了一个。

游戏一般结构

一般小游戏都会有自己的图片，音效等等，所以，一般结构是：
资源加载—-界面初始化—-界面显示。

这游戏难点不多，或者说没有，就是要知道怎么用lufylegend，如何加载资源，如何排版，当然，角色的消灭，事件点击，物体运动效果都是需要知道的。
核心代码如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>    <meta name="apple-mobile-web-app-capable" content="yes"/>    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta content="telephone=no,email=no" name="format-detection">    <meta name="full-screen" content="true"/>    <meta name="screen-orientation" content="portrait"/>    <meta name="x5-fullscreen" content="true"/>    <meta name="360-fullscreen" content="true"/>    <style>        body{            padding: 0;            margin: 0;        }    </style>    <script type="text/javascript">        window.onerror =function(errorMessage, scriptURI, lineNumber) {            var erorMsg={                message: errorMessage,                script: scriptURI,                line: lineNumber            };            //alert(errorMessage);        };    </script>    <title>别再踩白块儿</title>    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>    <script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>    <script type="text/javascript" src="lufylegend-1.9.11.min.js"></script>    <script type="text/javascript" src="game.js"></script></head><body><div id="game" style=""></div><script type="text/javascript"></script><script type="text/javascript"></script><script type="text/javascript"></script><script type="text/javascript"></script></body></html>

var _domain_path="";var GameSettings={    limitTime:25 //游戏设定，这是当前游戏的限制时间，以秒为单位。    ,rows:5    ,max_rows_in_screen:8 //整个屏幕需要大多行填充。    ,show_rows_num:5 //通常显示多少行。必然少于max_rows_in_screen    ,columns:3    ,cellWidth:160    ,cellHeight:160    ,cellShakeTime:150 //单元格摇头动画单独一次的执行时间。    ,cellShakeDistance:5 //单元格摇头的相对距离。    ,cellFadeOutTime:160 //单元格消失时间。    ,cellMoveTime:160//单元格移动耗时。};var GameOptions={    width:480    ,height:800};var GameData={    score:0    ,beginTime:0    ,endTime:0    ,currentRowIndex:0 //游戏当前的行数是。。。以0开始。    ,userWantsStart:false    ,playing:false    ,busy:false //当前是否忙    ,showAnimation:false //是否正在执行动画。    ,timeOver:false //是否游戏结束    ,sinkPause:true //是否开始下沉动画。};var innerTools={    timeFormat:function(seconds){        var _seconds=parseInt(seconds);        var _s=_seconds%60;        var _m=parseInt((_seconds-_s)/60)%60;        var _str="";        if(_m<=9){            _str="0"+""+_m;        }        else{            _str=""+_m;        }        if(_s<=9){            _str=_str+":0"+_s;        }        else{            _str=_str+":"+_s;        }        return _str;    }};//--这是需要加载的各种资源。var resources=[];//--加载完成后得到的数据。，var resourceList={};function _addResource(name,path){    resources.push({        name:name        ,path:_domain_path+path        //,path:_domain_path+path    });}(function(){    //--加载图片素材。    _addResource("actor","Resources/actor.jpg");    _addResource("cell","Resources/cell.jpg");    _addResource("actor_error","Resources/actor_error.jpg");    _addResource("cell_error","Resources/cell_error.jpg");    _addResource("clock_yellow","Resources/clock-yellow.png");    _addResource("coin","Resources/coin.png");    //--音效。。    _addResource("audio_click","Resources/Music/click.mp3");    _addResource("audio_time_over","Resources/Music/time_over.mp3");    _addResource("audio_wrong","Resources/Music/wrong.mp3");})();//--这是游戏的主要方法。function game_main(){    console.log("游戏运行中...");    game_screen_setting();//游戏设置    game_preLoad();//游戏预加载。}//--游戏加载层。。var _loadingLayer={};//--设置屏幕为全屏或者其他。function game_screen_setting(){    LGlobal.align = LStageAlign.BOTTOM_MIDDLE;    //LGlobal.stageScale = LStageScaleMode.SHOW_ALL;    LGlobal.stageScale = LStageScaleMode.EXACT_FIT;    LSystem.screen(LStage.FULL_SCREEN);}//游戏预加载。function game_preLoad(){    _loadingLayer = new LoadingSample3();    LGlobal.stage.addChild(_loadingLayer);    //--这里开始要加载资源了。    LLoadManage.load(resources,function(progress){            _loadingLayer.setProgress(progress);        }        ,game_begin    );}function game_begin(_resource_loaded_object){    resourceList=_resource_loaded_object;    LGlobal.stage.removeChild(_loadingLayer);    //var graphics=new LGraphics();    // graphics.drawRect(1,'#00000',[170,50,100,100],true,'#cccccc');    //return;    GLOBAL_GAME.init();    console.log("加载完成，现在要开始渲染游戏了。");}init(30,"game",GameOptions.width,GameOptions.height,game_main);//--这里是游戏主体逻辑界面什么的。//--这是游戏的各种界面句柄管理。var Layers={    Layer_Main:{}    ,Layer_Clear:{}};var Sound_click={};var Sound_wrong={};var Sound_time_over={};//--main layerfunction LayerGameMain(__opts){    var _i_settings={        onInit:function(){}        ,onClickError:function(){        }    };    $.extend(_i_settings,__opts);    var _root_sprite=new LSprite();    var bgGroup=new LSprite();    var topBarGroup=new LSprite();    var scoreGroup=new LSprite();    var timeGroup=new LSprite();    var _cellGroup=new LSprite();    _cellGroup.x=0;    _cellGroup.y=0;    var _score_gold_coin_logo={};    var _score_text={};    var _time_tips={};    var _time_logo={};    var ActorList=[];    var Actor_min_index=0;    var Actor_max_index=0;    var viewActorList=[];//界面上的运作中的角色列表。    //--下面是头顶栏目。    var gameTopBar={        init:function(){            scoreGroup=new LSprite();            _score_gold_coin_logo=new LBitmap(new LBitmapData(resourceList["coin"]));            //_score_gold_coin_logo.anchor.setTo(0.5,0.5);            _score_text=new LTextField();            window.scoreGroup=scoreGroup;            scoreGroup.x=20;            scoreGroup.y=20;            window.scoreText=_score_text;            _time_logo=new LBitmap(new LBitmapData(resourceList["clock_yellow"]));            _time_tips=new LTextField();            //game.add.bitmapText(_time_logo.width+10, 8, 'flappy_font', innerTools.timeFormat(GameSettings.limitTime), 20); //当前分数            //--位置。            scoreGroup.x=20;            scoreGroup.y=20;            _score_gold_coin_logo.x=0;            _score_gold_coin_logo.y=0;            _score_text.x=30;            _score_text.y=5;            timeGroup.x=GameOptions.width-125;            timeGroup.y=20;            _time_logo.x=0;            _time_logo.y=0;            _time_tips.x=35;            _time_tips.y=5;            window.scoreLogo=_score_gold_coin_logo;            _score_gold_coin_logo.scaleX=0.5;            _score_gold_coin_logo.scaleY=0.5;            _score_text.text="0";            _time_tips.text="0";            //_time_tips.setType(LTextFieldType.INPUT);            //_score_text.setType(LTextFieldType.INPUT);            _score_text.size = 14;            _score_text.color = "#000000";            _time_tips.size=14;            _time_tips.color="#000000";            scoreGroup.addChild(_score_text);            scoreGroup.addChild(_score_gold_coin_logo);            timeGroup.addChild(_time_logo);            timeGroup.addChild(_time_tips);            topBarGroup.addChild(scoreGroup);            topBarGroup.addChild(timeGroup);            _root_sprite.addChild(topBarGroup);        }        ,setTimeTips:function(nowTimeCount){            _time_tips.text=innerTools.timeFormat(nowTimeCount);        }        ,showScore:function(scoreText){            _score_text.text=scoreText;        }        ,getGroupRoot:function(){            return topBarGroup;        }    };    //--填充背景格子。    function setBackgroundWithCells(clickHandler){        for(var i=0;i<GameSettings.rows;i++){            for(var j=0;j<GameSettings.columns;j++){                var __sprite={};                var _s_w=GameSettings.cellWidth;                var _s_h=GameSettings.cellHeight;                var _x=_s_w*j;                var _y=GameOptions.height-(i+1)*_s_h;                var tmpBitMap=new LBitmap(new LBitmapData(resourceList["cell"]));                var tmpBitMap_error=new LBitmap(new LBitmapData(resourceList["cell_error"]));                tmpBitMap_error.visible=false;                tmpBitMap.name="normal";                tmpBitMap_error.name="error";                __sprite=new LSprite();                __sprite.addChild(tmpBitMap);                __sprite.addChild(tmpBitMap_error);                __sprite.width=GameSettings.cellWidth;                __sprite.height=GameOptions.cellHeight;                console.log(_x,_y);                __sprite.x=_x;                __sprite.y=_y;                bgGroup.addChild(__sprite);                __sprite.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){                    console.log("点击了普通单元格");                    if(clickHandler){                        clickHandler(event);                    }                });            }        }        //--绘制线条、。        for(var i=0;i< GameSettings.rows;i++){            var _line_x1=0;            var _line_y1=0;            var _line_x2=0;            var _line_y2=0;            var _s_w=GameSettings.cellWidth;            var _s_h=GameSettings.cellHeight;            var _x=_s_w*j;            var _y=GameOptions.height-(i+1)*_s_h;            if(_y==0||_y>=GameOptions.height){                continue;            }            bgGroup.graphics.drawLine(1,'#70cbe5',[0,_y,GameOptions.width,_y]);        }        for(var j=0;j< GameSettings.columns;j++){            var _line_x1=0;            var _line_y1=0;            var _line_x2=0;            var _line_y2=0;            var _s_w=GameSettings.cellWidth;            var _s_h=GameSettings.cellHeight;            var _x=_s_w*j;            var _y=GameOptions.height-(i+1)*_s_h;            if(_x<=0||_x>=GameOptions.width){                continue;            }            bgGroup.graphics.drawLine(1,'#70cbe5',[_x,0,_x,GameOptions.height]);        }        //t4.graphics.drawLine(1,'#ff00ff',[0,0,200,200]);    }    //--这是自定义的猪脚格子。    function ActorCell(rowIndex,columnIndex,__opts){        var __child_root_=new LSprite();        var i_settings={            onClick:function(robj){            }        };        $.extend(i_settings,__opts);        var _i_data={            x:0            ,y:0            ,sequence:0        };        var _sprite_main=new LSprite();        _sprite_main.x=0;        _sprite_main.y=0;        var tmpBitMap=new LBitmap(new LBitmapData(resourceList["actor"]));        tmpBitMap.width=GameSettings.cellWidth-2;        tmpBitMap.height=GameSettings.cellHeight-2;        tmpBitMap.x=0;        tmpBitMap.y=0;        tmpBitMap.name="normal";        var tmpBitMap_error=new LBitmap(new LBitmapData(resourceList["actor_error"]));        tmpBitMap_error.width=GameSettings.cellWidth-2;        tmpBitMap_error.height=GameSettings.cellHeight-2;        tmpBitMap_error.x=0;        tmpBitMap_error.y=0;        tmpBitMap_error.name="error";        tmpBitMap_error.visible=false;        _sprite_main.addChild(tmpBitMap);        _sprite_main.addChild(tmpBitMap_error);        _sprite_main.addEventListener(LMouseEvent.MOUSE_DOWN,function(event){            console.log("点击了英雄单元格");            var _target = event.currentTarget;            window.target=_target;            var _theObj={                die:function(){                    var tween = LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:0,ease:Bounce.easeIn,onComplete:function(){                        _target.die();                        _target.remove();                    }});                }                ,getSequence:function(){                    return _target.sequence;                }                //--下层。                ,sink:function(){                    var _y=(viewActorList.length-4+1)*GameSettings.cellHeight;                    console.log(_y);                    //--好了，现在要补上一个sprite才行。。。                    var _random_column=parseInt(Math.random()*1000);                    _random_column=_random_column%3;                    var _r1=ActorCell(viewActorList.length,_random_column,{                        onClick:function(robj){                            _actorClickHandler(robj);                        }                    });                    _r1.setSequence(viewActorList.length);                    var _tmpSprite=_r1.getRoot();                    _tmpSprite.alpha=0;                    //--计算位置。                    var preUnit=viewActorList[viewActorList.length-1];                    var preUnitY=preUnit.getRoot().y;                    var _now_y= preUnitY-GameSettings.cellHeight;                    _tmpSprite.y=_now_y;                    ActorList.push(_r1);                    viewActorList.push(_r1);                    _cellGroup.addChild(_tmpSprite);                    //--逐渐显示效果。                    LTweenLite.to(_tmpSprite,GameSettings.cellFadeOutTime/1000,{alpha:1,ease:Bounce.easeIn,onComplete:function(){                    }});                    var __tween_idle=LTweenLite.to(_cellGroup,GameSettings.cellMoveTime/1000,{y:_y,onComplete:function(){                    }});                }                ,showError:function(callback){                    var _normalSprite=_target.getChildByName("normal");                    var _errorSprite=_target.getChildByName("error");                    var tween = LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:0,onComplete:function(){                        _normalSprite.visbile=false;                        _errorSprite.visible=true;                        LTweenLite.to(_target,GameSettings.cellFadeOutTime/1000,{alpha:1,onComplete:function(){                            if(callback){                                callback();                            }                        }});                    }});                }            };            if(i_settings.onClick){                window.robj=_theObj;                i_settings.onClick(_theObj);            }        });        var _returnObj={            setLocation:function(_row,_column){                var _line_x1=0;                var _line_y1=0;                var _line_x2=0;                var _line_y2=0;                var _s_w=GameSettings.cellWidth;                var _s_h=GameSettings.cellHeight;                var _x=_s_w*_column;                var _y=GameOptions.height-(_row+1)*_s_h;                _sprite_main.x=_x;                _sprite_main.y=_y;                _i_data.x=_x;                _i_data.y=_y;            }            ,getRoot:function(){                return _sprite_main;            }            ,setSequence:function(_seq){                _i_data.sequence=_seq;                _sprite_main.sequence=_seq;            }            ,getSequence:function(){                return _i_data.sequence;            }            ,getX:function(){                return _i_data.x;            }            ,getY:function()            {                return _i_data.y;            }        };        _returnObj.setLocation(rowIndex,columnIndex);        return _returnObj;    }    function _actorClickHandler(robj){        var _seq=robj.getSequence();        _seq=parseInt(_seq);        console.log("目前点中的sequence："+_seq);        if(GameData.playing==false&&_seq!=0){            console.log("尚未开始游戏。。");            return;        }        if(_seq==0){            GLOBAL_GAME.resetPlayStates();            //--开始进行下一步了。            Sound_click.play();            robj.die();            robj.sink();            return;        }        //--好了，假如是正式开始，那么就要判断点中的是不是需要点击的单元格了。        if(GameData.score==_seq-1){            console.log("正确。。");            GameData.score++;            Sound_click.play();            robj.die();            robj.sink();            gameTopBar.showScore(GameData.score);        }        else{            //--错误。            Sound_wrong.play();            GameData.playing=false;            robj.showError(function(){                GLOBAL_GAME.resetEndStates();                if(_i_settings.onClickError){                    _i_settings.onClickError();                }            });        }    }    //--设定初始化的点游戏角色界面    function setActorsList(){        for(var i=0;i< GameSettings.rows-1;i++){            var _random_column=parseInt(Math.random()*1000);            _random_column=_random_column%3;            var _r1=ActorCell(i+1,_random_column,{                onClick:function(robj){                    _actorClickHandler(robj);                }            });            _r1.setSequence(i);            ActorList.push(_r1);            viewActorList.push(_r1);            _cellGroup.addChild(_r1.getRoot());        }        window.actorList=ActorList;        _root_sprite.addChild(_cellGroup);        window.cellGroup=_cellGroup;    }    //--这是控制界面下沉滑动的逻辑。    function sink(){        var _y=(viewActorList.length-4+1)*GameSettings.cellHeight;        console.log(_y);        var __tween_idle=LTweenLite.to(cellGroup,GameSettings.cellMoveTime,{y:_y,ease:Bounce.easeIn,onComplete:function(){            //console.log("已经消失了。");        }});        return;        var _sep=10;        for(var i=0;i< viewActorList.length;i++){            var r1=viewActorList[i];            var sprite=r1.getRoot();            sprite.y=sprite.y+_sep;        }    }    var _white_cell_handler=function(event){        var _target = event.currentTarget;        if(GameData.playing==false){            console.log("尚未开始游戏。。");            return;        }        if(GameData.busy){            console.log("系统繁忙");            return;        }        if(GameData.timeOver){            console.log("游戏时间结束");            return;        }        if(GameData.showAnimation){            console.log("系统位移中。。");            return;        }        //--假如不是这些情况，那么可以判定，点击这个就是错了。。        Sound_wrong.play();        var _error_sprite=_target.getChildByName("error");        var _normal_sprite=_target.getChildByName("normal");        _normal_sprite.visible=false;        _error_sprite.visible=true;        GLOBAL_GAME.resetEndStates();        if(_i_settings.onClickError){            _i_settings.onClickError();        }    }    setBackgroundWithCells(_white_cell_handler);    bgGroup.x=0;    bgGroup.y=0;    _root_sprite.addChild(bgGroup);    setActorsList();    gameTopBar.init();    _root_sprite.addChild(topBarGroup);    //--添加    var returnObj={        getRoot:function(){            return _root_sprite;        }        ,setTimeTips:function(_time){            gameTopBar.setTimeTips(_time);        }        ,setSore:function(_score){            gameTopBar.setScore(_score);        }        ,sink:function(){            //sink();        }    };    return returnObj;}function LayerGameClear(__opts){    var _root_sprite=new LSprite();    var _bg=new LBitmap(new LBitmapData(resourceList["bg_main"]));    var _tips_clear=new LBitmap(new LBitmapData(resourceList["stage_clear"]));    var _score_bg=new LBitmap(new LBitmapData(resourceList["Dialog_Item"]));    var _score_text=new LTextField();    _score_text.color="#ffffff";    _score_text.size=18;    _score_text.text="0";    _tips_clear.x=GameOptions.width/2-265/2;    _tips_clear.y=GameOptions.height/2-158/2-100;    _score_bg.x=GameOptions.width/2-153/2;    _score_bg.y=GameOptions.height/2-47/2+20;    _score_text.x=GameOptions.width/2-15;    _score_text.y=GameOptions.height/2+10;    _root_sprite.addChild(_bg);    _root_sprite.addChild(_tips_clear);    _root_sprite.addChild(_score_bg);    _root_sprite.addChild(_score_text);    var returnObj={        setScore:function(score){            _score_text.text=score+'';        }        ,getRoot:function(){            return _root_sprite;        }    };    return returnObj;}var _layer_game_main={};var _layer_game_clear={};var GLOBAL_GAME={    init:function(){        var me=this;        console.log("pop star执行。");        me.initMusic();        _layer_game_main=LayerGameMain({            onClickError:function(){                me.onGameEnd();            }        });        Layers.Layer_Main=_layer_game_main.getRoot();        //Layers.Layer_Menu=_layer_game_menu.getRoot();        //Layers.Layer_Clear=_layer_game_clear.getRoot();        LGlobal.stage.addChild(Layers.Layer_Main);        me.initOnFrame();        _layer_game_main.setTimeTips(GameSettings.limitTime);    }    ,initMusic:function(){        Sound_click=new LSound(resourceList["audio_click"]);        Sound_wrong=new LSound(resourceList["audio_wrong"]);        Sound_time_over=new LSound(resourceList["audio_time_over"]);    }    //--设置相关参数状态。    ,resetPlayStates:function(){        GameData.timeOver=false;        GameData.playing=true;        GameData.beginTime=new Date().getTime();        GameData.busy=false;        GameData.sinkPause=false;    }    //--设置游戏结束状态。    ,resetEndStates:function(){        GameData.timeOver=true;        GameData.playing=false;        GameData.beginTime=new Date().getTime();        GameData.busy=false;        GameData.sinkPause=true;    }    //-这是对于全局舞台的相关帧率控制设置。    ,initOnFrame:function(){        var me=this;        LGlobal.stage.addEventListener(LEvent.ENTER_FRAME,function(event){            var layer = event.currentTarget;//        //每一帧，横坐标增长/减少==向右/向左移动一像素，方向取决于direction的正负//        layer.x += direction;//        //不停右移//        if(layer.x < 0){//          direction = 1;//        }//        //坐标大于700后，向左移//        if(layer.x > 700){//          direction = -1;//        }            //console.log(new Date());            //--假如游戏没有开始，那么就不执行。。。            if(GameData.playing==false){                return;            }            if(GameData.timeOver==true){                return;            }            var _nowTime=new Date().getTime();            var _passTime=parseInt((_nowTime-GameData.beginTime)/1000);            if(_passTime>=GameSettings.limitTime){                _layer_game_main.setTimeTips(0);                //GameData.timeOver=true;                Sound_time_over.play();                me.resetEndStates();                //LGlobal.stage.removeChild(Layers.Layer_Main);                //LGlobal.stage.addChild(Layers.Layer_Clear);                //_layer_game_main.showScore(GameData.score);                me.onGameEnd();                return;            }            _layer_game_main.setTimeTips(GameSettings.limitTime-_passTime);        });    }    ,onGameEnd:function(){        location.href="rankList.html?score="+GameData.score;    }};

运行结果

这里写图片描述

资源下载

下载资源

0 0