效果：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>看你有多色</title>
<script src="easeljs.min.js"></script>
<script src="Rect.js"></script>
</head>
<body>
<canvas width="800px" height="800px" id="gameView"></canvas>
<script src="app.js"></script>
</body>
</html>
app.js
/**
* Created by xxc on 2018/11/24.
*/
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;
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);
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();
})
}
}
}
}
addRect();
Rect.js
/**
* Created by xxc on 2018/11/24.
*/
function Rect(n,color){
createjs.Shape.call(this);
this.setRectType = function (type) {
this._RectType = type;
switch (type){
case 1:
this.setColor(color);
break;
case 2:
this.setColor("#ff0000");
break;
}
}
this.setColor = function (colorString) {
this.graphics.beginFill(colorString);
this.graphics.drawRect(0,0,400/n-5,400/n-5);
this.graphics.endFill();
}
this.getRectType = function () {
return this._RectType;
}
this.setRectType(1);
}
Rect.prototype = new createjs.Shape();