引言：
前两天看到小朋友在玩植物大战僵尸，想起来多年以前自己也经常玩这个游戏，是比较经典的一款休闲游戏，然后就心血来潮就周末写了一个，花了不少时间去找素材和编写代码，感觉上基本的功能是做好了（要上班，没那么多时间搞），写出来大家看看，确实有点爆肝！
效果图：
实现思路
- 用两张画布来实现，第一个画布绘制不用更新的东西，比如背景图、按钮、积分图，卡牌图等；
- 第二个画布，绘制经常更新的东西，比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等；
- 动画的实现，通过图片的不停切换来实现的，开启一个总定时任务100毫秒重新绘制画布2，当然其他的每个动画都会重新开启定时任务（我称他们为子任务），它们不负责绘制，只负责改变对应的参数，绘制都是由总任务来完成的， 比如僵尸走动动画：开启子任务100毫秒执行一次图片切换，切换到最后一张的时候，返回到第一张，如果要走动的话同时改变图片的位置就好，子任务修改完成后，总任务自然会绘制出来；
- 卡牌的实现，目前就写了2张卡牌（向日葵、豌豆苗），给卡牌绘制了相同大小的方形来控制鼠标点击事件，当点击卡牌的时候，会创建对应的植物并且跟随鼠标移动，移动鼠标到合适的位置后点击（田 里面对应的方块），会在对应的位置种植；
- 田位置的控制，以方形来划分，每一块可以种植物的区域都用一个小方块来控制，植物就种在对应的方块内，当选择一个卡牌后，鼠标移动到田里面就会标示出来一个方形的区域，标示植物种植在这块区域里面。
- 豌豆苗被种植后，会定时的发射子弹，当子弹的位置和僵尸的位置交汇的时候，就判断为击中（处理子弹击中动画、子弹消失、僵尸扣除相应血量、击中的音效等），僵尸血量归零后会停止走动的动画，开启新的倒地动画，倒地完成后删除僵尸，同时累计得到的分数；
- 当僵尸的位置和植物的位置交汇的时候，僵尸会停止行走的动画，开启吃的动画（植物被扣除血量、僵尸吃的音效），植物血量归零后，植物对象会被清理；
- 阳光有两种产生方式，定时产生和向日葵产生，产生后会开启往下飘的动画，飘到一定范围后停止动画、开启计数器（目前设定为10秒），计数归零没有此阳光依然未被点击收集的话就会消失，在指定时间内点击了该阳光（音效），则会开启往左上角飞行的动画，到终点后阳光消失，阳光分增加（音效）；
- 结束条件：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">150</span>,sy=
<span class="hljs-number">0</span>,sWidth=
<span class="hljs-number">900</span>,sHeight=
<span class="hljs-number">600</span>,dx=
<span class="hljs-number">0</span>,dy=
<span class="hljs-number">0</span>,dWidth=
<span class="hljs-number">900</span>,dHeight=
<span class="hljs-number">600</span>;
</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">this</span>.imgObj[
<span class="hljs-number">1</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">
img =
<span class="hljs-keyword">new</span> _.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">this</span>.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">0</span>,sy=
<span class="hljs-number">0</span>,sWidth=
<span class="hljs-number">446</span>,sHeight=
<span class="hljs-number">87</span>,dx=
<span class="hljs-number">0</span>,dy=
<span class="hljs-number">0</span>,dWidth=
<span class="hljs-number">446</span>,dHeight=
<span class="hljs-number">80</span>;
</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">this</span>.imgObj[
<span class="hljs-number">2</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">
img =
<span class="hljs-keyword">new</span> _.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">this</span>.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">128</span>,sHeight=
<span class="hljs-number">31</span>,dx=
<span class="hljs-number">450</span>,dy=
<span class="hljs-number">0</span>,dWidth=
<span class="hljs-number">128</span>,dHeight=
<span class="hljs-number">40</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-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">this</span>.imgObj[
<span class="hljs-number">12</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">
img =
<span class="hljs-keyword">new</span> _.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">this</span>.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">50</span>,sHeight=
<span class="hljs-number">70</span>,dx=
<span class="hljs-number">76</span>,dy=
<span class="hljs-number">5</span>,dWidth=
<span class="hljs-number">50</span>,dHeight=
<span class="hljs-number">68</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">
<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">this</span>.imgObj[
<span class="hljs-number">3</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">
img =
<span class="hljs-keyword">new</span> _.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">50</span>;
<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">this</span>.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">this</span>.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">50</span>,sHeight=
<span class="hljs-number">70</span>,dx=
<span class="hljs-number">130</span>,dy=
<span class="hljs-number">4</span>,dWidth=
<span class="hljs-number">50</span>,dHeight=
<span class="hljs-number">70</span>;
</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">this</span>.imgObj[
<span class="hljs-number">4</span>];
</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">new</span> _.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">100</span>;
<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">this</span>.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">this</span>.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">97</span>,sHeight=
<span class="hljs-number">33</span>,dx=
<span class="hljs-number">780</span>,dy=
<span class="hljs-number">8</span>,dWidth=
<span class="hljs-number">97</span>,dHeight=
<span class="hljs-number">33</span>;
</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">this</span>.imgObj[
<span class="hljs-number">5</span>];
</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">new</span> _.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">this</span>.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">this</span>.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">97</span>,sHeight=
<span class="hljs-number">33</span>,dx=
<span class="hljs-number">650</span>,dy=
<span class="hljs-number">8</span>,dWidth=
<span class="hljs-number">97</span>,dHeight=
<span class="hljs-number">33</span>;
</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">this</span>.imgObj[
<span class="hljs-number">8</span>];
</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">new</span> _.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">this</span>.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">this</span>.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">0</span>,sy=
<span class="hljs-number">0</span>,sWidth=
<span class="hljs-number">225</span>,sHeight=
<span class="hljs-number">108</span>,dx=
<span class="hljs-built_in">this</span>.w
<span class="hljs-regexp">/2-110,dy=this.h/</span>
<span class="hljs-number">2</span>
<span class="hljs-number">-100</span>,dWidth=
<span class="hljs-number">225</span>,dHeight=
<span class="hljs-number">108</span>;
</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">this</span>.imgObj[
<span class="hljs-number">10</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">
img =
<span class="hljs-keyword">new</span> _.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">this</span>.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">this</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">
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">2000</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>
</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">function</span>(<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">40</span>,y=
<span class="hljs-number">74</span>,content=
<span class="hljs-built_in">this</span>.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">var</span> text =
<span class="hljs-keyword">new</span> _.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">x</span>: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">y</span>: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">text</span>: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">font</span>:
<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">textAlign</span>:
<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">fill</span>:
<span class="hljs-literal">true</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">
<span class="hljs-attr">fillStyle</span>:
<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">this</span>.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">this</span>.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">function</span>(<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">530</span>,y=
<span class="hljs-number">34</span>,content=
<span class="hljs-built_in">this</span>.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">var</span> text =
<span class="hljs-keyword">new</span> _.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">x</span>: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">y</span>: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">text</span>: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">font</span>:
<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">textAlign</span>:
<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">fill</span>:
<span class="hljs-literal">true</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">
<span class="hljs-attr">fillStyle</span>:
<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">this</span>.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">this</span>.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">var</span> x=
<span class="hljs-number">0</span>,y=
<span class="hljs-number">0</span>,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">for</span>(
<span class="hljs-keyword">var</span> i=
<span class="hljs-number">0</span>;i<
<span class="hljs-keyword">this</span>.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">var</span> item=
<span class="hljs-keyword">this</span>.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">this</span>.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">this</span>.sunTotalCount>=item.sunCost?
<span class="hljs-literal">true</span>:
<span class="hljs-literal">false</span>;
</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">true</span>,
</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">this</span>.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">this</span>.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">function</span>(<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">var</span> x=
<span class="hljs-number">0</span>,y=
<span class="hljs-number">0</span>,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">for</span>(
<span class="hljs-keyword">var</span> i=
<span class="hljs-number">1</span>;i<=
<span class="hljs-number">5</span>;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">75</span>+(i
<span class="hljs-number">-1</span>)*
<span class="hljs-number">100</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">
<span class="hljs-keyword">for</span>(
<span class="hljs-keyword">var</span> j=
<span class="hljs-number">1</span>;j<=
<span class="hljs-number">9</span>;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">105</span>+(j
<span class="hljs-number">-1</span>)*
<span class="hljs-number">80</span>;
</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">new</span> _.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">x</span>: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">y</span>: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">width</span>:
<span class="hljs-number">80</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">
<span class="hljs-attr">height</span>:
<span class="hljs-number">100</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-attr">fill</span>:
<span class="hljs-literal">true</span>,
</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">fillStyle</span>:
<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">this</span>.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">this</span>.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">function</span>(<span class="hljs-params">plant</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">var</span> image,sun,sx=
<span class="hljs-number">0</span>,sy=
<span class="hljs-number">0</span>,sWidth=
<span class="hljs-number">77</span>,sHeight=
<span class="hljs-number">74</span>,dx=
<span class="hljs-number">0</span>,dy=
<span class="hljs-number">70</span>,dWidth=
<span class="hljs-number">45</span>,dHeight=
<span class="hljs-number">44</span>;
</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">if</span>(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">else</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">
dx = _.getRandom(
<span class="hljs-number">200</span>,
<span class="hljs-number">800</span>);
<span class="hljs-comment">//x方形随机200-800</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">
}
</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">var</span> startKey=
<span class="hljs-built_in">this</span>.count+
<span class="hljs-built_in">this</span>.zombiesRunCount+
<span class="hljs-built_in">this</span>.wandousRunCount+
<span class="hljs-built_in">this</span>.zombiesDeadCount+
<span class="hljs-number">1</span>;
</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">this</span>.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">new</span> _.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="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">20</span>;
<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">100</span>;
<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">400</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="22"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
<span class="hljs-built_in">this</span>.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">this</span>.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">setInterval</span>(animate.bind(
<span class="hljs-built_in">this</span>,sun),
<span class="hljs-number">100</span>);
</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">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params">z</span>)</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">var</span> that=
<span class="hljs-built_in">this</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">
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">if</span>(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">2</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">
<span class="hljs-keyword">if</span>(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">clearInterval</span>(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">setInterval</span>(time.bind(
<span class="hljs-built_in">this</span>,sun),
<span class="hljs-number">100</span>);
</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">function</span> <span class="hljs-title">time</span>(<span class="hljs-params">z</span>)</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">var</span> that=
<span class="hljs-built_in">this</span>;
</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">if</span>(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">if</span>(z.blood<=
<span class="hljs-number">0</span>){
</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">clearInterval</span>(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">this</span>,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">function</span> <span class="hljs-title">fade</span>(<span class="hljs-params">z</span>)</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">this</span>.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">this</span>.clearAssign(
<span class="hljs-built_in">this</span>.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">null</span>;
</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">function</span> <span class="hljs-title">sunClick</span>(<span class="hljs-params">z</span>)</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">clearInterval</span>(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">this</span>.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">var</span> cx=cy=
<span class="hljs-number">20</span>;
<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">var</span> angle =
<span class="hljs-built_in">Math</span>.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">var</span> mx = my=
<span class="hljs-number">0</span>;
</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">Math</span>.cos(angle)*
<span class="hljs-number">20</span>;
</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">Math</span>.sin(angle)*
<span class="hljs-number">20</span>;
</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">setInterval</span>(sunCollect.bind(
<span class="hljs-built_in">this</span>,z),
<span class="hljs-number">100</span>);
</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">function</span> <span class="hljs-title">sunCollect</span>(<span class="hljs-params">z</span>)</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">var</span> that=
<span class="hljs-built_in">this</span>;
</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">if</span>(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">if</span>(z.dy<=
<span class="hljs-number">20</span>||z.dx<=
<span class="hljs-number">20</span>){
</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">clearInterval</span>(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">this</span>.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">this</span>,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>
<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="106"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
that.sunTotalCount+=z.value;
</div>
</div></li>
<li>
<div class="hljs-ln-numbers">
<div class="hljs-ln-line hljs-ln-n" data-line-number="107"></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="108"></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="109"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
that.updateCardUse();
</div>
</div></li>
<li>
<div class="hljs-ln-numbers">
<div class="hljs-ln-line hljs-ln-n" data-line-number="110"></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="111"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
that.sunCountObj.text=that.sunTotalCount;
</div>
</div></li>
<li>
<div class="hljs-ln-numbers">
<div class="hljs-ln-line hljs-ln-n" data-line-number="112"></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="113"></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="114"></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="115"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
sun.click=sunClick.bind(
<span class="hljs-built_in">this</span>,sun);
<span class="hljs-comment">//给这个sun对象绑定点击函数</span>
</div>
</div></li>
<li>
<div class="hljs-ln-numbers">
<div class="hljs-ln-line hljs-ln-n" data-line-number="116"></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="t13"></a><a name="t13"></a>创建僵尸</h2>
<p><strong>1、创建僵尸：定时（10秒）、随机数量（1-5只）、随机行（1-5行，这里表示出现在地图的哪一行）。</strong></p>
<p><strong>2、设定僵尸的血量、僵尸所处的行数、僵尸的状态（run、eat、dead），状态是用来控制切换图片的下标的，不然动画会出错。</strong></p>
<p><strong>3、行走动画依赖于图片的切换和X坐标的改变（每一帧x坐标 减少2即可）。</strong></p>
<p><strong>4、每一帧都要判断x坐标与植物的坐标是否交汇，如果是先关闭行走的动画，更新状态为 eat ，开启吃的动画，切换图片的下标。</strong></p>
<p><strong>5、每一次吃的时候递减植物的血量，判断植物的血量，如果血量归零则表示吃完了，此时要清理掉植物，僵尸回归行走的动画，状态改为run；若没吃完则继续吃。</strong></p>
<p><strong>6、每一帧也要判断僵尸的x坐标是否到了最左边，如果是游戏结束。</strong></p>
<h3><a name="t14"></a><a name="t14"></a>创建</h3>
<pre><code class="hljs javascript">
<ol class="hljs-ln" style="width:1113px">
<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.createZombie=
<span class="hljs-function"><span class="hljs-keyword">function</span>(<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">var</span> image,zomble,sx=
<span class="hljs-number">0</span>,sy=
<span class="hljs-number">0</span>,sWidth=
<span class="hljs-number">75</span>,sHeight=
<span class="hljs-number">119</span>,dx=
<span class="hljs-number">900</span>
<span class="hljs-number">-75</span>,dy=
<span class="hljs-number">270</span>,dWidth=
<span class="hljs-number">75</span>,dHeight=
<span class="hljs-number">119</span>;
</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">var</span> index = _.getRandom(
<span class="hljs-number">1</span>,
<span class="hljs-number">6</span>);
<span class="hljs-comment">//随机获取1\2\3\4\5 行数</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">
<span class="hljs-keyword">if</span>(index==
<span class="hljs-number">1</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">
dy=
<span class="hljs-number">60</span>;
</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">else</span>
<span class="hljs-keyword">if</span>(index==
<span class="hljs-number">2</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">
dy=
<span class="hljs-number">160</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-keyword">else</span>
<span class="hljs-keyword">if</span>(index==
<span class="hljs-number">3</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">
dy=
<span class="hljs-number">260</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">
}
<span class="hljs-keyword">else</span>
<span class="hljs-keyword">if</span>(index==
<span class="hljs-number">4</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">
dy=
<span class="hljs-number">355</span>;
</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-keyword">else</span>
<span class="hljs-keyword">if</span>(index==
<span class="hljs-number">5</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">
dy=
<span class="hljs-number">460</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">
</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-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">
<span class="hljs-keyword">var</span> startKey=
<span class="hljs-built_in">this</span>.count+
<span class="hljs-number">1</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">
<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">
image =
<span class="hljs-built_in">this</span>.imgObj[startKey];
</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">
zomble =
<span class="hljs-keyword">new</span> _.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="23"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.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="24"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.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="25"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.blood=
<span class="hljs-number">10</span>;
<span class="hljs-comment">//默认10点血量</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">
zomble.index=index;
<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="27"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.state=
<span class="hljs-string">'run'</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-built_in">this</span>.renderArr2.push(zomble);
</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">
<span class="hljs-built_in">this</span>.zombies.push(zomble);
</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">
</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">
zomble.run=run.bind(
<span class="hljs-built_in">this</span>);
</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">
zomble.run();
</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">
</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-function"><span class="hljs-keyword">function</span> <span class="hljs-title">run</span>(<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="36"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.timmer =
<span class="hljs-built_in">setInterval</span>(animate.bind(
<span class="hljs-built_in">this</span>,zomble),
<span class="hljs-number">100</span>);
</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">
}
</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-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params">z</span>)</span>{
</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-keyword">var</span> that=
<span class="hljs-built_in">this</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">
z.imageKey ++;
</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">
<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="42"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
<span class="hljs-keyword">if</span>(z.imageKey>=(that.zombiesRunCount+z.key)){
</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">
z.imageKey=z.key;
</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">
}
</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">
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="46"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
z.dx-=
<span class="hljs-number">2</span>;
</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">
<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="48"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
that.eat(zomble)
</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">
</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">
<span class="hljs-keyword">if</span>(z.dx<=
<span class="hljs-number">100</span>){
</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">
<span class="hljs-built_in">console</span>.log(
<span class="hljs-string">'结束了'</span>);
</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">
that.end();
</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">
}
</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">
}
</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">
}
</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>
<h3><a name="t15"></a><a name="t15"></a>僵尸吃</h3>
<pre><code class="hljs kotlin">
<ol class="hljs-ln" style="width:1164px">
<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.eat=function(zomble){
</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-comment">//先判断当前僵尸有没有到达吃的位置，有的话就开始吃，关闭掉之前的僵尸动画，开始吃的动画</span>
</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">var</span> plants=
<span class="hljs-keyword">this</span>.plants;
</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">var</span> 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">
<span class="hljs-keyword">for</span>(
<span class="hljs-keyword">var</span> i=
<span class="hljs-number">0</span>;i<plants.length;i++){
</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-keyword">var</span> item=plants[i];
</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">if</span>(item.index==zomble.index){
</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-keyword">if</span>(item.dx+item.dWidth-
<span class="hljs-number">20</span>>=zomble.dx){
<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="10"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
plant=item;
</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-keyword">break</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">
}
</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">
}
</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-keyword">if</span>(plant){
</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">
clearInterval(zomble.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="18"></div>
</div>
<div class="hljs-ln-code">
<div class="hljs-ln-line">
zomble.imageKey=zomble.key=
<span class="hljs-keyword">this</span>.count+
<span class="hljs-keyword">this</span>.zombiesRunCount+
<span class="hljs-keyword">this</span>.wandousRunCount+
<span class="hljs-keyword">this</span>.zombiesDeadCount+
<span class="hljs-keyword">this</span>.sunRunCount+
<span class="hljs-number">1</span>;
<span class="hljs-comment">//设定key</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">
zomble.state=
<span class="hljs-string">'eat'</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">
zomble.timmer = setInterval(animate.bind(
<span class="hljs-keyword">this</span>,zomble,plant),
<span class="hljs-number">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">
}
</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">
function animate(z,p){
</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-keyword">this</span>.eatMusic.play();
</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-keyword">var</span> that=
<span class="hljs-keyword">this</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">
z.imageKey ++;
</div>
转载自大佬：编程界明世隐
原文来源： https://blog.csdn.net/dkm123456/article/details/115871302
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
