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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
javascript基本语法分析说明
Jun 15 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
node.js从数据库获取数据
May 08 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
vue v-for直接循环数字实例
Nov 07 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
咖啡常见的种类
2021/03/03 新手入门
在PHP的图形函数中显示汉字
2006/10/09 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php session的应用详细介绍
2017/03/22 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
php函数式编程简单示例
2019/08/08 PHP
动态添加option及createElement使用示例
2014/01/26 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
vuejs点击class变化的实例
2018/09/05 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python中的Classes和Metaclasses详解
2015/04/02 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
快速了解python leveldb
2018/01/18 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
岗位职责的构建方法
2014/02/01 职场文书
夜不归宿检讨书
2014/02/25 职场文书
趵突泉导游词
2015/02/03 职场文书
张思德观后感
2015/06/09 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
如何撰写促销方案?
2019/07/05 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
浅析Python中的随机采样和概率分布
2021/12/06 Python