admin管理员组文章数量:1637217
使用了封装了canvas的create.js库来实现的。
最终效果:
工程:
Rect.js
/** 方块类*/
functionRect(n,color,specialColor){
createjs.Shape.call(this);/**
* 设置方块的类型*/
this.setRectType=function(type){this._RectType=type;switch(type){case 1:this.setColor(color);break;case 2:this.setColor(specialColor);break;
}
}/**
* 获取方块的类型*/
this.getRectType=function(){return this._RectType;
}/**
* 设置方块的颜色+绘制方块*/
this.setColor=function(colorString){this.graphics.beginFill(colorString);this.graphics.drawRect(0,0,400/n-5,400/n-5);this.graphics.endFill();
}//方块的默认类型是1
this.setRectType(1);
}
Rect.prototype=new createjs.Shape();
seeColor.js
/**
* 绘制舞台*/
var stage=new createjs.Stage("gameView");var gameView=newcreatejs.Container();
stage.addChild(gameView);//var s=new createjs.Shape();//s.graphics.beginFill("#00FF00");//s.graphics.drawRect(0,0,100,100);//s.graphics.endFill();
//gameView.addChild(s);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);//特殊的那个方块的容差
var diffDegree=30;//n*n的矩阵
var n=2;var maxN=7;//在随机生成颜色的时候[0,500] [500,255*255*255]这两个区间内的颜色将被排除
var edgeColor=10;functionaddRect(){//随机颜色
var randR=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;var randG=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;var randB=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;//特殊方块的颜色
var specialR=randR-diffDegree>edgeColor?randR-diffDegree:randR+diffDegree;var specialG=randG-diffDegree>edgeColor?randG-diffDegree:randG+diffDegree;var specialB=randB-diffDegree>edgeColor?randB-diffDegree:randB+diffDegree;var color="rgb("+randR+","+randG+","+randB+")";var specialColor="rgb("+specialR+","+specialG+","+specialB+")";//特殊方块的位置
var specialX=Math.floor(Math.random()*n);var specialY=Math.floor(Math.random()*n);//绘制所有方块
for(var indexX=0;indexX
gameView.addChild(r);
r.x=indexX;
r.y=indexY;if(r.x==specialX && r.y==specialY){
r.setRectType(2);
}
r.x=indexX*(400/n);
r.y=indexY*(400/n);
if(r.getRectType()==2){//点到特殊方块的时候重绘
r.addEventListener("click",function(){if(n
}
gameView.removeAllChildren();
addRect();
});
}
}
}
}
addRect();
index.html
See Color参考资料:
create.js
版权声明:本文标题:mm游戏大全HTML5小游戏,HTML5小游戏——看你有多色(示例代码) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729246548a1192200.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论