/**
* Created by 韩吉鑫 on 2017/8/7.
*/
window.Findcolor=window.Findcolor||{};
(function () {
function Game() {
this.toolView();
// this.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
this.init();
this.loadView();
this.timer=null;
}
Game.prototype.loadView=function () {
if(this.gameContent){
this.gameContent.parentNode.removeChild(this.gameContent);
}
var self=this;
this.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
var num=this.row*this.row;
//创建碎片文档
var temp=document.createDocumentFragment();
var id=parseInt(Math.random()*num);
for(var i=0;i<num;i++){
if(i===id){
var item=new Findcolor.colorView({background:this.color,opacity:0.8,row:this.row,containerWidth:"400"}).view;
item.onclick=function () {
if (!self.timer){return}
// 成功
++self.row;
++self.score;
self.updateView();
self.loadView();
}
}
else
{
var item=new Findcolor.colorView({background:this.color,opacity:1,row:this.row,containerWidth:"400"}).view;
item.onclick=function () {
if (!self.timer){return}
// 失败
self.updateView();
self.stop();
self.loadView();
}
}
temp.appendChild(item);
}
this.gameContent=document.createElement("div");
// this.gameContent.setAttribute("disabled",true);
this.gameContent.style.cssText = "width:400px;height:400px;background-color:#E2E2E2;";
this.gameContent.appendChild(temp);
document.body.appendChild(this.gameContent);
//todo
}
Game.prototype.start=function () {
var self=this;
this.timer=setInterval(function () {
--self.currenttime;
self.updateView();
if(self.currenttime==0){
this.init();
this.stop();
}
}.bind(this),1000)
};
Game.prototype.stop=function () {
clearInterval(this.timer);
this.timer=null;
this.init();
};
Game.prototype.updateView=function () {
this.timeView.textContent = "还剩"+this.currentTime+"秒";
this.scoreView.textContent = this.score+"分";
};
Game.prototype.PK=function () {
};
Game.prototype.music=function () {
};
Game.prototype.toolView=function () {
// var self=this;
//
// var start=document.createElement("button");
//
//
// start.textContent="开始";
// start.οnclick=function () {
// self.start();
// }
// var timeView = document.createElement("span");
// var scoreView = document.createElement("span");
// toolContainer.appendChild(timeView);
// toolContainer.appendChild(scoreView);
//
// this.timeView = timeView;
// this.scoreView = scoreView;
var toolContainer = document.createElement("div");
var startButton = document.createElement("button");
var stopButton = document.createElement("button");
startButton.textContent = "开始";
stopButton.textContent = "停止";
var self = this;
startButton.onclick = function () {
self.start();
};
stopButton.onclick = function () {
self.stop();
};
toolContainer.appendChild(startButton);
toolContainer.appendChild(stopButton);
document.body.appendChild(toolContainer);
var timeView = document.createElement("span");
var scoreView = document.createElement("span");
toolContainer.appendChild(timeView);
toolContainer.appendChild(scoreView);
this.timeView = timeView;
this.scoreView = scoreView;
};
Game.prototype.init=function () {
this.row=2;
this.currentTime=10;
this.score = 0;
this.timeView.textContent = "还剩"+this.currentTime+"秒";
this.scoreView.textContent = this.score+"分";
this.loadView();
}
Findcolor.Game=Game;
})();
/**
* Created by 韩吉鑫 on 2017/8/7.
*/
/**
* Created by 韩吉鑫 on 2017/8/7.
*/
window.Findcolor=window.Findcolor||{};
(function () {
/**
*
* @param info
* bg
* option
* row
* containerWidth
*/
function colorView(info) {
var _info=info||{};
this.view = document.createElement("div");
//宽度 高度 外边距 背景色 不同明度 浮动
var row=_info.row;
var spanNum=row+1;
console.log(_info.containerWidth);
var space=_info.containerWidth/row/15;
var width=(_info.containerWidth-space*(spanNum))/row;
// this.view.style.cssText="background-clor:"+_info.background+";opacity:"+_info.opacity+";float:left;width:"+width+"px;height:"+width+"px;margin-left:"+space+"px;margin-top:"+space+"px;";
this.view.style.cssText = "background-color:"+_info.background+";opacity:"+_info.opacity+";float:left;width:"+width+"px;height:"+width+"px;margin:"+space+"px 0 0 "+space+"px; border-radius: 10%;";
}
Findcolor.colorView=colorView;
})();
function init() {
new Findcolor.Game();
}
init();