贪吃ღ大魔王
贪吃ღ大魔王

基于JavaScript Canvas的植物大战僵尸，周末爆肝之作，------------------（上）

引言：

前两天看到小朋友在玩植物大战僵尸，想起来多年以前自己也经常玩这个游戏，是比较经典的一款休闲游戏，然后就心血来潮就周末写了一个，花了不少时间去找素材和编写代码，感觉上基本的功能是做好了（要上班，没那么多时间搞），写出来大家看看，确实有点爆肝！

效果图：

实现思路

  1. 用两张画布来实现，第一个画布绘制不用更新的东西，比如背景图、按钮、积分图，卡牌图等；
  2. 第二个画布，绘制经常更新的东西，比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等；
  3. 动画的实现，通过图片的不停切换来实现的，开启一个总定时任务100毫秒重新绘制画布2，当然其他的每个动画都会重新开启定时任务（我称他们为子任务），它们不负责绘制，只负责改变对应的参数，绘制都是由总任务来完成的， 比如僵尸走动动画：开启子任务100毫秒执行一次图片切换，切换到最后一张的时候，返回到第一张，如果要走动的话同时改变图片的位置就好，子任务修改完成后，总任务自然会绘制出来；
  4. 卡牌的实现，目前就写了2张卡牌（向日葵、豌豆苗），给卡牌绘制了相同大小的方形来控制鼠标点击事件，当点击卡牌的时候，会创建对应的植物并且跟随鼠标移动，移动鼠标到合适的位置后点击（田 里面对应的方块），会在对应的位置种植；
  5. 田位置的控制，以方形来划分，每一块可以种植物的区域都用一个小方块来控制，植物就种在对应的方块内，当选择一个卡牌后，鼠标移动到田里面就会标示出来一个方形的区域，标示植物种植在这块区域里面。
  6. 豌豆苗被种植后，会定时的发射子弹，当子弹的位置和僵尸的位置交汇的时候，就判断为击中（处理子弹击中动画、子弹消失、僵尸扣除相应血量、击中的音效等），僵尸血量归零后会停止走动的动画，开启新的倒地动画，倒地完成后删除僵尸，同时累计得到的分数；
  7. 当僵尸的位置和植物的位置交汇的时候，僵尸会停止行走的动画，开启吃的动画（植物被扣除血量、僵尸吃的音效），植物血量归零后，植物对象会被清理；
  8. 阳光有两种产生方式，定时产生和向日葵产生，产生后会开启往下飘的动画，飘到一定范围后停止动画、开启计数器（目前设定为10秒），计数归零没有此阳光依然未被点击收集的话就会消失，在指定时间内点击了该阳光（音效），则会开启往左上角飞行的动画，到终点后阳光消失，阳光分增加（音效）；
  9. 结束条件：1）僵尸触及田的最左边--判定为失败。2）得分300--判定为胜利！
<html>
 <head>head>
 <body>
  <div id="content_views" class="htmledit_views"> 
   <h1><a name="t0">a><a name="t0">a>引言：h1> 
   <p style="text-indent:33px;"><span style="color:#f33b45;"><strong>前两天看到小朋友在玩植物大战僵尸，想起来多年以前自己也经常玩这个游戏，是比较经典的一款休闲游戏，然后就心血来潮就周末写了一个，花了不少时间去找素材和编写代码，感觉上基本的功能是做好了（要上班，没那么多时间搞），写出来大家看看，确实有点爆肝！strong>span>p> 
   <h1><a name="t1">a><a name="t1">a>效果图：h1> 
   <p><img alt="" src="https://img-blog.csdnimg.cn/20210419200650163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" />p> 
   <p><img alt="" src="https://img-blog.csdnimg.cn/20210419200804302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" />p> 
   <p><img alt="" src="https://img-blog.csdnimg.cn/20210419200827502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" />p> 
   <h1><a name="t2">a><a name="t2">a>实现思路h1> 
   <ol> 
    <li><strong>用两张画布来实现，第一个画布绘制不用更新的东西，比如背景图、按钮、积分图，卡牌图等；strong>li> 
    <li><strong>第二个画布，绘制经常更新的东西，比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等；strong>li> 
    <li><strong>动画的实现，通过图片的不停切换来实现的，开启一个总定时任务100毫秒重新绘制画布2，当然其他的每个动画都会重新开启定时任务（我称他们为子任务），它们不负责绘制，只负责改变对应的参数，绘制都是由总任务来完成的， 比如僵尸走动动画：开启子任务100毫秒执行一次图片切换，切换到最后一张的时候，返回到第一张，如果要走动的话同时改变图片的位置就好，子任务修改完成后，总任务自然会绘制出来；strong>li> 
    <li><strong>卡牌的实现，目前就写了2张卡牌（向日葵、豌豆苗），给卡牌绘制了相同大小的方形来控制鼠标点击事件，当点击卡牌的时候，会创建对应的植物并且跟随鼠标移动，移动鼠标到合适的位置后点击（田 里面对应的方块），会在对应的位置种植；strong>li> 
    <li><strong>田位置的控制，以方形来划分，每一块可以种植物的区域都用一个小方块来控制，植物就种在对应的方块内，当选择一个卡牌后，鼠标移动到田里面就会标示出来一个方形的区域，标示植物种植在这块区域里面。strong>li> 
    <li><strong>豌豆苗被种植后，会定时的发射子弹，当子弹的位置和僵尸的位置交汇的时候，就判断为击中（处理子弹击中动画、子弹消失、僵尸扣除相应血量、击中的音效等），僵尸血量归零后会停止走动的动画，开启新的倒地动画，倒地完成后删除僵尸，同时累计得到的分数；strong>li> 
    <li><strong>当僵尸的位置和植物的位置交汇的时候，僵尸会停止行走的动画，开启吃的动画（植物被扣除血量、僵尸吃的音效），植物血量归零后，植物对象会被清理；strong>li> 
    <li><strong>阳光有两种产生方式，定时产生和向日葵产生，产生后会开启往下飘的动画，飘到一定范围后停止动画、开启计数器（目前设定为10秒），计数归零没有此阳光依然未被点击收集的话就会消失，在指定时间内点击了该阳光（音效），则会开启往左上角飞行的动画，到终点后阳光消失，阳光分增加（音效）；strong>li> 
    <li><strong>结束条件：1）僵尸触及田的最左边--判定为失败。2）得分300--判定为胜利！strong>li> 
   ol> 
   <h1><a name="t3">a><a name="t3">a>实现h1> 
   <h2><a name="t4">a><a name="t4">a>绘制背景h2> 
   <pre><code class="hljs groovy">
     <ol class="hljs-ln" style="width:1090px">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">	
         <span class="hljs-comment">//绘制背景span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.drawBG=function(){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		var image,img,sx=
         <span class="hljs-number">150span>,sy=
         <span class="hljs-number">0span>,sWidth=
         <span class="hljs-number">900span>,sHeight=
         <span class="hljs-number">600span>,dx=
         <span class="hljs-number">0span>,dy=
         <span class="hljs-number">0span>,dWidth=
         <span class="hljs-number">900span>,dHeight=
         <span class="hljs-number">600span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//背景span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">1span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <h2><a name="t5">a><a name="t5">a>绘制上方的卡牌区域、积分区域，相关按钮h2> 
   <pre><code class="hljs groovy">
     <ol class="hljs-ln" style="width:1090px">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         <span class="hljs-comment">//绘制游戏上方的相关图片（卡片等）span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.drawCard=function(){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		var image,img,sx=
         <span class="hljs-number">0span>,sy=
         <span class="hljs-number">0span>,sWidth=
         <span class="hljs-number">446span>,sHeight=
         <span class="hljs-number">87span>,dx=
         <span class="hljs-number">0span>,dy=
         <span class="hljs-number">0span>,dWidth=
         <span class="hljs-number">446span>,dHeight=
         <span class="hljs-number">80span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//方形卡片盘span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">2span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sWidth=
         <span class="hljs-number">128span>,sHeight=
         <span class="hljs-number">31span>,dx=
         <span class="hljs-number">450span>,dy=
         <span class="hljs-number">0span>,dWidth=
         <span class="hljs-number">128span>,dHeight=
         <span class="hljs-number">40span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//积分span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">12span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sWidth=
         <span class="hljs-number">50span>,sHeight=
         <span class="hljs-number">70span>,dx=
         <span class="hljs-number">76span>,dy=
         <span class="hljs-number">5span>,dWidth=
         <span class="hljs-number">50span>,dHeight=
         <span class="hljs-number">68span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="16">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//方形卡片 太阳花span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="17">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">3span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="18">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="19">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img.sunCost=
         <span class="hljs-number">50span>;
         <span class="hljs-comment">//生产一个苗需要50阳光span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="20">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img.type=
         <span class="hljs-string">'sun'span>;
         <span class="hljs-comment">//植物类型span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="21">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="22">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.cardArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="23">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="24">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sWidth=
         <span class="hljs-number">50span>,sHeight=
         <span class="hljs-number">70span>,dx=
         <span class="hljs-number">130span>,dy=
         <span class="hljs-number">4span>,dWidth=
         <span class="hljs-number">50span>,dHeight=
         <span class="hljs-number">70span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="25">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//方形卡片 豌豆span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="26">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">4span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="27">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="28">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img.sunCost=
         <span class="hljs-number">100span>;
         <span class="hljs-comment">//生产一个苗需要100阳光span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="29">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img.type=
         <span class="hljs-string">'wandou'span>;
         <span class="hljs-comment">//植物类型span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="30">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="31">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.cardArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="32">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line"> 
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="33">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="34">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sWidth=
         <span class="hljs-number">97span>,sHeight=
         <span class="hljs-number">33span>,dx=
         <span class="hljs-number">780span>,dy=
         <span class="hljs-number">8span>,dWidth=
         <span class="hljs-number">97span>,dHeight=
         <span class="hljs-number">33span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="35">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//开始按钮图片span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="36">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">5span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="37">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="38">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.startImage=img;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="39">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="40">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="41">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sWidth=
         <span class="hljs-number">97span>,sHeight=
         <span class="hljs-number">33span>,dx=
         <span class="hljs-number">650span>,dy=
         <span class="hljs-number">8span>,dWidth=
         <span class="hljs-number">97span>,dHeight=
         <span class="hljs-number">33span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="42">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//创建僵尸图片span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="43">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">8span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="44">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="45">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.createZombiesImage=img;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="46">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="47">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <p><img alt="" src="https://img-blog.csdnimg.cn/20210419201435576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" />p> 
   <h1><a name="t6">a><a name="t6">a>点击开始的逻辑h1> 
   <p><strong><span style="color:#f33b45;">点击开始就是游戏的入口，游戏的大部分功能都是在这个逻辑里面实现，包含span>strong>：p> 
   <p><u>展示开始图片、开启背景音乐、阳光计分显示、积分显示、创建田的背景方形、创建卡牌的背景方形、开启总任务、定时创建太阳光、定时创建僵尸。u>p> 
   <h2><a name="t7">a><a name="t7">a>展示开始图片h2> 
   <pre><code class="hljs groovy">
     <ol class="hljs-ln" style="width:1090px">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         <span class="hljs-comment">//展示开始图片span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.startShow=function(){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		var image,img,sx=
         <span class="hljs-number">0span>,sy=
         <span class="hljs-number">0span>,sWidth=
         <span class="hljs-number">225span>,sHeight=
         <span class="hljs-number">108span>,dx=
         <span class="hljs-built_in">thisspan>.w
         <span class="hljs-regexp">/2-110,dy=this.h/span>
         <span class="hljs-number">2span>
         <span class="hljs-number">-100span>,dWidth=
         <span class="hljs-number">225span>,dHeight=
         <span class="hljs-number">108span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[
         <span class="hljs-number">10span>];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		img = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">image:span>image,
         <span class="hljs-attr">sx:span>sx,
         <span class="hljs-attr">sy:span>sy,
         <span class="hljs-attr">sWidth:span>sWidth,
         <span class="hljs-attr">sHeight:span>sHeight, 
         <span class="hljs-attr">dx:span>dx, 
         <span class="hljs-attr">dy:span>dy ,
         <span class="hljs-attr">dWidth:span>dWidth,
         <span class="hljs-attr">dHeight:span>dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr2.push(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		var that=
         <span class="hljs-built_in">thisspan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		setTimeout(function(){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			that.clear(img);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		},
         <span class="hljs-number">2000span>);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <p><strong><span style="color:#f33b45;">这里设置一个延时2秒后自动清除掉这个图片span>strong>p> 
   <p><img alt="" src="https://img-blog.csdnimg.cn/20210419202204502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" />p> 
   <h2><a name="t8">a><a name="t8">a>阳光计分显示h2> 
   <pre><code class="hljs javascript">
     <ol class="hljs-ln">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         <span class="hljs-comment">//创建阳光分span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.createSunText=
         <span class="hljs-function"><span class="hljs-keyword">functionspan>(<span class="hljs-params">span>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		x=
         <span class="hljs-number">40span>,y=
         <span class="hljs-number">74span>,content=
         <span class="hljs-built_in">thisspan>.sunTotalCount;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan>	text = 
         <span class="hljs-keyword">newspan> _.Text({
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">xspan>:x,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">yspan>:y,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">textspan>:content,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fontspan>:
         <span class="hljs-string">'20px ans-serif'span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">textAlignspan>:
         <span class="hljs-string">'center'span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fillspan>:
         <span class="hljs-literal">truespan>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fillStylespan>:
         <span class="hljs-string">'green'span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		});	
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr2.push(text);	
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.sunCountObj=text;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <p><img alt="" height="97" src="https://img-blog.csdnimg.cn/20210419202506854.png" width="102" />p> 
   <h2><a name="t9">a><a name="t9">a>积分显示h2> 
   <pre><code class="hljs javascript">
     <ol class="hljs-ln">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">	
         <span class="hljs-comment">//创建积分span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.createCountText=
         <span class="hljs-function"><span class="hljs-keyword">functionspan>(<span class="hljs-params">span>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		x=
         <span class="hljs-number">530span>,y=
         <span class="hljs-number">34span>,content=
         <span class="hljs-built_in">thisspan>.curCount;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan>	text = 
         <span class="hljs-keyword">newspan> _.Text({
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">xspan>:x,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">yspan>:y,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">textspan>:content,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fontspan>:
         <span class="hljs-string">'30px ans-serif'span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">textAlignspan>:
         <span class="hljs-string">'center'span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fillspan>:
         <span class="hljs-literal">truespan>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-attr">fillStylespan>:
         <span class="hljs-string">'pink'span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		});	
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr2.push(text);	
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.countObj=text;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <p><img alt="" height="71" src="https://img-blog.csdnimg.cn/2021041920245499.png" width="168" />p> 
   <h2><a name="t10">a><a name="t10">a>创建卡牌的背景方形（用于监听鼠标点击卡牌）h2> 
   <p style="text-indent:33px;"><strong>根据卡牌数组来创建，循环这个数组，方形的坐标和宽高与卡牌数组元素相对应，并且方形的fillStyle采用rgba来处理，如：rgba(192,192,192,0)  rgba(192,192,192,0.6)，当最后一个数字是0的时候卡牌可用，当为0.6的时候，卡牌会被遮罩起来不可用（不可用是在鼠标点击的时候控制，这里只是一个遮罩的效果），当然这里会设置一个参数alive，当它为true表示可用，false则点击无效，鼠标点击的时候就是根据这个参数来控制的。strong>p> 
   <pre><code class="hljs kotlin">
     <ol class="hljs-ln">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">	
         <span class="hljs-comment">//创建卡片背景方形span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.createCardBGRect=function(){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan> x=
         <span class="hljs-number">0span>,y=
         <span class="hljs-number">0span>,rect,fillStyle,alive;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">forspan>(
         <span class="hljs-keyword">varspan> i=
         <span class="hljs-number">0span>;i<
         <span class="hljs-keyword">thisspan>.cardArr.length;i++){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> item=
         <span class="hljs-keyword">thisspan>.cardArr[i];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			fillStyle = 
         <span class="hljs-keyword">thisspan>.sunTotalCount>=item.sunCost? 
         <span class="hljs-string">'rgba(192,192,192,0)'span>:
         <span class="hljs-string">'rgba(192,192,192,0.5)'span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			alive = 
         <span class="hljs-keyword">thisspan>.sunTotalCount>=item.sunCost? 
         <span class="hljs-literal">truespan>:
         <span class="hljs-literal">falsespan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			rect = new _.Rect({
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				x:item.dx,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				y:item.dy,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				width:item.dWidth,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				height:item.dHeight,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				fill:
         <span class="hljs-literal">truespan>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				fillStyle:fillStyle
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			 })
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="16">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			 rect.sunCost=item.sunCost;
         <span class="hljs-comment">//设定需要花费的阳光数值span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="17">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			 rect.alive=alive;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="18">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			 rect.type=item.type;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="19">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			 
         <span class="hljs-keyword">thisspan>.renderArr2.push(rect);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="20">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			 
         <span class="hljs-keyword">thisspan>.cardRectArr.push(rect);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="21">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="22">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="23">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <h2><a name="t11">a><a name="t11">a>创建田的背景方形（用于监听植物的种植）h2> 
   <p>根据背景上田的规格，来设置好X、Y坐标以及宽高，这样创建的方形就会和背景相对应，种植物的时候就比较好控制了，解释如下：p> 
   <p><img alt="" height="621" src="https://img-blog.csdnimg.cn/20210419203756330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" width="930" />p> 
   <p><strong>上图是我自己随便画的，也没有画好、没画全，实际上每个里面都有，并且比较整齐，我把代码稍微修改一下截图，最终的代码肯定不是这样的哦strong>p> 
   <p><img alt="" height="622" src="https://img-blog.csdnimg.cn/2021041920424779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70" width="929" />p> 
   <p><strong><span style="color:#f33b45;">这样，就把田的区域一块块的覆盖起来，但我们这里也是要用rgba的方式来，种植物的时候才会突出显示span>strong>p> 
   <pre><code class="hljs javascript">
     <ol class="hljs-ln">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         <span class="hljs-comment">//创建植物田背景方形span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.createBGRect=
         <span class="hljs-function"><span class="hljs-keyword">functionspan>(<span class="hljs-params">span>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan> x=
         <span class="hljs-number">0span>,y=
         <span class="hljs-number">0span>,rect;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">forspan>(
         <span class="hljs-keyword">varspan> i=
         <span class="hljs-number">1span>;i<=
         <span class="hljs-number">5span>;i++){
         <span class="hljs-comment">//5行span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			y = 
         <span class="hljs-number">75span>+(i
         <span class="hljs-number">-1span>)*
         <span class="hljs-number">100span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">forspan>(
         <span class="hljs-keyword">varspan> j=
         <span class="hljs-number">1span>;j<=
         <span class="hljs-number">9span>;j++){
         <span class="hljs-comment">//9列span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				x = 
         <span class="hljs-number">105span>+(j
         <span class="hljs-number">-1span>)*
         <span class="hljs-number">80span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				rect = 
         <span class="hljs-keyword">newspan> _.Rect({
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">xspan>:x,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">yspan>:y,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">widthspan>:
         <span class="hljs-number">80span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">heightspan>:
         <span class="hljs-number">100span>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">fillspan>:
         <span class="hljs-literal">truespan>,
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-comment">//fillStyle:_.getRandomColor()span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">					
         <span class="hljs-attr">fillStylespan>:
         <span class="hljs-string">'rgba(0,250,154, 0)'span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="16">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				 })
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="17">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				 rect.index=i;
         <span class="hljs-comment">//标记行数span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="18">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				 
         <span class="hljs-built_in">thisspan>.renderArr2.push(rect);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="19">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				 
         <span class="hljs-built_in">thisspan>.bgRectArr.push(rect);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="20">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="21">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="22">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	}
        div>
       div>li>
     ol>code>
    <div class="hljs-button {2}" data-title="复制" data-report-click="{
      "spm":"1001.2101.3001.4259"}" onclick="hljs.copyCode(event)">div>pre> 
   <h2><a name="t12">a><a name="t12">a>创建阳光h2> 
   <p><strong>1、向日葵植物创建阳光和定时创建阳光都放到这里了，他们的区别是：定时创建的X坐标随机产生，而向日葵创建的阳光X、Y坐标是根据向日葵的位置来的。strong>p> 
   <p><strong>2、设定阳光的分值、阳光的血量、阳光默认运动的终点位置（这个位置可以自己定，我定义Y坐标的是400），阳光为什么有血量呢？这个血量是用来控制消失时间的，比如我设定血量为100，当阳光运动到底部停止运动后，就会开启计算血量的任务，每100毫秒执行一次，让血量 -1，因100毫秒执行10次是1秒，1秒后血量就变成90了，当血量归零后如若依然没有去收集这个阳光，需要让阳光消失，同时关闭此定时器。strong>p> 
   <p><strong>3、当点击阳光后，就把计算血量的定时器关闭，开启向左上角运动的动画，当然这里要用到  Math.atan2 根据阳光点击的位置和做上角的位置，计算出角度，然后根据角度利用Math.cos、Math.sin 计算出运动的X、Y的数值，定时器将根据这个数值来运动。strong>p> 
   <p><strong>4、运动指定的位置后，要做以下动作：清除运动定时器、阳光积分累加与显示、收集音效开启、阳光消失、卡牌可用状态的更新。strong>p> 
   <pre><code class="hljs javascript">
     <ol class="hljs-ln hundred" style="width:1096px">
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="1">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         <span class="hljs-comment">//创建阳光span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="2">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         	Plants.prototype.createSun=
         <span class="hljs-function"><span class="hljs-keyword">functionspan>(<span class="hljs-params">plantspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="3">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan> image,sun,sx=
         <span class="hljs-number">0span>,sy=
         <span class="hljs-number">0span>,sWidth=
         <span class="hljs-number">77span>,sHeight=
         <span class="hljs-number">74span>,dx=
         <span class="hljs-number">0span>,dy=
         <span class="hljs-number">70span>,dWidth=
         <span class="hljs-number">45span>,dHeight=
         <span class="hljs-number">44span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="4">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="5">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">ifspan>(plant){
         <span class="hljs-comment">//这种是植物创建的太阳span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="6">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			dx = plant.dx;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="7">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			dy = plant.dy;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="8">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
         <span class="hljs-keyword">elsespan>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="9">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			dx = _.getRandom(
         <span class="hljs-number">200span>,
         <span class="hljs-number">800span>);
         <span class="hljs-comment">//x方形随机200-800span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="10">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="11">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="12">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//绘制时的图片下标span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="13">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-keyword">varspan> startKey=
         <span class="hljs-built_in">thisspan>.count+
         <span class="hljs-built_in">thisspan>.zombiesRunCount+
         <span class="hljs-built_in">thisspan>.wandousRunCount+
         <span class="hljs-built_in">thisspan>.zombiesDeadCount+
         <span class="hljs-number">1span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="14">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//方形卡片盘span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="15">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		image = 
         <span class="hljs-built_in">thisspan>.imgObj[startKey];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="16">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun = 
         <span class="hljs-keyword">newspan> _.ImageDraw({
         <span class="hljs-attr">imagespan>:image,
         <span class="hljs-attr">sxspan>:sx,
         <span class="hljs-attr">syspan>:sy,
         <span class="hljs-attr">sWidthspan>:sWidth,
         <span class="hljs-attr">sHeightspan>:sHeight, 
         <span class="hljs-attr">dxspan>:dx, 
         <span class="hljs-attr">dyspan>:dy ,
         <span class="hljs-attr">dWidthspan>:dWidth,
         <span class="hljs-attr">dHeightspan>:dHeight});
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="17">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.imageKey=startKey;
         <span class="hljs-comment">//执行动画更新的下标span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="18">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.key=startKey;
         <span class="hljs-comment">//原始下标span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="19">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.value=
         <span class="hljs-number">20span>;
         <span class="hljs-comment">//收集一个20分span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="20">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.blood=
         <span class="hljs-number">100span>;
         <span class="hljs-comment">//默认10点血量（10秒消失，因为我给太阳设置的是100毫秒执行一次，所以这个blood设置为100，每次-1 ，10秒就刚好100）span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="21">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.floor=
         <span class="hljs-number">400span>;
         <span class="hljs-comment">//到底的位置span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="22">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.renderArr2.push(sun);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="23">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="24">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-built_in">thisspan>.suns.push(sun);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="25">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="26">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		sun.timmer = 
         <span class="hljs-built_in">setIntervalspan>(animate.bind(
         <span class="hljs-built_in">thisspan>,sun),
         <span class="hljs-number">100span>);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="27">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">animatespan>(<span class="hljs-params">zspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="28">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> that=
         <span class="hljs-built_in">thisspan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="29">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.imageKey ++;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="30">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//一个循环了，重新回到初始位置span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="31">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.imageKey>=(that.sunRunCount+z.key)){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="32">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				z.imageKey=z.key;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="33">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="34">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.image = that.imgObj[z.imageKey];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="35">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.dy+=
         <span class="hljs-number">2span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="36">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.dy>=z.floor){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="37">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-comment">//console.log('太阳到位置了');span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="38">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-built_in">clearIntervalspan>(z.timmer);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="39">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-comment">//开启定时任务，多少秒以后消失span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="40">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				sun.timmer = 
         <span class="hljs-built_in">setIntervalspan>(time.bind(
         <span class="hljs-built_in">thisspan>,sun),
         <span class="hljs-number">100span>);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="41">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="42">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="43">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="44">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//太阳计时span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="45">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">timespan>(<span class="hljs-params">zspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="46">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> that=
         <span class="hljs-built_in">thisspan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="47">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.imageKey ++;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="48">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//一个循环了，重新回到初始位置span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="49">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.imageKey>=(that.sunRunCount+z.key)){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="50">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				z.imageKey=z.key;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="51">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="52">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.image = that.imgObj[z.imageKey];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="53">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//计算消失时间span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="54">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.blood--;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="55">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.blood<=
         <span class="hljs-number">0span>){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="56">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-built_in">clearIntervalspan>(z.timmer);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="57">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-comment">//console.log('太阳到时间了');span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="58">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				fade.call(
         <span class="hljs-built_in">thisspan>,z);
         <span class="hljs-comment">//执行消失span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="59">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="60">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="61">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="62">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//太阳消失span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="63">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">fadespan>(<span class="hljs-params">zspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="64">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-built_in">thisspan>.clear(z);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="65">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//console.log('太阳消失了');span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="66">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-built_in">thisspan>.clearAssign(
         <span class="hljs-built_in">thisspan>.suns,z);
         <span class="hljs-comment">//清楚指定对象span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="67">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z=
         <span class="hljs-literal">nullspan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="68">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="69">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//太阳被点击span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="70">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">sunClickspan>(<span class="hljs-params">zspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="71">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//console.log('太阳被点击了')span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="72">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-built_in">clearIntervalspan>(z.timmer);
         <span class="hljs-comment">//清楚之前的定时器span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="73">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="74">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-built_in">thisspan>.pointsMusic.play();
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="75">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="76">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> cx=cy=
         <span class="hljs-number">20span>;
         <span class="hljs-comment">//收集点的X\Y坐标span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="77">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> angle = 
         <span class="hljs-built_in">Mathspan>.atan2((z.dy-cy), (z.dx-cx))  
         <span class="hljs-comment">//弧度 span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="78">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="79">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//计算出X\Y每一帧移动的距离span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="80">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> mx = my=
         <span class="hljs-number">0span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="81">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			mx = 
         <span class="hljs-built_in">Mathspan>.cos(angle)*
         <span class="hljs-number">20span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="82">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			my = 
         <span class="hljs-built_in">Mathspan>.sin(angle)*
         <span class="hljs-number">20span>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="83">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.mx=mx,z.my=my;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="84">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//开启移动定时器span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="85">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.timmer = 
         <span class="hljs-built_in">setIntervalspan>(sunCollect.bind(
         <span class="hljs-built_in">thisspan>,z),
         <span class="hljs-number">100span>);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="86">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         		}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="87">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-comment">//收集太阳动画span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="88">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">		
         <span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">sunCollectspan>(<span class="hljs-params">zspan>)span>{
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="89">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">varspan> that=
         <span class="hljs-built_in">thisspan>;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="90">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.imageKey ++;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="91">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-comment">//一个循环了，重新回到初始位置span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="92">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.imageKey>=(that.sunRunCount+z.key)){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="93">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				z.imageKey=z.key;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="94">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			}
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="95">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.image = that.imgObj[z.imageKey];
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="96">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.dx-=z.mx;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="97">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         			z.dy-=z.my;
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="98">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">			
         <span class="hljs-keyword">ifspan>(z.dy<=
         <span class="hljs-number">20span>||z.dx<=
         <span class="hljs-number">20span>){
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="99">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-comment">//console.log('太阳收集完成');span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="100">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-built_in">clearIntervalspan>(z.timmer);
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="101">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="102">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
         <span class="hljs-built_in">thisspan>.moneyfallsMusic.play();
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="103">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">				
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="104">div>
       div>
       <div class="hljs-ln-code">
        <div class="hljs-ln-line">
         				fade.call(
         <span class="hljs-built_in">thisspan>,z);
         <span class="hljs-comment">//执行消失span>
        div>
       div>li>
      <li>
       <div class="hljs-ln-numbers">
        <div class="hljs-ln-line hljs-ln-n" data-line-number="105">div>
       div

你可能感兴趣的:(转载,源码,javascript,html5,reactjs,node.js)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • libyuv之linux编译 jaronho Linuxlinux运维服务器
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 《如不承诺天长地久，怎会相遇细水长流》文/苏暖人 北京大数据苏焕之
    《如不承诺天长地久，怎会相遇细水长流》文/苏暖人原创——莫转载粘贴有人选择昙花一现，如大理的花海，有人选择细水长流，如雨夜的浪漫。都说，五分喜欢的人恨不得将他挂在嘴边，十分喜欢的人却只舍得放在心里边了，在爱情眼里，对方说的每一句话都在乎你的感受，TA的眼里也只有你，我想也是这样！说起我的爱情，我也喜欢过一个忧郁的女孩，她喜欢的男孩不喜欢她，于是我成了她倾诉的朋友＋备胎，一年来我们互相推荐伤感的歌曲
  • ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • tiff批量转png 诺有缸的高飞鸟 opencv图像处理pythonopencv图像处理
    目录写在前面代码完写在前面1、本文内容tiff批量转png2、平台/环境opencv,python3、转载请注明出处：https://blog.csdn.net/qq_41102371/article/details/132975023代码importnumpyasnpimportcv2importosdeffindAllFile(base):file_list=[]forroot,ds,fsin
  • 笋丁网页自动回复机器人V3.0.0免授权版源码 希希分享 软希网58soho_cn源码资源笋丁网页自动回复机器人
    笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码） 疯狂的机器人 Python搞定车载自动化pythonDoIPUDSISO142291SO13400Bootloadertcp/ip
    系列文章目录【Python搞定车载自动化测试】系列文章目录汇总文章目录系列文章目录前言一、环境搭建1.软件环境2.硬件环境二、目录结构三、源码展示1.DoIP诊断基础函数方法2.DoIP诊断业务函数方法3.27服务安全解锁4.DoIP自动化刷写四、测试日志1.测试日志五、完整源码链接前言随着智能电动汽车行业的发展，汽车=智能终端+四个轮子，各家车企都推出了各自的OTA升级方案，本章节主要介绍如何使
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开 摸鱼小号 php
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 使用由 Python 编写的 lxml 实现高性能 XML 解析 hunyxv python笔记pythonxml
    转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • JVM源码分析之堆外内存完全解读 HeapDump性能社区
    概述广义的堆外内存说到堆外内存，那大家肯定想到堆内内存，这也是我们大家接触最多的，我们在jvm参数里通常设置-Xmx来指定我们的堆的最大值，不过这还不是我们理解的Java堆，-Xmx的值是新生代和老生代的和的最大值，我们在jvm参数里通常还会加一个参数-XX:MaxPermSize来指定持久代的最大值，那么我们认识的Java堆的最大值其实是-Xmx和-XX:MaxPermSize的总和，在分代算法
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • Istio pilot-discovery服务发现源码解析（1.13版本） xidianjiapei001 #Istioistio云原生服务发现
    Istiopilot-discovery服务发现介绍工作机制初始化初始化Config控制器初始化Service控制器controller初始化NamespaceServiceNodePodPilotDiscovery各组件启动流程DiscoveryServer接收Envoy的gRPC连接请求流程Config变化后向Envoy推送更新的流程总结参考介绍IstioPilot的代码分为Pilot-Dis
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • python中文版软件下载-Python中文版 编程大乐趣
    python中文版是一种面向对象的解释型计算机程序设计语言。python中文版官网面向对象编程，拥有高效的高级数据结构和简单而有效的方法，其优雅的语法、动态类型、以及天然的解释能力，让它成为理想的语言。软件功能强大，简单易学，可以帮助用户快速编写代码，而且代码运行速度非常快，几乎可以支持所有的操作系统，实用性真的超高的。python中文版软件介绍：python中文版的解释器及其扩展标准库的源码和编
  • Linux的Initrd机制 被触发 linux
    Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
  • maven本地仓库路径修改 bitcarter maven
    默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
  • XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
    http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
  • Java 求素数运算 周凡杨 java算法素数
    网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
  • java 单例模式 g21121 java
    想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
  • Linux下Mysql源码安装 510888780 mysql
    1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
  • 32位和64位操作系统 墙头上一根草 32位和64位操作系统
    32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
  • 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
    一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
  • mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
    一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
  • 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
    数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
  • 多线程编程一般规则 bijian1013 javathread多线程java多线程
           如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
  • 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
    一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
  • 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
    以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
  • cookie状态判断引发的查找问题 bitcarter formcgi
    先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
  • 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
    一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
  • java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
    public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
  • 看别人的博客，觉得心情很好 Cb123456 博客心情
       以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
  • [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
        我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
  • JS常用的事件及方法 cwqcwqmax9 js
    事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
  • 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
    正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
  • Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
    public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
  • UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
    In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
  • 判断一个数是质数的几种方法 EmmaZhao Mathpython
    质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
  • SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
      SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
  • JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
    效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
  • Hbase Rest API : 数据查询 kane_xie RESThbase
    hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
  • JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
    欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
  • Postgresql 连表更新字段语法 update qifeifei PostgreSQL
    下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
  • 将redis,memcache结合使用的方案? tcrct rediscache
    公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
  • 开发中遇到的诡异的bug wudixiaotie bug
    今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他