找不同色块的游戏

Html

Css

关卡：1

 * {
	margin:0;
	padding:0;
}
#box {
	width:600px;
	height:600px;
	margin:auto;
	margin-top:100px;
}
#score {
	width:180px;
	height:50px;
	line-height:150%;
	font-size:2em;
	position:absolute;
	top:30px;
	left:40%;
	text-align:center;
	font-weight:bolder;
}
.creat {
	float:left;
	border-radius:100%;
}

onload = function() {
    var count = 10; //关卡值

var Create = new creat(3); //定义构造函数对象，传入一个参数（开始时的布局3x3）\n

Create.go(); //调用构造函数里面的函数属性

//定义构造函数creat
    function creat(event) {
        var obox = document.getElementById("box");

this.className = "creat"; //设置className

this._creat = null; //事先创建出一个属性_creat用于指向一个对象

this.go = function() { //创建颜色块的方法函数
            var colorNum1 = Math.floor(Math.random() * 254) + 1; //随机数取一个值范围是（1~254）防止白色块出现
            var colorNum2 = Math.floor(Math.random() * 254) + 1;
            var colorNum3 = Math.floor(Math.random() * 254) + 1;
            this.color = "rgb(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")"; //定义rgb颜色属性

this.diffOpacity = 0.7; //用于改变其中一个颜色快的颜色(这里可以自定义改变透明度)
            for (var i = 0; i < event * event; i++) {
                this._creat = document.createElement("div"); //动态创建一个div赋给this._creat属性
                this._creat.style.width = Math.floor(600 / event) + "px"; //设置div的宽，高，颜色和className
                this._creat.style.height = Math.floor(600 / event) + "px";
                this._creat.style.backgroundColor = this.color;
                this._creat.className = this.className; //在样式中给div左浮动
                obox.appendChild(this._creat);
            }
            var odiv = document.getElementsByClassName("creat"); //获取一下创建好的div
            var numRandom = parseInt(Math.random() * odiv.length); //随机取到其中一个改变其透明度值
            odiv[numRandom].style.opacity = 0.7;
            odiv[numRandom].onclick = function() {
                /*给取到的div绑定事件，当点击时先清空obox中元素即上一关卡的div
                 *获取score改变n的值
                 *改变event的值，可以自定义难度
                 *再调用一下调用构造函数里面的go函数属性,创建一组新的元素
                 */
                var oScore = document.getElementById("score");
                count++;
                oScore.innerHTML = "关卡：" + count + "";
                obox.innerHTML = "";
                event++;
                Create.go();
            }
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

找不同色块的游戏



代码描述：找不同色块的游戏（构造函数）

找不同色块的游戏

9

最新

发表评论全部评论

暂时没有评论！

背影0

2017/11/10 14:52:14

挺好玩，就是眼睛扛不住啊
回复

Mimingung0

2017/10/12 15:56:50

找不着了

Mimingung0

2017/10/12 15:57:43

228关

吴侃0

2017/10/18 16:48:58

我自己都玩不到哪里~~666

xujuan70900

2017/11/10 17:53:59

216关，实在找不到了

回复

泪染伊人妆ツ0

2017/10/11 15:08:28

129 是在点不住了
回复

????0

2017/10/9 10:45:43

36关怎么过
回复

西瓜0

2017/9/17 22:57:23

不错，玩到69关

吴侃0

2017/9/21 10:52:31

O(∩_∩)O谢谢

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

吴侃

相关代码

找不同色块的游戏

最新