【一、项目背景】
createjs是一个基于canvas的制作h5游戏、动画、交互的库。包括easeljs、tweenjs、soundjs、 preloadjs四个部分。它基于容器进行展示，其中根容器是stage（舞台）对象。
今天教大家用easeljs、tweenjs结合做一个颜色配对游戏。
【二、项目准备】
下载easeljs、tweenjs这两个模块。
2、软件：dreamweaver
【三、项目目标】
随机产生4种颜色，让下方的色块通过鼠标移动，匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。
【四、项目实现】
1、导入easeljs、tweenjs模块。
＜script src＝＂js／easeljs－0．7．1．min．js＂＞＜／script＞＜script src＝＂js／tweenjs－0．5．1．min．js＂＞＜／script＞
2、body 创建画布canvas 设置画布大小，画布添加描边 ，id属性。＜canvas id＝＂canvas＂ width＝＂600＂ height＝＂400＂ style＝＂border： black solid 1px＂＞＜／canvas＞
3、创建shapes．js文件。定义一个初始化init（）方法 ，创建stage对象。function init（） ｛ stage ＝ new createjs．stage（＂canvas＂）；｝
4、定义画图形方法buildshapes（），调用createjs．shape（）方法 用graphics绘制描边正方形。填充颜色。function buildshapes（） ｛ var colors ＝ ［＇blue＇， ＇red＇， ＇green＇， ＇yellow＇］； var i， shape， slot； for （i ＝ 0； i ＜ 4； i＋＋） ｛ ／／slots 描边正方形 slot ＝ new createjs．shape（）； slots．push（slot）； ／／shapes 正方形 shape ＝ new createjs．shape（）； shape．graphics．beginfill（colors［i］）； shape．graphics．drawrect（0， 0， 100， 100）； shape．regx ＝ shape．regy ＝ 50； shape．key ＝ i； shapes．push（shape）； ｝｝
5、设置正方形x，y的位置， for循环随机填充颜色，添加在stage上。slot．graphics．beginstroke（colors［i］）；slot．graphics．beginfill（createjs．graphics．getrgb（255， 255， 255， 1））；slot．graphics．drawrect（0， 0， 100， 100）；slot．regx ＝ slot．regy ＝ 50；slot．key ＝ i；slot．y ＝ 80；slot．x ＝ （i ＊ 130） ＋ 100；stage．addchild（slot）；
6、定义setshapes方法，for循环随机产生一个r值，添加到shapes。产生移动的正方形。添加到舞台（stages）上。function setshapes（） ｛ var i， r， shape； var l ＝ shapes．length； for （i ＝ 0； i ＜ l； i＋＋） ｛ r ＝ math．floor（math．random（） ＊ shapes．length）； shape ＝ shapes［r］； shape．homey ＝ 320； shape．homex ＝ （i ＊ 130） ＋ 100； shape．y ＝ shape．homey； shape．x ＝ shape．homex； stage．addchild（shape）； shapes．splice（r， 1）； ｝｝
7、添加鼠标事件。控制正方形移动。 shape．addeventlistener（＂mousedown＂， startdrag）；
8、定义开始游戏方法startgame，设置游戏的帧数，添加监听事件。
function startgame（） ｛ createjs．ticker．setfps（60）； createjs．ticker．addeventlistener（＂tick＂， function （e） ｛ stage．update（）； ｝）；｝
9、判断游戏方法startdrag（e）
1）获取当前鼠标的坐标。
var shape ＝ e．target；
2）让鼠标的坐标等于填充正方形的坐标。
stage．addeventlistener（＇stagemousemove＇， function （e） ｛ shape．x ＝ e．stagex； shape．y ＝ e．stagey； ｝）；
3）hittest方法。测试图像是否与颜色相同的框有交集，判断颜色是否相同。
if （slot．hittest（pt．x， pt．y）） ｛ shape．removeeventlistener（＂mousedown＂，startdrag）； score＋＋； createjs．tween．get（shape）．to（｛x：slot．x， y：slot．y｝， 200， createjs．ease．quadout）．call（checkgame）； console．log（＇h＇）； ｝ else ｛ ｝
4）tweenjs设置动画效果。
createjs．tween．get（shape）．to（｛x：shape．homex， y：shape．homey｝， 200， createjs．ease．quadout）；
10、定义赢的方法checkgame ，用score分别代表四种颜色色块，判断score的值。function checkgame（）｛ if（score ＝＝ 4）｛ alert（＇you win！＇）； ｝｝
11、在init（）中，调用方法，实现效果buildshapes（）；setshapes（）；startgame（）；
【五、效果展示】
1、f12运行到chrome浏览器。
2、拖动随机颜色块，匹配颜色框。
3、四个颜色块匹配完成 弹框 （胜利）！！
【六、总结】
1、本文主要介绍了createjs中easeljs、tweenjs的用法，以及对stage是如何创建的，在stage上怎么去绘制图形。在页面上如何去呈现stage。
2、就本项目中的难点，重点，提供了详细的讲解和提供有效的解决方案。
3、大家可以尝试了解createjs的其他模块，官网上有对应的api文档供大家学习。
4、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
Python进阶学习交流