游戏很简单，就是找到不同颜色的一个正方形，点击它就会加大难度，最多可以变成横排7个，竖排7个。
引了一个基于canvas开发的easeljs框架，可以去网站去下载一下http://createjs.com/
Paste_Image.png
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/easeljs-0.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/rect.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<canvas id="gameView" width="400px" height="400px"></canvas>
<script src="js/appcolor.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
rect.js
function Rect(n,color,RectColor){
//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(RectColor);
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();
appcolor.js
var stage= new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);
//n 列数 最少等于2
var n = 2;
function addRect(){
//随机生成一个颜色
var cl = parseInt(Math.random() * 1000000);
var color = "#"+cl;
//根据n 生成不同的颜色 n越大生成的颜色越接近
var lhh = cl+(10-n)*500;
var RectColor = "#"+lhh;
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()
})
}
}
}
}
addRect()
逻辑很简单，以及我也注释了好多，希望大家可以用的到。
