html小游戏色,html 看你有多色 游戏案例

html

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();

app2.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();

style.css

*{

margin: 0px;

padding: 0px;

}

.main{

width: 80%;

margin: 0px 2px;

}

#gameView{

width: 100%;

margin: 20px auto;

}

效果

easeljs.min.js可下载createjs包获得。