jQuery-黑白反斗棋选关模式

来源：互联网发布：伐木累软件老板编辑：程序博客网时间：2024/04/29 21:42
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#log{overflow: scroll;}.cell{background-color: black;}.clickcell{background-color:white;}</style><link rel="stylesheet" href="js/animate.min.css" /><link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css" /><link href="bootstrap/3.3.4/css/bootstrap-theme.min.css" /><script src="js/jquery-1.11.3.min.js"></script><script src="bootstrap/3.3.4/js/bootstrap.min.js"></script></head><body><div class="container"><div class="row"><div class="col-lg-7"><h1 class="zoomInRight animated">Check Game</h1><div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-lg-6"><form><select class="form-control" id="count"><option>请选择关卡</option></select></div><div class="col-lg-6"><input class="form-control btn btn-primary" type="button" value="开始游戏" id="btnstart" /></div></form></div></div><div class="panel-body" id="gamediv" style="height:500px;width:500px;"></div></div></div><div class="col-lg-4"><h1>Game Log</h1><div class="panel panel-default"><div class="panel-heading">游戏日志</div><div id="log" class="panel-body" style="height:500px;"></div></div></div></div></div></body><script>$(function(){log("开始初始化关卡");//初始化selectvar count=20;for(var i=1;i<=count;i++){var $opt=$("<option></option>");$opt.text(i);$("#count").append($opt);}$("#btnstart").click(btnclick);});//按钮点击事件function btnclick(){log("创建游戏地图");var $count=$("#count").val();log("获取关数："+$count);$("#gamediv").empty();$("#gamediv")var $table=$("<table></table>");$table.css("display","none");$table.attr("border","1px");$table.css({"width":"450px","height":"450px"});$table.attr("align","center");for(var i=1;i<=$count;i++){var $row=$("<tr></tr>");for(var j=1;j<=$count;j++){var $cell=$("<td></td>");$cell.addClass("cell");$cell.click(cellclick);$row.append($cell);}$table.append($row);}$("#gamediv").append($table);$table.fadeIn(2000);}//单元格点击事件function cellclick(e){log("触发单元格点击");var $left=$(e.target).prev();var $right=$(e.target).next();var $up=$(e.target).parent().prev().children("td:eq("+$(e.target).index()+")");var $down=$(e.target).parent().next().children("td:eq("+$(e.target).index()+")");log("改变颜色");changecolor($(e.target));changecolor($left);changecolor($right);changecolor($up);changecolor($down);log("判断是否通关");if(ispass()){alert("恭喜您通关了");$("#lihua").css("height",document.body.scrollHeight+15+"px");$("#lihua").css("width",document.body.clientWidth+30+"px");$("#lihua").show();function happyNewYear(){ new fireworks(); } tt=setInterval(happyNewYear,1000);}}//改变颜色function changecolor(cell){if(cell.hasClass("cell")){cell.removeClass("cell");cell.addClass("clickcell");}else{cell.removeClass("clickcell");cell.addClass("cell");}}//创建日志function log(txt){$("#log").html(txt+"<br/>"+$("#log").html());}//判断是否通关function ispass(){var result=true;if($("td").hasClass("cell")){result=false;}return result;}</script></html>
1 0