开关灯js小游戏

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{border:1px solid #FFFFCC;margin: 0 auto;margin-top: 40px;}
		span{float:left;width:30px;height:30px;margin:2px;border:1px solid #FFAA24;background:#fff}
		span:hover{cursor:pointer}
		.guan{background-color: #ddd;}
		.kai{background-color: #006DBB;}
	</style>
	<body>
	<p>开关灯游戏，点击某一个灯周围的灯会根据点击的反选，当所有的灯都开了就算获胜</p>
	选择难度<select id="level" onchange="start()">
		<option value="8">3级</option>
		<option value="9">4级</option>
		<option value="10">5级</option>
		<option value="11">6级</option>
		<option value="12">7级</option>
		<option value="13">8级</option>
		<option value="14">9级</option>
		<option value="15">10级</option>
		<option value="16">11级</option>
		<option value="17">12级</option>
		<option value="18">13级</option>
	</select>
	<input type="button" onclick="window.location.reload();" value="重玩">
	<div id="cont">
	</div>
	</body>
</html>
<script src="js/j.js"></script>
<script src="index.js"></script>

js代码

var rclass = /[\t\r\n\f]/g;
function Od(id){
	this.id = id;
}
Od.prototype.gd = function(idString){
	return document.getElementById(String(idString));
}
Od.prototype.hasClass = function(selector){//来自jquery
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for (; i < l; i++) {
            if (this[i].nodeType === 1 &&
                (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) {
                return true;
            }
        }

        return false;
}

var od = new Od();

var start = function(){
	var cont = od.gd('cont');
	var sl = parseInt(od.gd('level').value);
	var slen = sl*sl;
	var str = '';
	var sq = Math.sqrt(slen);
	var dj = [0,sq-1,slen-sq,slen-1];
	cont.style.height = String((sq-2)*36)+'px';
	cont.style.width = String((sq-2)*36)+'px';
	for(var i=0;i<slen;i++){
		if(i>dj[0] && i<dj[1]){
			str += '<span name="'+String(i)+'" class="guan" style="display:none">'+'</span>';
		}else if(i>dj[2] && i<dj[3]){
			str += '<span name="'+String(i)+'" class="guan" style="display:none">'+'</span>';
		}else if(i%sq==0 || (i+1)%sq == 0){
			str += '<span name="'+String(i)+'" class="guan" style="display:none">'+'</span>';
		}else{
			str += '<span name="'+String(i)+'" class="guan">'+'</span>';
		}
		
	}
	cont.innerHTML = str;
	var sl = document.getElementsByTagName('span');
	for(var i=0;i<slen;i++){
		sl[i].addEventListener('click',function(e){
			var dn = parseInt(this.getAttribute('name'));
			var pn = [dn,dn-1,dn+1,dn+sq,dn-sq];
			for(var j=0;j<pn.length;j++){
				if(sl[pn[j]].className == 'guan'){
					sl[pn[j]].setAttribute('class','kai');
				}else{
					sl[pn[j]].setAttribute('class','guan');
				}
				
			}
		})
	}
}

start();

代码的github地址如下：
https://github.com/chenwg/js-fly

猜你喜欢