游戏|createjs之easeljs【游戏看你有多色（一）】游戏|javascript

文章图片

【游戏|createjs之easeljs【游戏看你有多色（一）】】小游戏，点不同颜色的矩形块就算闯关成功了。

html文件中引入两个js文件

rect.js

rect封装类rect具备的属性：大小与n相关，颜色与color和Rectcolor相关，传入这三个参数

function Rect(n,color,Rectcolor) { createjs.Shape.call(this); 构造函数 this.setRectType= function (type) { this._RectType=type; switch (type){ case 1: this.setColor(color); break; case 2: //this.setColor("#ff0000"); this.setColor(Rectcolor); break; }} this.setColor=function(colorString){ this.graphics.beginFill(colorString); this.graphics.drawRect(0,0,400/n-5,400/n-5); 每两个矩形中间都有5cm空隙 this.graphics.endFill(); } this.getRectType= function () { return this._RectType; } this.setRectType(1); 初始化为全是1类型 } Rect.prototype=new createjs.Shape(); prototype意为rect是shape的一个实例化对象

app.js

游戏逻辑，比较简单

var stage=new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView=new createjs.Container(); stage.addChild(gameView); 必须的几句，这个就不多说了。

var n=2; 宏定义每行/列有多少个矩形

function addRect() { var cl=parseInt(Math.random()*1000000); var color="#"+cl; 随机color颜色，普通矩形 var cl2=parseInt(Math.random()*1000000); 随机Rectcolor颜色，要点的矩形。待我再研究研究颜色之间的关系吧，木有接触过啊。 while(cl2==cl) { var cl2=parseInt(Math.random()*1000000); } var rectcolor="#"+cl2; var x=parseInt(Math.random()*n); var y=parseInt(Math.random()*n); 随机要点矩形的位置 for(var indexX=0; indexX<n; indexX++) { for(var indexY=0; indexY<n; indexY++) { var r=new Rect(n,color,rectcolor); gameView.addChild(r); r.x=indexX; r.y=indexY; if(r.x==x&& r.y==y) { r.setRectType(2); } r.x=indexX*(400/n); r.y=indexY*(400/n); 这里才是为矩形设置位置。 if(r.getRectType()==2) { r.addEventListener("click",function(){ if(n<7){ ++n; } gameView.removeAllChildren(); 清除所有图形 addRect(); 然后再加入下一组图形