简单html开源游戏案例,基于CreatejsHTML5游戏案例（看你有多色游戏案例）

看你有多色游戏玩法

这款游戏的玩法就是找出所有风格中颜色比较淡的，主要是考你的眼力和注意力

最开始是最简单的，轻易可以辨认出，越到后面就越难

方块越来越多，颜色的对比度也越来越小

到最后要非常专注才能看出

游戏界面

参考代码

index.html

Title

app.js

var stage=new createjs.Stage("gameView");

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick",stage);

var gameView=new createjs.Container();

stage.addChild(gameView);

function startGame() {

getCanvasSize();

n=2;

addRect();

}

function addRect() {

var c1=parseInt(Math.random()*1000000);

var color=("#"+c1);

var x=parseInt(Math.random()*n);

var y=parseInt(Math.random()*n);

for (var indexX=0;indexX

for (var indexY=0;indexY

var c2=parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY));

var Rectcolor=("#"+c2);

var c3=parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY));

var Rectcolor=("#"+c3);

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*(getSize()/n);

r.y=indexY*(getSize()/n);

if (r.getRectType()==2){

r.addEventListener("click",clickRect)

}

}

}

}

function clickRect() {

if (n<7){

++n;

}

gameView.removeAllChildren();

addRect();

}

function getCanvasSize() {

var gView=document.getElementById("gameView");

gView.height=window.innerHeight-4;

gView.width=window.innerWidth-4;

}

function getSize() {

if (window.innerHeight>=window.innerWidth){

return window.innerWidth;

} else {

return window.innerHeight;

}

}

startGame();

Rect.js

function Rect(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,getSize()/n-2,getSize()/n-2);

this.graphics.endFill();

}

this.getRectType=function () {

return this._RectType;

}

this.setRectType(1);

}

Rect.prototype=new createjs.Shape();