色盲游戏-CSDN博客

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>色盲游戏</title>
</head>
<body>
<canvas id="gameView" width="400px" height="400px">
</canvas>
<script src="js/easeljs-0.7.1.min.js"></script>
<script src="js/Rect.js"></script>
<script src="js/app.js"></script>
</body>
</html>

主要是用canvas来画图。

JS部分：

/*app.js
*这里是先弄好一个容器gameView

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);//FPS:每秒钟填充图像的帧数
createjs.Ticker.addEventListener("tick", stage);
var gameView = new createjs.Container();
stage.addChild(gameView);

先尝试画一个正方形：

//这里实现了绘制一个红色正方形
var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();
stage.addChild(gameView);
var s = new createjs.Shape();
s.graphics.beginFill("#ff0000");
s.graphics.drawRect(0, 0, 100, 100);
s.graphics.endFill();

gameView.addChild(s);
createjs.Ticker.setFPS(30);//FPS:每秒钟填充图像的帧数
createjs.Ticker.addEventListener("tick", stage);

效果：

然后接下来就是继续做那个色盲游戏：

先设置正方形，分别是目标方块和其余方块：

function Rect (n, color, RectColor) {//n：有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.getRectType = function () {
		return this._RectType;
	}
	this.setRectType(1);
}

Rect.prototype = new createjs.Shape();

2.如何绘制在canvas里

var n = 2;//初始为2平方个（即4个）方块
function addRect () {
	//var cl = Math.random()*1000000;//随机一种颜色,但是要转换成Int类型
	var cl = parseInt(Math.random()*1000000);
	var color = "#" + cl;
	var rcl = parseInt(cl + 1000);
	var rectColor = "#" +rcl;
	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);
			//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 < 15) {
						++n;//边上出现到第16个就不再增加方块数量
					}
					gameView.removeAllChildren();//每点击目标方块，先把原来的所有图层都删去
					addRect();//然后再添加新图层，然后一直死循环下去。。。
				})
			}
		}
	}
}
addRect();

转载于:https://my.oschina.net/defore/blog/299254