用pharser 开发 消灭星星游戏【草稿】

最新推荐文章于 2021-11-06 22:51:19 发布
最新推荐文章于 2021-11-06 22:51:19 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端 web开发 文章标签： 游戏 html5 消灭星星 popstar pharser-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdnight/article/details/50177249
版权

下面要说一说如何用pharser开发一个消灭星星的游戏。以后再慢慢完善文章及打包，现在先记录一下。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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="/static/lib/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="/static/lib/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="/static/vendor/laytpl/laytpl.js"></script>

  <script type="text/javascript" src="/static/game/phaser-2.4.2/phaser.min.js"></script>
</head>
<body>



<div id="game" style="margin: 0 auto;"></div>
<script>


  var GameSettings={
    limitTime:25 //游戏设定，这是当前游戏的限制时间，以秒为单位。
    ,rows:10

    ,max_rows_in_screen:8 //整个屏幕需要大多行填充。
    ,show_rows_num:5 //通常显示多少行。必然少于max_rows_in_screen
    ,columns:10

    ,cellWidth:48
    ,cellHeight:48

    ,cellShakeTime:150 //单元格摇头动画单独一次的执行时间。
    ,cellShakeDistance:5 //单元格摇头的相对距离。

    ,cellFadeOutTime:150 //单元格消失时间。
    ,cellMoveTime:200//单元格移动耗时。

  };


  var GameOptions={
    width:480
    ,height:800
  };
  //GameOptions.width=GameSettings.columns*GameSettings.cellWidth+(GameSettings.columns)*GameSettings.sepDistance;
  //GameOptions.height=GameSettings.max_rows_in_screen*GameSettings.cellHeight+(GameSettings.max_rows_in_screen)*GameSettings.sepDistance;
  console.log(GameOptions);
  //--写这些页游最好的方法是，宽度不变，高度随着手机来进行变化。



  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 game = new Phaser.Game(GameOptions.width,GameOptions.height,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例
  //--这是自适应手机屏幕的核心方法，用来缩放画布是、尺寸。
  function setSuitableSize(){
// set scaleMode and align
    var deviceW=$(window).width();
    var deviceH=$(window).height();
    var origW=GameOptions.width;
    var origH=GameOptions.height;
    this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
    this.game.scale.compatibility.forceMinimumDocumentHeight = true; // seems to do nothing
    this.game.scale.pageAlignHorizontally = true; // seems like I would not even need this
    this.game.scale.pageAlignVeritcally = true; // seems to do nothing

// calculate the scale factor
    var scaleFactor = deviceW / origW;
// set scale
    console.log(deviceH,origH,deviceW,origW);
    //--将这个换掉。
//    game.scale.setUserScale(scaleFactor, scaleFactor);
//    game.scale.refresh();
    var scaleX=deviceW/origW;
    var scaleY=deviceH/origH;

    console.log("scale x:"+scaleX,"scale y:"+scaleY);


    game.scale.setUserScale(scaleX, scaleY);
    game.scale.refresh();

// calculate the scaled dimensions of the canvas
    var canvasW = origW * scaleFactor;
    var canvasH = origH * scaleFactor;

// calculate the Top Distance
    var canvasTop = (deviceH - canvasH) / 2;
// make it a relevant string
    var canvasTop = canvasTop.toString() + 'px';

// get the after setUserScale() applied style attributes
//    this.currentStyle = this.game.canvas.getAttribute("style");
 add the marginTop to it
//    this.newStyle = this.currentStyle + 'margin-top: ' + canvasTop;
//
 set the attribute
//    this.game.canvas.setAttribute('style', this.newStyle);


    return;//我自己手动缩放，不要下面这个了，下面这个不智能也不自动坑爹啊。


    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;//THIS LINE IS NOT WELL DOCUMENTED IN PHASER AND ESSENTIAL FOR ANDROID TO WORK

    //game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
    game.scale.setShowAll();

    game.scale.startFullScreen();//WHAT MAKES THE FULL SCREEN WORK ON IPHONES
    game.scale.refresh();
  }


  window.game=game;
  game.States={};

  var GameData={
    score:0
    ,beginTime:0
    ,endTime:0
    ,currentRowIndex:0 //游戏当前的行数是。。。以0开始。
    ,userWantsStart:false
    ,playing:false
    ,busy:false //当前是否忙
    ,showAnimation:false //是否正在执行动画。
    ,timeOver:false //是否游戏结束
  };


  //--相关对象。
  //--boot场景。
  game.States.boot=function(){
    this.preload=function(){
      game.load.image("loading","assets/preloader.gif");//loading资源
      setSuitableSize();
    };
    this.create=function(){
      game.state.start("preload");
    };
  };

  game.States.preload=function(){
    var preloadSprite={};

    this.preload=function(){

      preloadSprite=game.add.sprite(parseInt((GameOptions.width)/2),parseInt((GameOptions.height)/2),"loading");

      preloadSprite.anchor.setTo(0.5,0.5);
      window.preloadSprite=preloadSprite;
      game.load.setPreloadSprite(preloadSprite);

      //--加载图片素材。
      game.load.image("bg_main","Resources/bg_mainscene.jpg");
      game.load.image("bg_menu","Resources/bg_menuscene.jpg");
      game.load.image("blue","Resources/blue.png");
      game.load.image("blue_heart","Resources/blue_heart.png");

      game.load.image("Cancel","Resources/Cancel.png");
      game.load.image("click_1","Resources/click_1.png");
      game.load.image("click_2","Resources/click_2.png");
      game.load.image("CloseNormal","Resources/CloseNormal.png");

      game.load.image("CloseSelected","Resources/CloseSelected.png");

      game.load.image("coin_add","Resources/coin_add.png");

      game.load.image("combo_1","Resources/combo_1.png");
      game.load.image("combo_2","Resources/combo_2.png");

      game.load.image("combo_3","Resources/combo_3.png");

      game.load.image("Dialog_bg","Resources/Dialog_bg.png");
      game.load.image("Dialog_bg2","Resources/Dialog_bg2.png");

      game.load.image("Dialog_Item","Resources/Dialog_Item.png");

      game.load.image("Dialog_Item2","Resources/Dialog_Item2.png");
      game.load.image("Dialog_Title","Resources/Dialog_Title.png");
      game.load.image("diamond","Resources/diamond.png");
      game.load.image("fireworks","Resources/fireworks.png");
      game.load.image("GameOver","Resources/GameOver.png");
      game.load.image("green","Resources/green.png");
      game.load.image("green_heart","Resources/green_heart.png");
      game.load.image("HelloWorld","Resources/HelloWorld.png");
      game.load.image("Help_1","Resources/Help_1.png");
      game.load.image("Help_2","Resources/Help_2.png");
      game.load.image("Item_pause","Resources/Item_pause.png");
      game.load.image("menu_about","Resources/menu_about.png");
      game.load.image("menu_CDKEY","Resources/menu_CDKEY.png");
      game.load.image("menu_continue","Resources/menu_continue.png");
      game.load.image("menu_continue2","Resources/menu_continue2.png");
      game.load.image("menu_continuegame","Resources/menu_continuegame.png");
      game.load.image("menu_help","Resources/menu_help.png");
      game.load.image("menu_lingjiang","Resources/menu_lingjiang.png");
      game.load.image("menu_lingqu","Resources/menu_lingqu.png");
      game.load.image("menu_money","Resources/menu_money.png");
      game.load.image("menu_sound_on","Resources/menu_sound_on.png");
      game.load.image("menu_sound_off","Resources/menu_sound_off.png");
      game.load.image("menu_start","Resources/menu_start.png");
      game.load.image("menu_Text","Resources/menu_Text.png");
      game.load.image("menu_top","Resources/menu_top.png");
      game.load.image("MrDu","Resources/MrDu.png");
      game.load.image("MrDu_choujiang1","Resources/MrDu_choujiang1.png");
      game.load.image("MrDu_choujiang2","Resources/MrDu_choujiang2.png");

      game.load.image("new","Resources/new.png");
      game.load.image("orange","Resources/orange.png");

      game.load.image("orange_heart","Resources/orange_heart.png");
      game.load.image("paint_arrow","Resources/paint_arrow.png");

      game.load.image("paint_back","Resources/paint_back.png");

      game.load.image("paint_bg","Resources/paint_bg.png");
      game.load.image("Pause","Resources/Pause.png");
      game.load.image("Props_Bomb","Resources/Props_Bomb.png");
      game.load.image("Props_Paint","Resources/Props_Paint.png");
      game.load.image("Props_Rainbow","Resources/Props_Rainbow.png");
      game.load.image("purple","Resources/purple.png");
      game.load.image("purple_heart","Resources/purple_heart.png");

      game.load.image("red","Resources/red.png");
      game.load.image("red_heart","Resources/red_heart.png");
      game.load.image("Shop_Onece","Resources/Shop_Onece.png");
      game.load.image("sound_on","Resources/sound_on.png");
      game.load.image("stage_clear","Resources/stage_clear.png");
      game.load.image("star","Resources/star.png");
      game.load.image("Title_CDKEY","Resources/Title_CDKEY.png");

      game.load.image("Title_choujiang","Resources/Title_choujiang.png");
      game.load.image("Title_Help","Resources/Title_Help.png");
      game.load.image("Title_OneceShop","Resources/Title_OneceShop.png");
      game.load.image("Title_Pause","Resources/Title_Pause.png");
      game.load.image("Title_QuickShop","Resources/Title_QuickShop.png");
      game.load.image("Title_shop","Resources/Title_shop.png");
      game.load.image("zengsong","Resources/zengsong.png");
      game.load.image("coin","Resources/coin.png");
      game.load.image("clock_yellow","Resources/clock-yellow.png");

      //--音效。。
      game.load.audio("music","Resources/music.ogg");
      game.load.audio("audio_beep","Resources/Music/beep.ogg");

      game.load.audio("audio_clear","Resources/Music/clear.ogg");
      game.load.audio("audio_coin","Resources/Music/coin.ogg");
      game.load.audio("audio_coinsin","Resources/Music/coinsin.ogg");
      game.load.audio("audio_combo_1","Resources/Music/combo_1.ogg");
      game.load.audio("audio_combo_2","Resources/Music/combo_2.ogg");
      game.load.audio("audio_combo_3","Resources/Music/combo_3.ogg");
      game.load.audio("audio_pop","Resources/Music/pop.ogg");
      game.load.audio("audio_landing","Resources/Music/landing.ogg");
      game.load.audio("audio_NextGameRound","Resources/Music/NextGameRound.ogg");
      game.load.audio("audio_music","Resources/Music/music.ogg");
      game.load.audio("audio_Props_Bomb","Resources/Music/Props_Bomb.ogg");
      game.load.audio("audio_Props_Paint","Resources/Music/Props_Paint.ogg");
      game.load.audio("audio_Props_Rainbow","Resources/Music/Props_Rainbow.ogg");
      game.load.audio("audio_readygo","Resources/Music/readygo.ogg");
      game.load.audio("audio_select","Resources/Music/select.ogg");

      game.load.audio("audio_fireworks_01","Resources/Music/fireworks_01.wav");
      game.load.audio("audio_fireworks_02","Resources/Music/fireworks_02.wav");
      game.load.audio("audio_fireworks_03","Resources/Music/fireworks_03.wav");

      //--字体
      game.load.bitmapFont("flappy_font",
              "assets/fonts/flappyfont/flappyfont.png",
              "assets/fonts/flappyfont/flappyfont.fnt");
      return;
//      game.load.image("btn","assets/start-button.png");
//      game.load.bitmapFont("flappy_font",
//              "assets/fonts/flappyfont/flappyfont.png",
//              "assets/fonts/flappyfont/flappyfont.fnt");
//      /* game.load.audio("fly_sound","assets/flap.wav");
//       game.load.audio("score_sound","assets/score.wav");
//       game.load.audio("hit_pipe_sound","assets/pipe-hit.wav");
//       game.load.audio("hit_ground_sound","assets/ouch.wav");
//       */
//      game.load.image("ready_text","assets/get-ready.png");
//      game.load.image("game_over","assets/gameover.png");
//      game.load.image("score_board","assets/scoreboard.png");
//
//      game.load.image("coin","assets/coin.png");
//      game.load.image("bg","assets/bg.jpg");
//
//      game.load.image("clock_yellow","assets/clock-yellow.png");
//      game.load.image("clock_red","assets/clock-red.png");
//
//      game.load.image("cell","assets/cell.jpg");
//      game.load.spritesheet("cheep_bird","assets/cheep-bird.png",50,50,6);
//      game.load.spritesheet("ice_brick","assets/ice-brick.png",50,50,4);

    }
    this.create=function(){
      game.state.start("startLayer");
    }
  };



  //--startLayer 开始游戏层。
  game.States.startLayer=function(){
    //--背景
    var background={};
    var btn_new_game={};//新游戏按钮。
    this.preload=function(){


    };
    this.create=function(){
      //game.state.start("play");
      console.log("游戏开始界面。");
      background=game.add.tileSprite(0,0,GameOptions.width,GameOptions.height,"bg_menu");
      btn_new_game=game.add.button(game.width/2,game.height/2,"menu_start",function(){
        console.log("新游戏。");
        game.state.start("mainLayer");
      });
      btn_new_game.anchor.setTo(0.5,0.5);
    };
    this.update=function(){

    };
  };

  //--生成随机五中颜色随机的砖块。分别有：blue,green,orange,purple,red，宽度与高度都是48x48
  function createRandomStar(rowIndex,columnIndex,_opts){
    var _i_settings={
      onClick:function(sprite,pointer,_obj){}
      ,onAnimateEnd:function(){
        console.log("动画停止。");
      }
    };
    $.extend(_i_settings,_opts);
    var _style=["blue","green","orange","purple","red"];
    var _random_int=parseInt(Math.random()*1000)%5;
    var _i_data={
      style:""
      ,aminating:false
      ,uid:"cell-"+rowIndex+"-"+columnIndex //唯一编码，这是一开始就给定的编码，不会变的。
    };
    _i_data.style=_style[_random_int];

    var __sprite={};
    var _s_w=GameSettings.cellWidth;
    var _s_h=GameSettings.cellHeight;

    var i_app={
      init:function(){
        var me=this;
        me.addSprite();
        me.initEvents();
      }
      ,addSprite:function(){
        //--计算位置。

        var _x=_s_w*columnIndex;
        var _y=GameOptions.height-(rowIndex+1)*_s_h;
        __sprite=game.add.sprite(_x,_y,_i_data.style);
        //--初始化点击事件。


      }
      ,initEvents:function(){
        __sprite.inputEnabled = true;
        __sprite.events.onInputDown.add(function(sprite,pointer){
          //sprite.play("close_eyes");
          console.log("点击了我。。");
          if(_i_data.aminating==true){
            console.log("正在执行动画。");
            return;
          }
          //iSettings.onClick("actor",sprite,pointer);
          //--生成动画的对象。。
          var _obj={
            deny:function(){
              _i_data.aminating=true;
              var _sep_time=GameSettings.cellShakeTime;
              var _sep_distance=GameSettings.cellShakeDistance;
              var _new_x1=sprite.x-_sep_distance;
              var _new_x2=sprite.x+_sep_distance;
              var _originX=sprite.x;

              var __tween_idle=game.add.tween(sprite).to( { x:_new_x1 }, _sep_time, Phaser.Easing.Quadratic.Out, true);

              __tween_idle.onComplete.add(function (sprite,tween) {
                var __tween_idle2=game.add.tween(sprite).to( { x:_new_x2 }, _sep_time*2, Phaser.Easing.Quadratic.Out, true);
                __tween_idle2.onComplete.add(function(sprite,tween){
                  var __tween_idle3=game.add.tween(sprite).to( { x:_originX }, _sep_time*1, Phaser.Easing.Quadratic.Out, true);
                  __tween_idle3.onComplete.add(function(sprite,tween){
                    _i_data.aminating=false;
                    _i_settings.onAnimateEnd();
                  });
                });
              }, this);
            }
            //--检测当前的位置。。。返回行号及列号。
            ,getMatrixLocation:function(){
              //console.log(sprite.x,sprite.y);

              //console.log(pointer);
              var _xx=sprite.x+15;
              var __yy=sprite.y-15;
              //--判断位置。
              var _columnIndex=parseInt((_xx-_xx%_s_w)/_s_w);

              var _rowIndex=parseInt(((GameOptions.height-__yy)-(GameOptions.height-__yy)%_s_h)/_s_h)-1;
              var _ro={
                column:_columnIndex
                ,row:_rowIndex
              };

              return _ro;

            }
            ,getUID:function(){
              return _i_data.uid;
            }
            ,getStyle:function(){
              return _i_data.style;
            }
          };
          _i_settings.onClick(sprite,pointer,_obj);
        },this);
      }
    };

    i_app.init();
    var returnObj={
      getSprite:function(){
        return __sprite;
      }
      ,getStyle:function(){
        return _i_data.style;
      }

      ,getMatrixLocation:function(){
        //console.log(sprite.x,sprite.y);

        //console.log(pointer);
        var sprite=__sprite;
        var _xx=sprite.x+15;
        var __yy=sprite.y-15;
        //--判断位置。
        var _columnIndex=parseInt((_xx-_xx%_s_w)/_s_w);

        var _rowIndex=parseInt(((GameOptions.height-__yy)-(GameOptions.height-__yy)%_s_h)/_s_h)-1;
        var _ro={
          column:_columnIndex
          ,row:_rowIndex
        };

        return _ro;

      }
      ,getUID:function(){
        return _i_data.uid;
      }
    };


    return returnObj;


  }

  //--游戏主界面。
  game.States.mainLayer=function(){

    //--游戏界面相关工具条。
    var background={};
    var scoreGroup={};//分数相关数组。
    var _score_gold_coin_logo={};
    var _score_text={};//当前分数文字显示。
    var _time_group={};//时间显示组。
    var _time_logo={};//时间图标。
    var _time_tips={};//时间显示。

    //--核心数据，
    //-----星星矩阵，假如星星被消去，没有东西的话，那么就是null。
    var _matrix_stars=[];
    var gameTopBar={
      init:function(){
        scoreGroup=game.add.group();
        _score_gold_coin_logo=scoreGroup.create(0,0,"coin");
        _score_gold_coin_logo.scale.set(0.66667,0.66667);
        //_score_gold_coin_logo.anchor.setTo(0.5,0.5);
        _score_text=game.add.bitmapText(_score_gold_coin_logo.width+10, 8, 'flappy_font', "0", 20);
        scoreGroup.add(_score_text);
        window.scoreGroup=scoreGroup;
        scoreGroup.x=20;
        scoreGroup.y=20;

        _time_group=game.add.group();
        _time_logo=game.add.image(0,0,"clock_yellow");
        _time_group.add(_time_logo);

        _time_tips=game.add.bitmapText(_time_logo.width+10, 8, 'flappy_font', innerTools.timeFormat(GameSettings.limitTime), 20); //当前分数
        _time_group.add(_time_tips);

        _time_group.x=game.width-_time_group.width-10;
        _time_group.y=20;
      }
      ,setTimeTips:function(nowTimeCount){
        _time_tips.text=innerTools.timeFormat(nowTimeCount);
      }
      ,setScore:function(scoreText){
        _score_text.text=scoreText;
      }
    };

    //--相关算法及计算。
    var SwapMgr={
      //--判断这个星星上下左右是否有相同颜色的星星、
      checkOneStarFourSide : function (_row,_column,_color) {
        var _thisCell=_matrix_stars[_row][_column];
      if(_thisCell==null||_thisCell==undefined){
        console.log("该单元格无效！");
        return null;
      }

      // cc.log("checkOneStarFourSide");
      var fourSideSpriteList = [];
      var color = _color;
      var col = _column;
      var row = _row;

      //up
      if (row < 9) {
        var upSprite =  _matrix_stars[row+1][col];// this.starTable[col][row + 1];
        if (upSprite != null && upSprite.getStyle() == color) {
          fourSideSpriteList.push(upSprite);
        }
      }

      //down
      if (row > 0) {
        var downSprite = _matrix_stars[_row-1][_column];
        if (downSprite != null && downSprite.getStyle() == color) {
          fourSideSpriteList.push(downSprite);
        }
      }

      //left
      if (col > 0) {
        var leftSprite = _matrix_stars[_row][_column-1];
        if (leftSprite != null && leftSprite.getStyle() == color) {
          fourSideSpriteList.push(leftSprite);
        }
      }

      //right
      if (col < 9) {
        var rightSprite = _matrix_stars[_row][_column+1];
        if (rightSprite != null && rightSprite.getStyle() == color) {
          fourSideSpriteList.push(rightSprite);
        }
      }
      return fourSideSpriteList;
    }
      ,checkSameColorStars : function (_row,_column) {
        var _thisCell=_matrix_stars[_row][_column];
        if(_thisCell==null||_thisCell==undefined){
          console.log("该单元格无效！");
          return null;
        }
        var sameColorList=[];
        sameColorList.push(_thisCell);
      var newSameColorList = [];
      newSameColorList.push(_thisCell);

      //by logic ,check the same color star list
      while (newSameColorList.length > 0) {
        for (var i = 0; i < newSameColorList.length; i++) {
          var _tmp_item=newSameColorList[i];
          var _tmp_loc=_tmp_item.getMatrixLocation();
          var fourSide = this.checkOneStarFourSide(_tmp_loc.row,_tmp_loc.column,_tmp_item.getStyle());
          if (fourSide.length > 0) {
            for (var j = 0; j < fourSide.length; j++) {
              //--判断是否包含这个数组。
              var _res_item=fourSide[j];
              var _contains_this=false;
              for(var t=0;t< sameColorList.length;t++){
                var _ttmp_item=sameColorList[t];
                if(_ttmp_item.getUID()==_res_item.getUID()){

                  _contains_this=true;
                  break;
                }
              }

              if (_contains_this==false) {
                sameColorList.push(fourSide[j]);
                newSameColorList.push(fourSide[j]);
              }
            }
          }
          newSameColorList.splice(i, 1);
        }
      }
      console.log("sameColorList length==" + sameColorList.length);
      if (sameColorList.length > 1) {
        for (var k = 0; k < sameColorList.length; k++) {
          var simpleStar = sameColorList[k];
          if (simpleStar) {
            //simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));
          }
        }
      }

        return sameColorList;
    }
      //--计算分数规则。

      //规则1：1分数= 方块数*方块数*5   2方块=20分3方块=45分.
      ,getCurrentScore:function(theLength){

        return theLength*theLength*5;
      }

      //--根据重复的位置，将对应的数组排好序。
      //--星星掉落 填充空缺，主要是如果一个地方有空缺，就把它上面的星星位置和数据交换，用到数组的方法splice，可到网上查看js数组的一些方法应用
//              MainLayer.prototype.fallStar = function () {
//              for (var i = 0; i < this.starTable.length; i++) {
//                var sprites = this.starTable[i];
//                var length = sprites.length;
//                for (var j = 0; j < length; j++) {
//                  var pSprite0 = sprites[j];
//                  if (pSprite0 == null) {
//                    var k = j + 1;
//                    while (k < length) {
//                      var upSprite = sprites[k];
//                      if (upSprite != null) {
//                        upSprite.starData.indexOfColumn = i;
//                        upSprite.starData.indexOfRow = j;
//                        this.starTable[i].splice(j, 1, upSprite);
//                        this.starTable[i].splice(k, 1, null);
//                        k = length;
//                        var flowTime = 0.2;
//                        var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,
//                                36 + j * this.starSize));
//                        upSprite.runAction(fallAction);
//                      }
//                      k++;
//                    }
//                  }
//                }
//              }
//
//              this.deadStar();
//              // this.combineStar();
//            }
              ,fallAndCombindStar : function (repeatArrays) {
                if(repeatArrays==null||repeatArrays==undefined){
                  return;
                }
                for(var i=0;i< repeatArrays.length;i++){
                  var tmpItem=repeatArrays[i];
                  var _row=tmpItem.row;
                  var _column=tmpItem.column;
                  _matrix_stars[_row][_column]=null;
                }
                //--好了，将空置的cell让上面的都填充。。。
                //--这里不要用传统的方法逐个逐个移动，直接构造一个新的列表。这个列表里面，列和行的数据是调转来的。
                var _matrix_tmp=[];

                var _row_count=GameSettings.rows;
                var _column_count=GameSettings.columns;

              for(var i=0; i<_column_count;i++){
                var __tmparr=[];
                  for(var j=0;j< _row_count;j++){
                    var _now_item=_matrix_stars[j][i];
                    if(_now_item!=null){
                      //--好了，将这个数据放到temparr里面去。
                      __tmparr.push(_now_item);
                    }

                  }
                if(__tmparr.length>0){
                  _matrix_tmp.push(__tmparr);
                }
              }
        console.log("tmp矩阵。");
        console.log(_matrix_tmp);
        //--好了，针对tmp的矩阵，我们变换一下，将右手边已经空了一列的数据给移过来。
        //当然，不是下层那样子。。。是必须有空隙才移动。那么可以得知，假如是空列的话上面的tmp其中一个元素必然为长度0.算了，这个在上面做判断就好了，为零的话不添加。
//        var _matrix_tmp2=[];
//        for(var i=0;i<_matrix_tmp.length;i++){
//          var _arr1=_matrix_tmp[i];
//          if(_arr1){}
//        }
        //现在变换矩阵，换成正常的举矩阵
        //--全部初始化。
        for(var i=0;i<_row_count;i++){

          for(var j=0;j<_column_count;j++){
            _matrix_stars[i][j]=null;
          }

        }
        //--变换。

    for(var _column_index=0;_column_index<_matrix_tmp.length;_column_index++){
          var _columnArr=_matrix_tmp[_column_index];
          console.log(_columnArr);
          for(var _row_index=0;_row_index<_columnArr.length;_row_index++){
           _matrix_stars[_row_index][_column_index]=_columnArr[_row_index];
          }
        }
        console.log("变换以后的矩阵");
        console.log(_matrix_stars);

        //--好了，现在要根据矩阵来逐个逐个变换位置。

        for(var i=0;i<_row_count;i++){

          for(var j=0;j< _column_count;j++){
            var _item=_matrix_stars[i][j];
            if(_item!=null){
              this.moveSprite2Cell(i,j,_item.getSprite());
            }

          }

        }



       }
      ,moveSprite2Cell:function(rowIndex,columnIndex,sprite){
        var _x=GameSettings.cellWidth*columnIndex;
        var _y=GameOptions.height-(rowIndex+1)*GameSettings.cellHeight;
        //--检查单元格是不是位置变了，变了才执行动画。

        if(_x>sprite.x+10||_x<sprite.x-10||_y>sprite.y+10||_y<sprite.y-10){
          var __tween_idle3=game.add.tween(sprite).to( {x:_x,y:_y }, GameSettings.cellMoveTime, Phaser.Easing.Quadratic.Out, true);
          console.log("移动的单元格。");

        }
      }
      //--好了，现在要根据重复的位置来消去相关元素，重新组合矩阵数据及组合界面了。
      ,cleanCells:function(repeatArrays,callback){
        if(repeatArrays==null||repeatArrays==undefined){
          return;
        }
        window.cleanArray=repeatArrays;
        //--将对应数组排序。。

        var _sep_time=GameSettings.cellFadeOutTime;
        for(var i=0;i< repeatArrays.length;i++){
          var tmpItem=repeatArrays[i];
          var __tween_idle3=game.add.tween(tmpItem.sprite).to( {alpha:0 }, _sep_time, Phaser.Easing.Quadratic.Out, true);
          __tween_idle3.onComplete.add(function(sprite,tween){
            sprite.kill();
          });
        }
        this.fallAndCombindStar(repeatArrays);
        if(callback){
          setTimeout(function(){
            callback();
          },GameSettings.cellFadeOutTime+GameSettings.cellMoveTime+10);
        }

      }
    };

    function initStars(){
      _matrix_stars=[];
      for(var _row=0;_row<GameSettings.rows;_row++){
        var _tmp_stars=[];
        for(var _column=0;_column<GameSettings.columns;_column++){
          var star_obj=createRandomStar(_row,_column,{
            onClick:function(sprite,pointer,_obj){
              if(GameData.timeOver){
                console.log("游戏结束");
                return;

              }
              if(GameData.busy){
                console.log("正在执行计算啊，先别动。。");
                return;//正在执行动画啊，先别动，等0.5s再说。
              }

              GameData.busy=true;
              var _loc=_obj.getMatrixLocation();
              console.log("点击的位置：",_loc);
              var __style=_obj.getStyle();
              //--判断是否有相同的星星类型。
              var _fourSide=SwapMgr.checkOneStarFourSide(_loc.row,_loc.column,__style);
              if(_fourSide==null||_fourSide.length<=0){
                _obj.deny();
                return;
              }
              else{
                console.log("四周围有同样颜色的。");
                //--计算当前相同颜色的块。
                var sameColorList=SwapMgr.checkSameColorStars(_loc.row,_loc.column);
                if(sameColorList==null){
                  console.log("非法单元格。");
                  GameData.busy=false;
                  return;
                }
                else if(sameColorList.length<=1){
                  console.log("没有相同的颜色块。");
                  GameData.busy=false;
                  return;
                }
                else{
                  var _sameLocArr=[];
                  for(var i=0;i<sameColorList.length;i++){
                    var _tloc=sameColorList[i].getMatrixLocation();
                    $.extend(_tloc,
                            {
                              style: sameColorList[i].getStyle()
                              ,uid:sameColorList[i].getUID()
                              ,sprite:sameColorList[i].getSprite()
                            }
                          );
                    _sameLocArr.push(_tloc);
                  }
                  console.log(_sameLocArr);
                  //--好了，现在来计算得到的分数。
                  var thisScore=SwapMgr.getCurrentScore(_sameLocArr.length);
                  var _now_score=GameData.score+thisScore;
                  gameTopBar.setScore(_now_score);
                  GameData.score=_now_score;
                  console.log(_now_score);
                  SwapMgr.cleanCells(_sameLocArr,function(){
                    GameData.busy=false;
                  });
                }
              }


            }
            ,onAnimateEnd:function(){
              GameData.busy=false;
            }
          });
          _tmp_stars.push(star_obj);
        }

        _matrix_stars.push(_tmp_stars);
      }
    }
    //--初始化游戏ui。
    function initUI(){
      var background=game.add.tileSprite(0,0,game.width,game.height,"bg_main");
      gameTopBar.init();
    }
    //--初始化相关内部数据。
    function initData(){
      GameData={
        score:0
        ,beginTime:new Date().getTime()
        ,endTime:0
        ,currentRowIndex:0 //游戏当前的行数是。。。以0开始。
        ,userWantsStart:false
        ,playing:false
        ,busy:false //当前是否忙
        ,timeOver:false
        ,showAnimation:false //是否正在执行动画。
      };
    }

    //初始化10*10星星群。
    this.preload=function(){


    };
    this.create=function(){
      //game.state.start("play");
      initUI();
      initStars();
      initData();
    };
    this.update=function(){


      if(GameData.timeOver==true){
        return;
      }
      var _nowTime=new Date().getTime();
      var _passTime=parseInt((_nowTime-GameData.beginTime)/1000);

      if(_passTime>=GameSettings.limitTime){
        gameTopBar.setTimeTips(0);
        GameData.timeOver=true;
        game.state.start("stage_clear");
        return;
      }
      gameTopBar.setTimeTips(GameSettings.limitTime-_passTime);

    };
  };

  //--游戏的clear场景。

  //--startLayer 开始游戏层。
  game.States.stageClear=function(){
    //--背景
    var background={};
    var tips_clear={};
    var score_group={};
    var score_text={};
    var score_bg={};
    this.preload=function(){


    };
    this.create=function(){
      //game.state.start("play");
      console.log("游戏开始界面。");
      background=game.add.tileSprite(0,0,GameOptions.width,GameOptions.height,"bg_main");
      tips_clear=game.add.image(GameOptions.width/2,GameOptions.height/2-50,"stage_clear");
      tips_clear.anchor.setTo(0.5,0.5);

      score_group=game.add.group();
      score_bg=game.add.image(GameOptions.width/2,GameOptions.height/2+70,"Dialog_Item");
      score_bg.anchor.setTo(0.5,0.5);
      score_group.add(score_bg);
      score_text=game.add.bitmapText(GameOptions.width/2,GameOptions.height/2+70, 'flappy_font', GameData.score+"", 20);
      score_text.anchor.setTo(0.5,0.5);
      score_group.add(score_text);

//
//      _score_gold_coin_logo=scoreGroup.create(0,0,"coin");
//      _score_gold_coin_logo.scale.set(0.66667,0.66667);
//      //_score_gold_coin_logo.anchor.setTo(0.5,0.5);
//
//      scoreGroup.add(_score_text);
//      window.scoreGroup=scoreGroup;
//      scoreGroup.x=20;
//      scoreGroup.y=20;
//
//      _time_group=game.add.group();
//      _time_logo=game.add.image(0,0,"clock_yellow");
//      _time_group.add(_time_logo);
//
//      _time_tips=game.add.bitmapText(_time_logo.width+10, 8, 'flappy_font', innerTools.timeFormat(GameSettings.limitTime), 20); //当前分数
//      _time_group.add(_time_tips);

//      _time_group.x=game.width-_time_group.width-10;
//      _time_group.y=20;


    };
    this.update=function(){

    };
  };


  //--添加场景，开始执行。

  game.state.add("boot",game.States.boot);
  game.state.add("preload",game.States.preload);
  game.state.add("startLayer",game.States.startLayer);
  game.state.add("mainLayer",game.States.mainLayer);
  game.state.add("play",game.States.play);
  game.state.add("stage_clear",game.States.stageClear);
  game.state.add("game_over",game.States.gameOver);
  game.state.start("boot");

</script>
</body>
</html>
码农下的天桥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端编译原理 parser.js源码解读
weixin_30426957的博客
08-08 846
前面已经介绍了一个jison的使用，在正常开发中其实已经够用下，下面主要是看了下parser.js代码解读下，作为一些了解。 下面以最简单的文法产生的parser做一些代码注释 下面是一些注释，标示了编译过程，能够了解jison产生的编译器有哪些处理 var a = (function() { var o = function(k, v, o,...
js-parser:JavaScript 的语法解析器
06-08
js解析器 用于解析 JavaScript 的库。 安装 $ npm install git+https://github.com/mfnewwind/js-parser.git 用法 var JsParser = require ( 'js-parser' ) ; var parser = new JsParser ( ) ; parser . parseFile ( 'FILENAME' , function ( err , results ) { if ( err ) { console . error ( 'Error:' , err ) ; return ; } console . log ( results ) ; } ) ; 测试 $ npm install $ npm test
草图草稿：为开发人员使用草图草稿扩展Craft.io
02-06
草图草稿 为开发人员使用sketch-draft扩展Craft 安装 $ npm install -g sketch-draft 用法 $ draft --help Usage: $ draft < command> < option> Examples: $ draft avatar Get a random avatar $ draft avatar -f Get a random female avatar $ draft avatar -m Get a random male avata
一款可以打草稿的数独游戏（Unity制作）
06-22
版权仅归博主所有，不用作商业用途可以交流下载学习，侵权必究
java 优雅的实现多线程等待，可重用的同步屏障Phaser | Java工具类
阿良的博客
11-06 7783
目录 前言 Maven依赖 代码 总结 前言 是否会遇到这样的场景，你向线程池提交了多个任务，你希望这批任务全部完成后能够反向通知你。 你可能会使用线程计数的方式，等到计数器累加到提交的线程数量，然后通知。emmm，不是不可以，只是不够优雅。本文提供优雅的实现方式，Phaser同步屏障。 Maven依赖 也可以不依赖，本人习惯把代码简单化，使用了hutool，所以依赖只有这个。 <dependency> <groupId
微信调试--微信内置浏览器为什么对pharser.js支持这么差？？？
一名普通码农的菜地
12-04 1813
微信内置浏览器对于html5的支持如何？ 是否可以等同于webkit内核的浏览器？CSS3动画的支持程度怎么样？ 添加评论  分享 按投票排序按时间排序 31 个回答 28赞同 反对，不会显示你的姓名 匿名用户 纳豆大萌神、知乎用户、知乎用户 等人赞同 我在做针对微信的HTM
从零开始学compiler--3--1--Lexical Analysis
former的专栏
04-06 1151
词法分析 Identifier： variable names，class namespace
parser.js:一个由 JavaScript 实现的解析器库，包括 lexyacc 等工具，并包括简单的 api 来生成语法树
06-17
parser.js A parser library implemented by JavaScript, including tools like lex/yacc and include simple api to generate syntax tree Author Features 实现了一个基于NFA的正则表达式引擎实现(正则表达式字符串的解析使用自身实现的底层API和下面的语法解析引擎来实现的),支持主要正则功能已经分组捕获等 实现了一个语法解析引擎(支持左递归定义,语法定义简单) 提供一个整合了词法分析和语法分析的API,方便使用,可以直接生成最终满足要求的抽象语法树(直接生成最初定义规则对应的抽象语法树,而不是解析过程中的中间产物) 为了性能考虑,另外提供了一个使用内置正则引擎的快速词法分析实现,并且尽量兼容自己实现的正则API,从而可以在性能有问题时切换 直接浏览器和N
html5游戏引擎-Pharse.js学习笔记（一）
找寻你的足迹123
04-25 4556
1.前言 　　前几天随着flappy bird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。 　　我了解过cocos-2d for html5和phaser.js这两个引擎，其中前者比较
pharse.js开发
08-05 1159
http://phaser.io/getting-started-js.php http://blog.lessmilk.com/make-html5-games-with-phaser-1/ ...
Pharser CyclicBarrier CountdownLatch Semaphore
Spark Note Book
05-29 188
1. CyclicBarrier : 初始化count是固定的， 通常用于多个线程同时等待彼此，当所有线程到达某一点时，同时继续进行。例子：  Int N = 3； final CyclicBarrier cb = new CyclicBarrier(N); for (int i = 0; i &lt; N; i++) { new Thread(new Runnable(...
phaser3型脚本包裹样板：Phaser 3 + TypeScript +包裹样板
02-14
移相器3 + TypeScript +包裹+样板 该存储库为使用Phaser 3和TypeScript入门提供了简单的设置，并使用Parcel捆绑了您的应用程序。 入门 通过Phaser CLI 您可以通过Phaser CLI轻松引导新项目。 只需运行下面的命令，然后选择“ Phaser 3 + TypeScript + Parcel”。 npx @phaser-cli/cli < your> 手动地 将存储库克隆到您的工作区中并安装依赖项。 # Clone repo git clone https://github.com/phaser-cli/phaser3-typescript-parcel-boilerplate.git < your> cd < your> # Install depende
JsParser 开发人员写JS必备好工具
07-23
开发人员写JS必备好工具,可以时时检测出当前JS是否写的有问题，还能把JS的类及方法提取出来，左边可折叠，很好用的插件
readablePassphraseJS:Murray Grant的可读密码生成器的Javascript实现
04-27
可读密码短语 Murray Grant的可读密码生成器的Javascript实现 可读的密码短语生成器创建随机的英语句子。 与一长串随机字母和数字或4个随机单词相比，它们可能更容易记住。 关于发电机和许可 这是Murray Grant编写的C＃ReadablePassphraseGenerator的端口 原始实现： 根据获得原始 根据许可的词典 史蒂文·泽克（Steven Zeck）创建的Javascript端口 根据获得许可的端口 基本用法 在您的网页上包含javascript库； [removed][removed] 然后，您可以获得一个密码短语对象： var myPhrase = new ReadablePassphrase ( 'random' ) ; // ca
Phase.js:简单的 JavaScript 路由
07-03
阶段.js Phase.js 是用于构建 JavaScript 应用程序的框架。 它在将自身注册到依赖项的模块中工作。 如果您的模块的依赖项尚未加载，它将把它放在一个堆栈上，等待它需要的所有模块都加载完毕，然后它就会执行。 下面是一个例子： phase . module ( 'bar' , [ 'foo' ] , function ( scope ) { alert ( 'i am ready' ) ; } ) ; phase . module ( 'foo' , [ ] , function ( scope ) { scope . doAwesomeStuff = function ( ) { //Do awesome stuff here } } ) ; 不管代码的顺序如何，这都会显示“我准备好了”。 如果删除 foo 模块，则 ba
软件开发基础资料001，暂存，这里没有草稿箱
最新发布
04-18
软件开发基础资料001，暂存，这里没有草稿箱
EOS快速开发平台项目开发规范草稿.doc
09-29
EOS快速开发平台项目开发规范草稿.doc
用EJB3.0开发企业级Bean组件初体验
02-04
另外，你还学习到怎样使用JBoss和Maven来开发基于EJB3.0的企业级bean组件。　尽管EJB3.0规范还没有正式发行，但是它已经在Java开发社群中引起广泛兴趣——无论是对其拥护者还是其竞争对手。所有人都承认迫切需要找到...
lucene使用PhraseQuery设置slop进行短语查询
yyunix的专栏
10-20 2846
所谓PhraseQuery,就是通过短语来检索。 例如现在有一个字符串，“the quick brown fox jumped over the lazy dog”，我们不知道其中的精确的短语，我们仍然可以通过短语“quick”、"fox"来查找文档。slop就是从一个词到另一个词的距离。 下面是一个模仿lucene in action 第二版的一个例子。 package com.cn;
使用Arduino IDE开发环境如何写呢
07-10
使用HX711库提供的函数来初始化HX711传感器，并使用Adafruit SSD1306库提供的函数来初始化OLED显示屏。 6. 获取单位重量： - 在 `void setup()` 函数中，将传感器置于空白状态，并通过读取HX711传感器的数据获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值