JavaScript编写连连看小游戏


Posted in Javascript onJuly 07, 2015

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢。

使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开

最终的效果图:

JavaScript编写连连看小游戏

写连连看之前要先考虑哪些呢?

1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开;

2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单。 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y;

3:布局如何布局呢, 用table, td加上边框, 边框内部一个div,div就是连连看的棋子, 界面更清爽, 简单, 其实直接用canvas写也行, 没认真研究过canvas;

4:两个元素连接时连线的效果我们要怎么实现呢,如果用dom实现那么需要用到图片,元素连接时候把图片定位到连接的路径。 或者用canvas, 直接用canvas把连接的效果画出来, 我选择后者;

因为我不考虑低浏览器, 使用了zeptoJS库, 基于习惯,把bootstrap也引用了;

使用了三个主要构造函数, 包括Data, View, Score;

View的结构如下, 东西比较少 包括事件绑定, 界面生成, 以及当两个相同元素消失时的 绘图效果:

View

/**
 * @desc 根据数据生成map
 * */
 renderHTML : function

/**
* @desc 界面的主要事件绑定
* @return this;
* */
 bindEvents : function


/**
* @desc 工具方法,在canvas上面进行绘图;
* @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组, 会自动重绘;
* */
showSparkLine : function

tbody内部元素的模板是这样的:

<script type="text/template" id="tr-td-tpl">
  <% for(var i=0; i<data.length; i++) {%>
    <tr>
      <% for(var j=0; j< data[i].length; j++ ) { %>
        <td id="<%=i%><%=j%>" class="bg<%=data[i][j]%>" data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
          <div>
            <%=getImg(data[i][j])%>
          </div>
        </td>
      <% } %>
    </tr>
  <% } %>
</script>

上面代码的getImg方法会调用全局window的getImg方法,这个方法是根据数据生成图片字符串, 是一个辅助的函数:

window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img src='imgs/ani (1).gif' />";
      case 2:
        return "<img src='imgs/ani (2).gif' />";
      case 3:
        return "<img src='imgs/ani (3).gif' />";
      case 4:
        return "<img src='imgs/ani (4).gif' />";
      case 5:
        return "<img src='imgs/ani (5).gif' />";
      case 6:
        return "<img src='imgs/ani (6).gif' />";
    }
  };

因为连连看的数据是个二维的数组, 所以模板中必须使用两个for循环, 循环产生HTML字符串, 如果把数据和模板合在一起, 会生成下图的DOM结构:

JavaScript编写连连看小游戏

分数模块构造函数Score,  所有有关得分的代码就这些了  (把元素传进去, 直接调用生成实例的addScore方法, 会自动渲染DOM), 为分数单独写一个构造函数是因为为了解耦:

Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML,递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });

构造函数Data, 主要的结构如下 , 虽然方法比较少, 实际上Data这块代码占了300行.... 要判断元素是否可以连接用canConnect方法,canConnect方法又会调用dirConnect方法, 计算比较繁琐, 想了解的话最好自己写写:

//新建初始化
newData : function

//工具方法,随机混肴数组;
suffer : function

 /**
* @desc set值,把地图中对应的数据清空或者设置,两用接口
 * @param x, y
* @return chain
* */
set : function

/**
 * @desc 判断两个元素之间是否可以连接
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || []
* */
canConnect : function

/**
* @desc 判断元素是否可以直连
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || true
* */
dirConnect

所有所有代码如下, 作为参考:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <title>link</title>
  <script src="js/zepto.js"></script>
  <script src="js/underscore1.8.js"></script>
  <style>
    table{
      border-collapse: collapse;
    }
    td{
      border:1px solid #f5f5f5;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    td.active{
      opacity: 0.7;
    }
    td div{
      width:40px;
      height:40px;
    }
    .bg1{
      /*background: #2ECC71;*/
    }
    .bg2{
      /*background: #E67E22;*/
    }
    .bg3{
      /*background: #34495E;*/
    }
    .bg4{
      /*background: #1ABC9C;*/
    }
    .relative{
      position: relative;
    }
    .absolute{
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>

<div class="container ">
  <div class="row" style="width:80%;margin:0 auto;">
    <h3>得分<span class="label label-default" id="score">0</span></h3>
  </div>
</div>

<div class="container">
  <div class="row relative">
    <table class="absolute">
      <thead></thead>
      <tbody id="tbody">
      </tbody>
    </table>
    <canvas id="canvas">
      <p>Your browserdoes not support the canvas element.</p>
    </canvas>
  </div>
</div>
<script type="text/template" id="tr-td-tpl">
  <% for(var i=0; i<data.length; i++) {%>
    <tr>
      <% for(var j=0; j< data[i].length; j++ ) { %>
        <td id="<%=i%><%=j%>" class="bg<%=data[i][j]%>" data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
          <div>
            <%=getImg(data[i][j])%>
          </div>
        </td>
      <% } %>
    </tr>
  <% } %>
</script>
<script>
  var el = document.getElementById("tbody");
  var elCan = document.getElementById("canvas");
  var tpl = document.getElementById("tr-td-tpl");

  var cfg = {
    width : 8,
    height : 8
  };
  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img src='imgs/ani (1).gif' />";
      case 2:
        return "<img src='imgs/ani (2).gif' />";
      case 3:
        return "<img src='imgs/ani (3).gif' />";
      case 4:
        return "<img src='imgs/ani (4).gif' />";
      case 5:
        return "<img src='imgs/ani (5).gif' />";
      case 6:
        return "<img src='imgs/ani (6).gif' />";
    }
  };

  var View = function(data, score) {
      this.data = data;
      this.score = score;
     },
     Data = function(cfg) {
      this.cfg = {
        width : cfg.width+2,
        height : cfg.height+2
      };
       this.getRandom = this.getRandom();
     },
     Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Data.prototype, {
    /**
     * @desc 把两个
     * @param HTMLELEMENT
     * @return true || false
     * */
    clear : function(obj, target) {
    },
    /**
     * @desc 根据this.cfg新建数据到this.map
     * @param void
     * @return void
     * */
    newData : function() {
      var result = [];
      for(var i=0; i<=this.cfg.height+1; i++ ) {
        result[i] = result[i] || [];
        for(var j = 0; j<= this.cfg.width+1; j++) {

          if(i === 0 || j===0 || (i===this.cfg.height+1) || j === (this.cfg.width+1) ) {
            result[i][j] = 0;
          }else{
            //1-4
            result[i][j] = this.getRandom();
          }
        };
      };
      this.map = result;
      return this;
    },
    //随机混肴数组;
    suffer : function(obj) {
      function random(min, max) {
        if (max == null) {
          max = min;
          min = 0;
        }
        return min + Math.floor(Math.random() * (max - min + 1));
      };
      var set = obj;
      var length = set.length;
      var shuffled = Array(length);
      for (var index = 0, rand; index < length; index++) {
        rand = random(0, index);
        if (rand !== index) shuffled[index] = shuffled[rand];
        shuffled[rand] = set[index];
      }
      return shuffled;
    },
    /**
     * @return 返回值必须是成双的, 消除到最后尼玛,发现有一堆不匹配的,玩个球;
     * */
    getRandom : function() {
      //如果消消乐是3*3, 那么你告诉我....最后一个和谁消, 所以要做的就是把所有的元素生成变成一半,然后返回;
      var arr = new Array( (this.cfg.height) * (this.cfg.width) / 2 );
      var result = [];
      for(var i=0; i<arr.length; i++ ) {
        arr[i] = (Math.floor( Math.random()*6 ) + 1);
      };
      result = Array.prototype.concat.call( [] , arr, arr);
      result = this.suffer( result );
      return function( ) {
        return result.pop();
      };
    },
    /**
     * @desc set值
     * @param x, y
     * @return chain
     * */
    set : function( x, y) {
      this.map[y][x] = 0;
      return this;
    },
    /**
     * @desc 判断元素是否可以连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    canConnect : function(obj,target) {
      var map = this.map;
      //循环obj的y轴相等 , obj.x旁边所有数据为0的元素;;
      var getX = function( obj ) {
        var result = [];
        //循环找出在X附近为0的元素;
        for(var i=obj.x+1; i< map[0].length; i++) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i, y:obj.y} );
          }else{
            break;
          };
        };
        for(var i=obj.x-1; i>=0; i--) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i,y:obj.y} );
          }else{
            break;
          };
        };
        return result;
      };
      //循环obj的x轴相等, obj.y旁边所有数据为0的元素;
      var getY = function(obj) {
        var result = [];
        for(var i=obj.y+1; i<map.length; i++) {
          if( map[i][obj.x] == 0) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        for(var i=obj.y-1; i>=0; i--) {
          if( map[i][obj.x] == 0 ) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        return result;
      };
      var arr0 = Array.prototype.concat.call( [], getX(obj), obj, getY(obj)).filter(function(obj) {
        return !!obj;
      });
      var arr1 = Array.prototype.concat.call( [], getX(target), target, getY(target) ).filter(function(obj) {
        return !!obj;
      });
      for(i = 0; i<arr0.length; i++) {
        for(var j = 0; j<arr1.length; j++) {
          //只要有一个连接就返回true;
          if( this.dirConnect(arr0[i],arr1[j]) ) {
            return [obj, arr0[i], arr1[j], target];
          };
        };
      };
      return false;
    },
    /**
     * @desc 判断元素是否可以直接连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    dirConnect : function(obj, target) {
      var map = this.map;
      //row是x轴 列
      //col是y轴 行
      var min = 0, max = 0, sum = 0;
      if(obj.y === target.y) {
        if(obj.x < target.x) {
          min = obj.x;
          max = target.x;
        }else{
          min = target.x;
          max = obj.x;
        };
        for(var i=min; i<=max; i++) {
          sum += map[obj.y][i];
        };
        if(sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
      if(obj.x === target.x) {
        if(obj.y < target.y) {
          min = obj.y;
          max = target.y;
        }else{
          min = target.x;
          max = obj.y;
        };
        for( i=min; i<=max; i++) {
          sum += map[i][obj.x];
        };
        if( sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
    }
  });
  $.extend( View.prototype, {
    /**
     * @desc 为view添加视图的主元素
     * @return void
     * */
    setEL : function(el) {
      this.el = el;
      return this;
    },
    setTpl : function(tpl) {
      this.tpl = _.template( tpl.innerHTML );
      return this;
    },
    /**
     * @desc 根据数据生成map
     * */
    renderHTML : function() {
      $(this.el).html( this.tpl( {data : this.data.map} ) );
      return this;
    },
    /**
     * @desc 界面的主要事件绑定
     * @return this;
     * */
    bindEvents : function() {
      $(this.el).delegate("td", "click", this.click.bind(this));
      return this;
    },
    /**
     * @desc click事件, 单独抽出来的;
     * */
    click : function(ev) {
      //修改样式;
      $("td.active").removeClass("active");
      var target = $(ev.target).closest("td");
      target.addClass("active");

      //第一次点击我们做的特殊处理;
      var prev = this.prev;
      if( !prev || target[0] === prev[0]){
        this.prev = target;
        return;
      };
      
      if( prev.attr("data-data") === target.attr("data-data")) {
        var xy = JSON.parse( prev.attr("data-info") );
        var xxyy = JSON.parse( target.attr("data-info") );
        //保存了连接的数组信息
        var connectionInfo = [] || false;
        if( connectionInfo = this.data.canConnect( xy, xxyy) ) {
          this.showSparkLine( connectionInfo );
          this.prev = undefined;
          this.data.set(xy.x, xy.y);
          this.data.set(xxyy.x, xxyy.y);
          this.score.addScore();
          var _this = this;
          setTimeout(function() {
            _this.renderHTML();
          },2000);
        };
        prev.attr("data-data", "");
        target.attr("data-data","")
      }else{
        this.prev = target;
      };
    },
    /**
     * @desc 工具方法,在canvas上面进行绘图;
     * @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组, 会自动重绘;
    * */
    showSparkLine : function( arr ) {
      arr = arr.map(function(xy) {
        return {
          x : (xy.x)*40 + 20,
          y : (xy.y)*40 + 20
        }
      });
      var elCan = document.getElementById("canvas");
      function spark(ctx) {
        function showAndClear(arr, lineWidth) {
          ctx.clearRect(0,0,elCan.width,elCan.height);
          ctx.beginPath();
          ctx.lineJoin = "round";
          ctx.lineWidth = lineWidth;
          ctx.shadowColor = "rgba(241, 196, 15, 0.41)";
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
          ctx.shadowBlur = 1;
          for(var i=0; i<arr.length-1; i++) {
            var xy = arr[i];
            var nextXY = arr[i+1]
            ctx.moveTo(xy.x, xy.y);
            ctx.lineTo(nextXY.x, nextXY.y);
          };
          ctx.stroke();
        };
        var ctx = elCan.getContext("2d");
        ctx.strokeStyle = "#F1C40F";
        var lineWidthArr = [1,2,1,2,1,3,1,0];
        var len = lineWidthArr.length;
        var times = 400, addTimes = 200;
        while(len--) {
          (function(len){
            setTimeout(function() {
              showAndClear(arr, lineWidthArr[len]);
              if(len==0) {
                ctx.clearRect(0,0,elCan.width,elCan.height);
              }
            }, times);
            times += addTimes;
          })(len)
        };
      };
      spark( elCan );
    }
  });
  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML,递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });

  $(function() {
    var score = new Score( document.getElementById("score") );
    var data = new Data(cfg).newData();
    var view = new View(data, score);
    view.setEL( el ).setTpl( tpl).renderHTML().bindEvents();
    (function init() {
      //如果通过style属性添加width或者height,会根据原来的宽和高度自动伸缩的
      elCan.width = el.offsetWidth;
      elCan.height = el.offsetHeight;
    })();
  });

</script>
</body>
</html>

在线DEMO地址查看:打开

找到了一个别人写的连连看, 代码极少, 作为参考吧:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> 连连看 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    #board{width:508px; height:500px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #999999;}
    #board span{display: block; position: absolute; width: 30px; height: 30px; }
  </style>
</head>
<body>
<div id="board" >
</div>
</body>

<!--       js        -->
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script  type="text/javascript" >

  $(function(){
    var cont=$("#board");
    var colors=["#ff0000","#00ff00","#0000ff","#ffcc33","#000000","#00ffcc","#ffffff"];
    var pos=[];
    var click=0;
    var firstSpan;
    var fx;
    var fy;
    var arr=[];

    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    for(var i=0;i<8;i++){
      new creSpan(i,cont,0,i*40,colors[6],0);
    }

    for(var i=1;i<=6;i++){
      m=new creSpan(i,cont,i*40,0,"#ffffff");
      arr=[0];

      for(var j=0;j<6;j++){
        var color=Math.floor(Math.random()*6);
        new creSpan(i,cont,i*40,(j+1)*40,colors[color],(color+1));
        arr.push(1);
      }
      m=new creSpan(i,cont,i*40,(j+1)*40,"#ffffff",0);
      arr.push(0);
      pos.push(arr);

    }
    for(var i=0;i<8;i++){
      m=new creSpan(i,cont,7*40,i*40,"#ffffff",0);
    }
    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    function clear(c1,c2,x,y){
      if(c1!=null)c1.style.background="#ffffff";
      if(c2!=null){
        c2.style.background="#ffffff";
        pos[x-1][y-1]=0;
        pos[fx-1][fy-1]=0;
      }
      fx=0;
      fy=0;
      click=0;
    }

    $.each($("#board span"),function(index,mSpan){
      $(this).click(function(){
        var x=Math.floor(index/8);
        var y=Math.floor(index%8);
        if(click==0){
          click=1;
          firstSpan=mSpan;
          fx=x;
          fy=y;
          return;
        }

        if(firstSpan.id!=mSpan.id||(x==fx&&fy==y)){
          clear(null,null,0,0);
          return;
        }
        var col=6;
        var row=6;

        for(var i=0;i<row+2;i++){
          var step=i-x>0?1:-1;
          var count=0;
          for(var j=x;j!=i;j+=step){
            count+=pos[j][y];
          }
          step=y>fy?-1:1;
          for(j=y;j!=fy;j+=step){
            count+=pos[i][j];
          }
          step=i>fx?-1:1;
          for(j=i;j!=fx;j+=step){
            count+=pos[j][fy];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        for(i=0;i<col+2;i++){
          step=i-y>0?1:-1;
          count=0;
          for(j=y;j!=i;j+=step){
            count+=pos[x][j];
          }
          step=x>fx?-1:1;
          for(j=x;j!=fx;j+=step){
            count+=pos[i][j];
          }
          step=i<fy?1:-1;
          for(j=i;j!=fy;j+=step){
            count+=pos[fx][j];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        clear(null,null,0,0);

      });
    });
  });

  function creSpan(n,cont,mtop,mleft,mcolor,idstr){
    var mSpan=document.createElement("span");
    cont[0].appendChild(mSpan);
    mSpan.id=idstr;
    with(mSpan.style){
      top=mtop+"px";
      left=mleft+"px";
      background=mcolor;
    }
  };

</script>
</html>

以上所述 就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
jquery 学习笔记一
Apr 07 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
详解JavaScript执行模型
Nov 16 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 #Javascript
JavaScript编写推箱子游戏
Jul 07 #Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 #Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
javascript实现控制div颜色
Jul 07 #Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
YII框架关联查询操作示例
2019/04/29 PHP
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
Bootstrap按钮组实例详解
2017/07/03 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python devel安装失败问题解决方案
2020/06/09 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
商业融资计划书
2014/04/29 职场文书
病人慰问信范文
2015/02/15 职场文书
西柏坡观后感
2015/06/08 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
python实现A*寻路算法
2021/06/13 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫