js实现的"围住黄点游戏"

<html>
<head>
	<title>Game</title>
	<!--<link rel="stylesheet" type="text/css" href="game.css" >-->
	<style>
	.main_div{
		width:800px;
		height:600px;
		border-style:solid;
		border-width:1px;
		border-color:#aaaaaa;	
	}

	.item_div{
		width:18px;
		height:18px;
		float:left;
		border-style:solid;
		border-width:1px;
		border-color:#aaaaaa;
		margin-left:0px;
	}
	</style>
	<script src="jquery.js"></script>
</head>
<body>
<script>
	//格点状态数组
	var states;
	//当前黄点位置
	var s_x,s_y;

	//初始化,格点创建,黄点位置设置
	var init = function(){
		states = new Array();
		$("body").html("<div id='g_main' class='main_div'></div>");
		
		var main_div = $("div[id='g_main']");
		var str = "";
		for (var i=0;i<30;i++){
			var tmp = new Array();
			str +="<div style='margin-left:0px;margin-top:"+i*20+"px'>";
			for (var j=0;j<40;j++){
				tmp.push(0);
				str +="<div id='item_"+i+"_"+j+"' key='item_key' class='item_div'></div>"
			}
			str +="</div>";
			states.push(tmp);
		}
		main_div.html(str);
		
		$("div[key='item_key']").each(function(){
			$(this).click(function(){
				var id_str = $(this).attr("id");
				var arr_str = id_str.split("_");
				
				switch (states[arr_str[1]][arr_str[2]]){
					case 0:$(this).css("background-color","green");states[arr_str[1]][arr_str[2]] = 1;break;
					case 1:$(this).css("background-color","blue");states[arr_str[1]][arr_str[2]] = 2;break;
					case 2:$(this).css("background-color","red");states[arr_str[1]][arr_str[2]] = 3;break;
					case 3:$(this).css("background-color","white");states[arr_str[1]][arr_str[2]] = 0;break;
				}
			});
		});
		
		//黄点位置
		s_x = Math.floor(10+Math.random()*10);
		s_y = Math.floor(10+Math.random()*20);
		//console.log(s_x+","+s_y);
		states[s_x][s_y] = 4;
		$("#item_"+s_x+"_"+s_y).css("background-color","yellow");
		
		//注册黄点定时移动
		$(document).ready(function(){
			var num_id = setInterval(function(){
				states[s_x][s_y] = 0;
				$("#item_"+s_x+"_"+s_y).css("background-color","white");
				//s_x+=1;
				var moved = false;
				//确定移动方向
				var dir = check_dir();
				switch (dir){
					case "up":
						//向上移动,如果没有成功移动依次探测是否可以向其他方向移动
						moved = move(s_x-1,s_y);
						if (!moved){
							moved = move(s_x,s_y-1);
						}
						if (!moved){
							moved = move(s_x,s_y+1);
						}
						if (!moved){
							moved = move(s_x+1,s_y);
						}
						break;
					case "down":
						moved = move(s_x+1,s_y);
						if (!moved){
							moved = move(s_x,s_y+1);
						}
						if (!moved){
							moved = move(s_x,s_y-1);
						}
						if (!moved){
							moved = move(s_x-1,s_y);
						}
						break;
					case "left":
						moved = move(s_x,s_y-1);
						if (!moved){
							moved = move(s_x-1,s_y);
						}
						if (!moved){
							moved = move(s_x+1,s_y);
						}
						if (!moved){
							moved = moved(s_x,s_y+1);
						}
						break;
					case "right":
						moved = move(s_x,s_y+1);
						if (!moved){
							moved = move(s_x+1,s_y);
						}
						if (!moved){
							moved = move(s_x-1,s_y);
						}
						if (!moved){
							moved = move(s_x,s_y-1);
						}
						break;
				}
				
				//成功或逃脱解除注册事件
				if (!moved || s_x == 0 || s_x == 29 || s_y == 0 || s_y == 39){
					clearInterval(num_id);
				}
			}, 300); 
		});
	}
	
	//检测黄点可移动方向,并返回最佳移动方向
	var check_dir = function(){
		var dup = [0,0,0,0];
		var lens = [-1,-1,-1,-1];
		for (var i =s_x-1;i>=0;i--){
			if (states[i][s_y] != 0){
				dup[0] = 1;
				lens[0] = s_x-i;
				break;
			}
		}
		if (dup[0] == 0){
			lens[0] = s_x;
		}
		
		for (var i=s_x+1;i<30;i++){
			if (states[i][s_y] != 0){
				dup[1] = 1;
				lens[1] = i-s_x;
				break;
			}
		}
		if (dup[1] == 0){
			lens[1] = 30-s_x;
		}
		
		for (var i=s_y-1;i>=0;i--){
			if (states[s_x][i] != 0){
				dup[2] = 1;
				lens[2] = s_y-i;
				break;
			}
		}
		if (dup[2] == 0){
			lens[2] = s_y;
		}
		
		for (var i=s_y+1;i<40;i++){
			if (states[s_x][i] != 0){
				dup[3] = 1;
				lens[3] = i-s_y;
				break;
			}
		}
		if (dup[3] == 0){
			lens[3] = 40-s_y;
		}
		
		var index = 0;
		for (var i=1;i<4;i++){
			if (lens[i]<lens[index]){
				index = i;
			}
		}
		
		if (dup[index] == 0){
			return map_dir(index);
		} else {
			var tmp = -1;
			var tmp_len = 0;
			var flag = false;
			for (var i=0;i<4;i++){
				if (!flag ){
					if (dup[i] == 0){
						tmp = i;
						tmp_len = lens[i];
						flag = true;
					}
				} else {
					if (dup[i] == 0 && lens[i] < tmp_len){
						tmp = i;
						tmp_len = lens[i];
					}
				}
			}
			if (tmp != -1){
				return map_dir(tmp);
			}
			return map_dir(index);
		}
	}
	
	//装换为移动方向字符
	var map_dir = function(index){
		switch(index){
			case 0:return "up";
			case 1:return "down";
			case 2:return "left";
			case 3:return "right";
		}
	}
	
	/*
	var check_way = function(dir){
		switch (dir){
			case "up":
				for (var i=s_x-1;i>=0;i--){
					if (states[i][s_y] != 0){
						return false;
					}
				}
				return true;
			case "down":
				for (var i=s_x+1;i<30;i++){
					if (states[i][s_y] != 0){
						return false;
					}
				}
				return true;
			case "left":
				for (var i=s_y-1;i>=0;i--){
					if (states[s_x][i] != 0){
						return false;
					}
				}
				return true;
			case "down":
				for (var i=s_y+1;i<40;i++){
					if (states[s_x][i] != 0){
						return false;
					}
				}
				return true;
		}
	}
	*/
	
	//移动黄点到指定位置
	var move = function(x,y){
		if (x>=0 && y>=0 && x <30 && y<40 && states[x][y] == 0){
			states[s_x][s_y] = 0;
			$("#item_"+s_x+"_"+s_y).css("background-color","white");
			states[x][y] = 4;
			$("#item_"+x+"_"+y).css("background-color","yellow");
			s_x = x;
			s_y = y;
			
			return true;
		}
		return false;
	}
	
	$(function(){
		init();
	});
</script>
</body>
</html>


你可能感兴趣的:(js)