找色块小游戏

灰太狼 2022-06-10 01:54 212阅读 0赞

# [点此试玩][Link 1] #

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

[Link 1]: https://hanjixin.github.io/hanjixin/myfindcolor/index.html