jQuery-黑白反斗棋选关模式

最新推荐文章于 2021-03-15 11:25:00 发布

fightingcoder419

最新推荐文章于 2021-03-15 11:25:00 发布

阅读量394

点赞数 1

文章标签： jquery 黑白反斗棋选关模式

本文链接：https://blog.csdn.net/fightingcoder419/article/details/52426847

版权

<!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("开始初始化关卡");
			//初始化select
			var 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>

fightingcoder419

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-黑白反斗棋选关模式

#log{ overflow: scroll; } .cell{ background-color: black; } .clickcell{ background-color:white; } Check Game
复制链接

扫一扫