HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js
【HTML5游戏-看你有多色】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();
}
}推荐阅读
- 一个小故事，我的思考。
- 第三节|第三节 快乐和幸福（12）
- 开学第一天（下）
- 死结。
- 游戏IP（立足于玩家情感的粉丝经济）
- “成长”读书社群招募
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- 危险也是机会
- 情节33.0
- 2019-1-14