HTML5 仿QT 示例Drag and Drop Robot 换装机器人

最新推荐文章于 2023-07-10 15:13:05 发布
最新推荐文章于 2023-07-10 15:13:05 发布
阅读量949 收藏
点赞数
分类专栏： Web前端

起源

在Qt的示例中看到了一个有趣的demo，截图如下：

这个demo的名字叫Drag and Drop Robot，简单概括而言，在这个demo中，可以把机器人四周的颜色拖动到机器人的各个部位，比如说头，臂，身躯等，然后这个部位就会变成相应的颜色，类似于换装小游戏。

上图就是经过愚下的拖动颜色使其简略换装后的样子。

当然，拖动颜色使部件变色的功能并不难实现，关键在于这个机器人是动态的，我们要研究的就恰恰是这个机器人动画是怎么做出来的。 
光凭两张图片我们无法知道这个动画到底是什么样子的，大家可以参考本次用html5移植到浏览器平台的demo： 
http://wyh.wjjsoft.com/demo/drag_and_drop_robot/

截图如下： 

由于愚下对人体运动了解不深，所以demo里的机器人运动得不是很和谐。各位看官可以在文末下载源代码，通过本次讲解，拿回去自己改改，让这个机器人动得更带感一点。

以下是实现过程。

准备工作

先来看看文件结构： 
 
其中，lufylegend-1.9.9.simple.min.js是html5引擎lufylegend里的文件，由于该引擎带有缓动类，所以实现本次效果会容易一些。 
引擎官方地址：http://lufylegend.com 
中文文档地址：http://lufylegend.com/api/zh_CN/out/index.html

由于下文的代码中会多次出现一些引擎里的类和方法，所以我把这些类和方法在文档里的地址放在下面，供大家参考：

  1. LExtends：http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LExtends
  2. LLoadManage：http://lufylegend.com/api/zh_CN/out/classes/LLoadManage.html
  3. LInit：http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LInit
  4. LSprite：http://lufylegend.com/api/zh_CN/out/classes/LSprite.html
  5. LTextField：http://lufylegend.com/api/zh_CN/out/classes/LTextField.html
  6. LDropShadowFilter：http://lufylegend.com/api/zh_CN/out/classes/LDropShadowFilter.html
  7. LTweenLite：http://lufylegend.com/api/zh_CN/out/classes/LTweenLite.html
  8. LGraphics：http://lufylegend.com/api/zh_CN/out/classes/LGraphics.html

实现过程

Main.js

完整代码：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">LInit(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"mydemo"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">800</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">600</span>, loadRes);

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> stageLayer, selectedColorBox = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>, partList = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">loadRes</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> loadList = [
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./Robot.js"</span>},
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./Part.js"</span>},
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./Body.js"</span>},
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./Head.js"</span>},
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./Limb.js"</span>},
        {path : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"./ColorBox.js"</span>}
    ];

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> loadingTxt = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LTextField();
    loadingTxt.text = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Loading..."</span>;
    addChild(loadingTxt);

    LLoadManage.load(loadList, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        loadingTxt.remove();

        initStageLayer();
        addRobot();
        addColors();
    });
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">initStageLayer</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    stageLayer = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    stageLayer.graphics.drawRect(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, LGlobal.width, LGlobal.height]);
    addChild(stageLayer);

    stageLayer.addEventListener(LMouseEvent.MOUSE_MOVE, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (selectedColorBox) {
            selectedColorBox.x = mouseX;
            selectedColorBox.y = mouseY;
        }
    });

    stageLayer.addEventListener(LMouseEvent.MOUSE_UP, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (selectedColorBox) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (partList) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, l = partList.length; i < l; i++) {
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> o = partList[i], p = o.part, e = o.exec;

                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (isPartHitObject(p, selectedColorBox)) {
                        setPartAlpha(p, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
                        e.fillColor = selectedColorBox.color;
                        e.draw();
                    }
                }
            }

            selectedColorBox.remove();

            selectedColorBox = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
        }
    });

    stageLayer.addEventListener(LEvent.ENTER_FRAME, loop);
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">loop</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (partList && selectedColorBox) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, l = partList.length; i < l; i++) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> p = partList[i].part;

            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (isPartHitObject(p, selectedColorBox)) {
                setPartAlpha(p, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>);
            } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {
                setPartAlpha(p, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
            }
        }
    }
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">isPartHitObject</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(list, obj)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, l = list.length; i < l; i++) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (list[i].hitTestObject(obj)) {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>;
        }
    }

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>;
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">setPartAlpha</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(list, a)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, l = list.length; i < l; i++) {
        list[i].alpha = a;
    }
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">addRobot</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> robot = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Robot();
    robot.x = (LGlobal.width - robot.getWidth()) / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;
    robot.y = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">220</span>;
    stageLayer.addChild(robot);
}

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">addColors</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> colorList = [
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"orange"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"red"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"yellow"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"green"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"blue"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"lightblue"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"purple"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"brown"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"lightgreen"</span>,
        <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"orangered"</span>
    ];
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> r = (LGlobal.height - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">80</span>) / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> layer = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    layer.x = LGlobal.width / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;
    layer.y = LGlobal.height / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;
    stageLayer.addChild(layer);

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, l = colorList.length; i < l; i++) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> angle = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> * i * <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI / l;

        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> colorBox = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ColorBox(colorList[i]);
        colorBox.x = r * <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.cos(angle);
        colorBox.y = r * <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.sin(angle);
        layer.addChild(colorBox);

        colorBox.addEventListener(LMouseEvent.MOUSE_DOWN, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span> {</span>
            selectedColorBox = e.currentTarget.clone();
            selectedColorBox.x = e.offsetX;
            selectedColorBox.y = e.offsetY;
            stageLayer.addChild(selectedColorBox);
        });
    }
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li></ul>

变量介绍：

  • stageLayer：舞台层
  • selectedColorBox：正在拖动的颜色
  • partList：机器人部件列表，下文会有详细介绍

函数介绍：

  • loadRes：用于加载文件
  • initStageLayer：初始化舞台层。包括舞台层添加事件，以实现拖动颜色以及拖动的颜色与机器人碰撞检测（其中出现变量partList的地方可暂时忽略，读到后文，看官再回头来看，自会明白代码的意思）
  • loop：循环事件监听器
  • isPartHitObject：判断机器人的部件是否与某对象碰撞（判断拖动的颜色是否与机器人部件相碰撞）
  • setPartAlpha：设置机器人部件的透明度（拖动的颜色碰到机器人部件上后，需改变部件透明度以提示碰撞）
  • addRobot：加入机器人
  • addColors：加入四周的颜色

这里主要讲一下如何实现拖动颜色，并如何给部件上色。 
首先我们需要的是几个事件：鼠标移动，鼠标按下，鼠标松开，循环事件。鼠标按下是加在ColorBox对象上的（此类于后文讲解），鼠标移动、和松开事件以及循环事件是加载舞台层stageLayer的。当我们在ColorBox对象上按下鼠标，首先要克隆该对象，并将克隆产物赋值给selectedColorBox。这时再移动鼠标，触发鼠标移动事件监听器，并判断到了存在selectedColorBox，即鼠标在某ColorBox上按下，这时就执行ColorBox跟随鼠标操作。当鼠标松开后，首先判断克隆产物selectedColorBox是否正在与机器人部件产生碰撞，如果是则为该部件上色，随后将克隆产物销毁，这时如果再移动鼠标，则检测到克隆产物不存在，则跟随鼠标的操作不会执行。循环事件用于执行如果克隆产物碰到机器人部件则将部件变为半透明的操作。

ColorBox.js

上面的代码中有这个类的出现，这里把这个类的代码展示了：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>  <span class="hljs-title" style="box-sizing: border-box;">ColorBox</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(color)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, LSprite, []);

    s.color = color;

    s.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">25</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">25</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, color);

    s.filters = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LDropShadowFilter(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>, color)];
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

代码很简单，如有不懂之处可以先参考给出的文档地址，或者在文章下方留言。

Robot.js

前面我们看到的机器人就是通过这个类来实现的。但是正如学过生物必修一的同学都知道，动物生命层次是这样的：个体->系统->器官->组织->细胞，我们的机器人就是个体，那么四肢构成运动系统，以此类推。所以我们的这个Robot类就只是个装载头部，身躯，四肢的容器。在上面给出的文件结构中可以看到，还有Head.js和Body.js这些类，他们的实例化对象就是放在Robot这个个体里的部件了。 
因此先来看Robot.js：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Robot</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, LSprite, []);

    s.body = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
    s.head = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
    s.leftArm = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
    s.rightArm = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
    s.leftLeg = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;
    s.rightLeg = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;

    s.addBody();
    s.addHead();
    s.addArms();
    s.addLegs();

    partList = [
        {
            exec : s.body,
            part : [s.body.bodyLayer]
        },
        {
            exec : s.head,
            part : [s.head.faceLayer]
        },
        {
            exec : s.leftArm,
            part : [s.leftArm.part1, s.leftArm.part2]
        },
        {
            exec : s.rightArm,
            part : [s.rightArm.part1, s.rightArm.part2]
        },
        {
            exec : s.leftLeg,
            part : [s.leftLeg.part1, s.leftLeg.part2]
        },
        {
            exec : s.rightLeg,
            part : [s.rightLeg.part1, s.rightLeg.part2]
        }
    ];
}

Robot.prototype.addBody = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;

    s.body = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Body(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">80</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>);
    s.addChild(s.body);
};

Robot.prototype.addHead = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;

    s.head = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Head(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>);
    s.head.x = s.body.getWidth() / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;
    s.body.addChild(s.head);
};

Robot.prototype.addArms = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, l = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>, r = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7.5</span>;

    s.leftArm = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Limb(l, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);
    s.leftArm.x = r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;
    s.leftArm.y = r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;
    s.body.addChild(s.leftArm);

    s.rightArm = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Limb(l, r, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">140</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">140</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);
    s.rightArm.x = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">76</span> - r;
    s.rightArm.y = r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;
    s.body.addChild(s.rightArm);
};

Robot.prototype.addLegs = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, l = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">70</span>, r = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7.5</span>;

    s.leftLeg = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Limb(l, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">70</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">80</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);
    s.leftLeg.x = r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;
    s.leftLeg.y = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">96</span> -r;
    s.body.addChild(s.leftLeg);

    s.rightLeg = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Limb(l, r, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>);
    s.rightLeg.x = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">76</span> - r;
    s.rightLeg.y = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">96</span> -r;
    s.body.addChild(s.rightLeg);
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li></ul>

属性介绍：

  • body：机器人身躯对象
  • head：机器人头部对象
  • leftArm & rightArm：机器人手臂对象
  • leftLeg & rightLeg：机器人腿部对象

函数介绍：

  • 构造器：调用其他各个函数并为partList赋值
  • addBody & addHead & addArms & addLegs：加入各个部件

partList数据结构介绍： 
先前我们在Main.js中看到过这个变量。这个变量是个数组，里面存放了多个Object。这些Object中有part和exec两个属性。part对应的值是部件中参与碰撞检测的对象（LSprite对象），比如说头部里的faceLayer，手臂中的两个部分part1和part2。exec主要是在刷新部件时用到，毕竟改变了颜色后，机器人身上的部件要重画一遍，那么就需要调用exec对应的对象中的重画函数。

画出各种部件及其缓动动画的实现

※ 提示：下面的代码，会用到很多LGraphics，LTweenLite，不熟悉的同学，建议先阅读上文给出的文档

Part.js

所有部件的父类——Part类：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Part</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, LSprite, []);

    s.fillColor = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"lightgray"</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

只有一个属性fillColor：部件填充的颜色

Body.js

身躯部件——Body类：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Body</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(w, h, r)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, Part, []);

    s.w = w;
    s.h = h;
    s.r = r;

    s.bodyLayer = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    s.addChild(s.bodyLayer);

    s.bodyLayer.addShape(LShape.RECT, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, w, h]);

    s.draw();

    LTweenLite.to(s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, {
        rotate : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>,
        loop : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,
        ease : Cubic.easeInOut
    }).to(s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, {
        rotate : -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>,
        ease : Cubic.easeInOut
    });
}

Body.prototype.draw = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>,
    w = s.w,
    h = s.h,
    r = s.r,
    c = s.fillColor,
    lx = r - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>,
    rx = w - r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>,
    uy = r - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>,
    dy = h - r + <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>,
    pi = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;

    s.bodyLayer.graphics.clear();

    s.bodyLayer.graphics.drawRoundRect(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, w, h, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);

    s.bodyLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [lx, uy, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, pi], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
    s.bodyLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [rx, uy, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, pi], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);

    s.bodyLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [lx, dy, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, pi], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
    s.bodyLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [rx, dy, r, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, pi], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li></ul>

参数介绍：

  • w：身躯的宽度
  • h：身躯的高度
  • r ：身躯上用于装饰的圆的半径

在该类中，draw函数就是用来绘制部件的，如果重复调用draw，则可达到刷新的目的。除此之外，我们使用了LTweenLite来实现缓动动画。以下其他的类和此类原理相同。

Head.js

头部部件——Head类：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Head</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(w, h)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, Part, []);

    s.w = w;
    s.h = h;

    s.faceLayer = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    s.faceLayer.x = -w / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;
    s.faceLayer.y = -h * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.9</span>;
    s.addChild(s.faceLayer);

    s.faceLayer.addShape(LShape.RECT, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, w, h]);

    s.draw();

    LTweenLite.to(s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>, {
        rotate : -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,
        loop : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,
        ease : Sine.easeInOut
    }).to(s, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>, {
        rotate : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,
        ease : Sine.easeInOut
    });
}

Head.prototype.draw = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, w = s.w, h = s.h;

    s.faceLayer.graphics.clear();

    s.faceLayer.graphics.drawRoundRect(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, w, h, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, s.fillColor);

    s.faceLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span>);
    s.faceLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">11</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>);

    s.faceLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [w - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"white"</span>);
    s.faceLayer.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [w - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">11</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>);

    s.faceLayer.graphics.add(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> c = LGlobal.canvas;

        c.lineWidth = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;
        c.strokeStyle = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>;
        c.lineCap = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"round"</span>;
        c.moveTo(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>);
        c.quadraticCurveTo(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, w - <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>);
        c.stroke();
    });
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li></ul>

Limb.js

肢干部件——Limb类：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Limb</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(l, r, rotate1, rotate2, rotate3, rotate4)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>;
    LExtends(s, Part, []);

    s.l = l;
    s.r = r;

    s.part1 = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    s.addChild(s.part1);

    s.part2 = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LSprite();
    s.part2.y = l - r;
    s.part1.addChild(s.part2);

    s.draw();

    s.part1.addShape(LShape.RECT, [-r, -r, r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, l]);
    s.part2.addShape(LShape.RECT, [-r, -r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.5</span>, r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, l]);

    LTweenLite.to(s.part1, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, {
        rotate : rotate1,
        loop : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>
    }).to(s.part1, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>, {
        rotate : rotate2
    });

    LTweenLite.to(s.part2, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, {
        rotate : rotate3,
        loop : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>
    }).to(s.part2, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.8</span>, {
        rotate : rotate4
    });
}

Limb.prototype.draw = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> s = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>,
    l = s.l,
    r = s.r,
    w = r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,
    c = s.fillColor;

    s.part1.graphics.clear();
    s.part2.graphics.clear();

    s.part1.graphics.drawRoundRect(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [-r, -r, w, l, r], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
    s.part1.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.4</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);

    s.part2.graphics.drawRoundRect(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [-r, -r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.5</span>, w, l, r], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
    s.part2.graphics.drawArc(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black"</span>, [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, r * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.4</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Math</span>.PI * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>], <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>, c);
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li></ul>

以上的代码应该注意的是每种部件的画法。当然艺术这种东西怎么能靠言传呢？所以我就不打算深究代码的含义了。至于各种部件的画法，欢迎各位借鉴。如有不通之处，敬请留言。

源代码下载

下载地址：http://wyh.wjjsoft.com/downloads/drag_and_drop_robot.zip

本次梦幻之旅就到此为止，喜欢该系列的看官可以来此专栏阅读该系列其他文章： 
http://blog.csdn.net/column/details/dreamy-travel-in-h5.html

zzy373712896
关注
专栏目录
『HTML5梦幻之旅』 - 仿Qt示例Drag and Drop Robot（换装机器人）
Yorhom's Game Box
07-06 1万+
前面我们看到的机器人就是通过这个类来实现的。但是正如学过生物必修一的同学都知道，动物生命层次是这样的：个体->系统->器官->组织->细胞，我们的机器人就是个体，那么四肢构成运动系统，以此类推。所以我们的这个Robot类就只是个装载头部，身躯，四肢的容器。在上面给出的文件结构中可以看到，还有Head.js和Body.js这些类，他们的实例化对象就是放在Robot这个个体里的部件了
机器人html5网站模板
03-31
机器人html5网站模板
『HTML5梦幻之旅』 - 仿Qt演示样例Drag and Drop Robot（换装机器人）
weixin_34346099的博客
07-26 230
起源 在Qt的演示样例中看到了一个有趣的demo。截图例如以下： 这个demo的名字叫Drag and Drop Robot，简单概括而言，在这个demo中，能够把机器人四周的颜色拖动到机器人的各个部位，比方说头。臂，身躯等。然后这个部位就会变成相应的颜色。相似于换装小游戏。 上图就是经过愚下的拖动颜色使其简略换装后的样子。 当然，拖动颜色使部件变色的功能并不难...
html5行走的机器人,HTML5 不倒翁体型的机器人
weixin_36476970的博客
06-26 119
CSS语言：CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Raleway);*,*:before,*:after {box-sizing: border-box;}body {background: #869f9d;overflow: hidden;}h2 {color: #ccc;font-family: "ralewa...
基于HTML5 拖拽接口(Drag and drag-and-drop interfaces based on HTML5
02-12
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖放（Drag and Drop）功能就是一项增强用户交互体验的重要接口。拖放接口允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，使得网页的互动性...
HTML5+CSS3实现拖放(Drag and Drop)示例
09-28
其中之一就是拖放（Drag and Drop）功能，使得用户可以通过简单的鼠标操作在网页上移动元素，极大地提升了交互性。本示例将详细介绍如何使用HTML5和CSS3实现拖放功能。 拖放功能在HTML5中被标准化，其核心在于`...
DragandDrop.rar_dragAndDrop
07-13
本资料"DragandDrop.rar_dragAndDrop"聚焦于在Internet Explorer（IE）浏览器中实现文件拖放的扩展功能，为开发者提供了宝贵的指导。 文件拖放技术的核心在于HTML5中的Drag and Drop API，这是一个强大的功能，使得...
自动聊天机器人简单实现（纯html5+jquery）
06-04
纯HTML5+jquery实现网页版机器人自动聊天
html5篇——拖放(Drag和Drop)
u010556394的专栏
05-30 5347
好久没有更新html5了，继续更新html5，今天更新html5的拖放功能。 拖放，就是抓取一个对象后拖放到另一个位置。很常用的一个功能，在html5中，任何元素都能够拖放。 浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释：在 Safari 5.1.2 中不支持拖放。
HTML5拖放(Drag和Drop)的例子
04-30
在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 目前浏览器支持情况：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。 HTML5 Drag Drop 拖放例子 dragenter
js/jq模特换装html
12-06
自动换装功能，点击手动换装功能，切换背景功能
html5火星探测机器人样式代码
ICode联盟
11-01 103
html5火星探测机器人样式代码。
我的大二web课程设计 使用HTML做一个简单漂亮的页面（纯html代码）
HTML网页设计
08-19 1522
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；......
前端超简单炫酷好玩Div换衣服小案例（HTML+CSS+jQuery）
我们好像在哪见过 私
07-10 4523
点击右下角衣服图片可以切换成想要的样式....
robotframework冷门关键字
Charlie8915的博客
09-19 468
1.Reload Page 模拟页面重载 2.Register Keyword To Run On Failure 参数： Keyword 描述： 当Selenium2Library类库关键字执行失败时，自劢执行事先设置好的其他的关键字。 Keyword_name 就是关键字名称（从任何可用库中获得）。如果Selenium2Library关键字执行失 败的情况下它是无法使用的...
html5虚拟试衣,Trylive Clothing虚拟试衣系统 打造属于你个人的魔法试衣间
weixin_29870701的博客
06-17 760
女士们逛街的时候有没有试过看中了很多件衣服，可是却不好意思跟售货员说你全部也想试上身? 或许你根本也没有这么多时间把所有衣服的换上?科技改变生活，也改变我们的购物习惯。从前我们于实体店购物，到近几年疯狂似的于线上网购。今天我们把传统的服装零售模式也可以改变过来。说的就是“虚拟试衣”。“虚拟试衣” 的构念很早就已经存在，可是当时技术还未跟得上，以至试衣体验未能如意。但今天我们的科技快展迅速，不只可以...
html5 drag and drop,HTML5 Drag and Drop with Selenium Webdriver
weixin_39543835的博客
06-19 475
Copy linkMemberAuthorReported by barancev on 2012-03-27 06:12:04Labels added: Component-WebDriverCopy linkMemberAuthorHere is a temporary workaround that could help the community with testing in the m...
地级市GDP及产业结构数据-最新.zip
最新发布
11-14
地级市GDP及产业结构数据-最新.zip
HTML5拖放详解：Drag and Drop实例及兼容性
"本文将详细介绍HTML5中的拖放功能(Drag and Drop)，这是一种允许用户通过鼠标操作在网页上移动、复制或粘贴元素的交互方式。HTML5将其作为标准集成，使得任何元素都可以实现拖放。本文首先介绍了一个简单的HTML5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值