html5黄游戏,HTML5游戏-看你有多色

需引入easeljs-0.7.1.min.js

html:

倒计时:60s 分数:0Rect.js,在html中需要引入:

function Rect(n,color){//个数

createjs.Shape.call(this);//构造方法

this.setRectType = function (type) {

this._RectType = type;

switch (type){

case 1:

this.setColor(color);

break;

case 2://选项的颜色

// this.setColor("white");

this.setColor("#"+parseInt(Math.random()*1000000));

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();主要的js代码(js.js):

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

createjs.Ticker.setFPS(30);

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

var gameView = new createjs.Container();

stage.addChild(gameView);//固定代码

var aid = document.getElementById("aid");

var score = 0;

var n = 2;//初始2行

function addRect() {

var color = "#" + parseInt(Math.random() * 1000000);//随机颜色

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

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 < 9) {

++n;

}

gameView.removeAllChildren();

score++;

aid.innerHTML = score + "";

addRect();

});

} else if (r.getRectType() == 1) {

r.addEventListener("click", function () {

alert("你有" + score + "分色");

window.location.reload();

});

}

}

}

}

addRect();

window.onload = function () {

time();//不放这第一次undefineds

};

var t = 60;

function time() {

var aid2 = document.getElementById("aid2");

aid2.innerHTML = t + "";

t--;

setTimeout(time,1000);

if(t == -1 ){

alert("你有" + score + "分色");

window.location.reload();

}

}