开发工具:pycharm
游戏介绍: 这是一款小游戏,虽然名字有点猥琐,但是游戏确实是很纯洁的,纯洁到不能再纯洁了 。 这款游戏的玩法就是找出所有风格中颜色比较淡的,主要是考你的眼力和注意力 。 最开始是最简单的,轻易可以辨认出,越到后面就越难 , 方块越来越多,颜色的对比度也越来越小 , 到最后要非常专注才能看出 , 总之,这游戏就是在规定时间内尽可能的过更多关,对练眼还是有一定好处的,小伙伴快来玩吧 。
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/easeljs.min.js"></script>
<script src="js/Rect.js"></script>
</head>
<body>
<canvas id ="gameView" width="400px" height="400px"></canvas>
<script src="js/a.js"></script>
</body>
</html>
app.js
// JavaScript Document
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);//var r = new Rect(n,color,RectColor);
gameView.addChild(r);
r.x = indexX;
r.y = indexY;
if(r.y == y&&r.x == x){
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
// JavaScript Document
function Rect(n,color){ //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("#ff0000");
break;
}
}
this.setColor = function(colorString){
this.graphics.beginFill(colorString); //开始绘制
this.graphics.drawRect(0,0,400/n-5,400/n-5);//左居左为0,上居上为0,右居左为宽400px/n-5(计算列数,-5是为了设置列间距),下居上为400/n-5(正好为正方形)
this.graphics.endFill(); //结束绘制
}
//设置类型
this.getRectType = function(){
return this._RectType;
}
this.setRectType(1);
}
//初始化
Rect.prototype = new createjs.Shape();
运行结果:
简单:
容易:
难:
较难:
来源:oschina
链接:https://my.oschina.net/u/4463382/blog/3211456