色彩配对游戏(颜色配对游戏的玩法和规则)

【一、项目背景】createjs是一个基于帆布的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、PreloadJs四个部分。它基于容器进行展示，其中根容器是舞台（舞台)对象。今天教大家用EaselJs、TweenJs结合做一个颜色配对游戏。【二、项目准备】1、去下方网站：
http://www.createjs.cc/然后下载EaselJs、TweenJs这两个模块。
2、软件：Dreamweaver三、项目目标】随机产生四种颜色，让下方的色块通过鼠标移动，匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。【四、项目实现】1、导入EaselJs、TweenJs模块。
2、身体创建画布帆布设置画布大小，画布添加描边，id属性。
3、创建形状。射流研究…文件。定义一个初始化初始化()方法，创建阶段对象。
函数init() { stage=new createjs .舞台(“画布”);}4、定义画图形方法buildShapes()，调用createjs .形状()方法用制图法绘制描边正方形。填充颜色。
函数build shapes(){ var colors=[‘ blue ‘，’ red ‘，’ green ‘，’ yellow ‘]；var i，形状，槽；for(I=0；I 4；I){//插槽描边正方形slot=new createjs .shape()；老虎机。推(槽)；//形状正方形shape=新建.shape()；形状。图形。开始填充(颜色[I])；shape.graphics.drawRect(0，0，100，100)；形状。regx=形状。regy=50形状。key=I；形状.推送(形状);}}5、设置正方形x，y的位置，用于循环随机填充颜色，添加在阶段上。
插槽。图形。开始描边(颜色[I])；插槽。图形。开始填充(创建js .Graphics.getRGB(255，255，255，1))；slot.graphics.drawRect(0，0，100，100)；插槽。regx=slot。regy=50插槽。key=I；slot.y=80slotx=(I * 130)100；舞台。addchild(slot)；6、定义setShapes方法，用于循环随机产生一个r值，添加到形状。产生移动的正方形。添加到舞台（阶段)上。
函数setShapes() { var i，r，shapevar l=形状。长度；for(I=0；I l；I){ r=数学。地板(数学。随机()*形状。长度)；shape=shapes[r]；shape.homeY=320shape。homex=(I * 130)100；形状。y=形状。homey形状。x=形状。homex舞台。addchild(形状)；拼接(r，1)；}}7、添加鼠标事件。控制正方形移动。
形状。addevent侦听器(“mousedown”，开始拖动)；8、定义开始游戏方法开始游戏，设置游戏的帧数，添加监听事件。
函数startGame() { createjs .股票。setfps(60)；createjs .Ticker.addEventListener(‘tick ‘，函数(e){ stage。update()；});}9、判断游戏方法startDrag(e)1)获取当前鼠标的坐标。
var shape=e.target2)让鼠标的坐标等于填充正方形的坐标。
舞台。addevent侦听器(‘ stage mousemove ‘，函数(e){ shape。x=e . stagex形状。y=e . stagey});3)击中方法。测试图像是否与颜色相同的框有交集，判断颜色是否相同。
if (slot.hitTest(pt.x，pt。y)){形状。移除事件侦听器(“mousedown”，开始拖动)；分数；createjs .Tween.get(shape).到({x:slot.x，y:slot.y}，200，createjs .Ease.quadOut).调用(检查游戏)；控制台。log(‘ h ‘)；} else { }4)TweenJs设置动画效果。
createjs .Tween.get(shape).到({x:shape.homeX，y:shape.homeY}，200，createjs .放松。quad out)；10、定义赢的方法checkGame，用得分分别代表四种颜色色块，判断得分的值。
函数检查game(){ if(score==4){ alert(‘你赢了!’);}}11、在初始化()中，调用方法，实现效果
构建形状()；设置形状()；开始游戏()；【五、效果展示】1、f12运行到铬浏览器。
2、拖动随机颜色块，匹配颜色框。
3、四个颜色块匹配完成弹框（胜利)!
[六。总结] 1。本文主要介绍createjs中EaselJs和TweenJs的用法，以及如何创建stage和如何在stage上绘制图形。如何在页面上呈现stage？2.针对项目中的难点和重点，提供了详细的说明和有效的解决方案。3.可以试着了解一下createjs的其他模块。官网上有相应的API文档供你学习。4.按照操作步骤，自己试着做。当你认识到自己的时候，总会有各种各样的问题。不要谦虚，要勤奋，这样才能理解得更深刻。5.如需本文源代码，可在后台回复“配色”二字获取。* * * *看完这篇文章你有什么收获吗？请转发，分享给更多人* * *
想了解更多关于Python网络爬虫和数据挖掘的知识，可以去专业网站：http://pdcfighting.com/.