javascript五子棋游戏制作（二）

最新推荐文章于 2022-12-03 17:21:07 发布

psyuhen

最新推荐文章于 2022-12-03 17:21:07 发布

阅读量2.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/psyuhen/article/details/8130100

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

上一篇文章：javascript五子棋游戏制作（一）

上一篇文章的抛砖引玉，希望大家拍砖！

下面来第二篇:

设计原理：

房间——》桌子——》椅子——》准备——》开始——结束。

房间页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>五子棋房间</title>
<script type="text/javascript" src="<%=path %>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/zDialog/zDialog.js"></script>
<script type="text/javascript" src="<%=path %>/js/zDialog/zDrag.js"></script>
<script type="text/javascript" src="<%=path %>/js/room.js"></script>
</head>
<body>
</body>
</html>

房间JS

/**
 * 房间
 * @author ps
 * @create 2012-10-27 12:40:57
 */
//解决与其它JS包冲突的问题。
var jq = jQuery.noConflict();

//房间
Room = function (){
	//room本身
	var ROOMTHIS = this;
	
	//桌子
	this.deskList = new Array(20);
	//房间CSS
	var roomCss = new RoomCss();
	
	//初始化房间的20张桌子，并赋以桌子号。
	this.initDesk = function(){
		
		var size = this.deskList.length;
		for ( var row = 0; row < size; row++) {
			var desk1 = new Desk();
			desk1.roomId = "Room_1";
			desk1.deskId = "Desk_" + (row + 1);
			this.deskList[row] = desk1;
		}
		
	};
	
	//根据房间号与桌子号查询Desk信息
	this.findDesk = function(roomId,deskId){
		for ( var row = 0; row < this.deskList.length; row++) {
			var desk = this.deskList[row];
			if(deskId == desk.deskId && roomId == desk.roomId){
				return desk;
			}
		}
		return null;
	};
	
	//赋值
	/**
	 * <pre>
	 * 根据roomId和deskId查询Desk信息。
	 * 若player1非空,给Desk的player1赋值
	 * 若player2非空,给Desk的player2赋值
	 * 若isStart非空,给Desk的isStart赋值
	 * </pre>
	 * @param roomId 房间号
	 * @param deskId 桌子号
	 * @param player1 玩家1
	 * @param player2 玩家2
	 * @param isStart 是否开始
	 */
	this.setDesk = function(roomId,deskId,player1,player2,isStart){
		var desk = this.findDesk(roomId, deskId);
		
		if(player1 != null){
			desk.player1 = player1;
		}
		if(player2 != null){
			desk.player2 = player2;
		}
		if(isStart != null){
			desk.isStart = isStart;
		}
	};
	
	//显示房间
	this.displayRoom = function(){
		var mainDiv = jq("<div id='roomMainDiv'/>");
		
		var northDiv = jq("<div id='roomTitleDiv' >您好,我是房间一号呀！</div>");
		northDiv.css(roomCss.northDivCss());
		
		
		var centerDiv = jq("<div id='roomCenterDiv' />");
		centerDiv.css(roomCss.centerDivCss());
		
		var table = jq("<table id='deskTable' cellpadding='0' cellspacing='0'></table>");
		table.css(roomCss.tableCss());
		
		var tr = jq("<tr></tr>");
		var desk = this.deskList;
		for ( var row = 0; row < desk.length; row++) {
			
			var td = jq("<td width='160px'></td>");
			var tab = jq("<table  cellpadding='0' cellspacing='0' width='160px'></table>");
			tab.attr("id",desk[row].deskId);
			
			var wtd = jq("<td></td>");
			var wbtn = jq("<input type='button' value='进入' />");
			wbtn.attr("id",desk[row].deskId + "#westbtn");
			wbtn.css(roomCss.btnCss());
			wbtn.bind("click",function(){
				ROOMTHIS.joinInClick(jq(this));
			});
			wtd.append(wbtn);
			
			var ctd = jq("<td><img alt='' src='images/qizhuo.jpg' style='width:100px;height:100px' /></td>");
			
			var etd = jq("<td></td>");
			var ebtn = jq("<input type='button' value='进入' />");
			ebtn.attr("id",desk[row].deskId + "#eastbtn");
			ebtn.css(roomCss.btnCss());
			ebtn.bind("click",function(){
				ROOMTHIS.joinInClick(jq(this));
			});
			etd.append(ebtn);
			
			var ftr = jq("<tr></tr>");
			
			wtd.attr("id",desk[row].deskId + "#west");
			ctd.attr("id",desk[row].deskId + "#center");
			etd.attr("id",desk[row].deskId + "#east");
			
			ftr.append(wtd);
			ftr.append(ctd);
			ftr.append(etd);
			
			tab.append(ftr);
			tab.append("<tr><td colspan='3'>"+desk[row].deskId+"</td></tr>");
			
			
			td.append(tab);
			tr.append(td);
			
			if((row + 1) % 5 == 0 && row != 0){
				table.append(tr);
				tr = jq("<tr></tr>");
			}
			
			if(row == (desk.length -1)){
				table.append(tr);
			}
		}
		
		centerDiv.append(table);
		
		mainDiv.append(northDiv);
		mainDiv.append(centerDiv);
		
		jq("body").append(mainDiv);
	};
	//玩家退出
	this.exitClick = function(dialog,deskId,player,pos){
		var desk = this.findDesk("Room_1", deskId);
		var url = "GoBangServer?action=exit";
		var isExit = false;
		if(desk.isStart === true){
			if(window.confirm("游戏已开始,是否真的退出?")){
				isExit = true;
			}
		}else{
			if(window.confirm("真的退出?")){
				isExit = true;
			}
		}
		
		if(isExit){
			jq.post(url,{
				roomId : "Room_1",
				deskId : deskId,
				position : pos
			},function(){
				dialog.close();
				jq("#"+deskId+"\\#"+pos+"btn").attr("disabled",false);
				jq("#"+deskId+"\\#"+pos+"btn").val("进入");
			},"text");
		}
	};
	
	//玩家进入
	this.joinInClick = function (btnThis){
		btnThis.attr("disabled",true);
		btnThis.val("正在进入...");
		
		var did = btnThis.attr("id").split("#")[0];
		var position = btnThis.attr("id").split("#")[1];
		var pos = "";
		if(position.indexOf("west") != -1){
			pos = "west";
		}else if(position.indexOf("east") != -1){
			pos = "east";
		}
		var url = "GoBangServer?action=joinin";
		jq.post(url,{
			roomId : "Room_1",
			deskId : did,
			position : pos
		},function(data){
			var errMsg = data.split("#")[1];
			var player = data.split("#")[2];
			var data = data.split("#")[0];
			if(data == "true"){
				ROOMTHIS.setDesk("Room_1", did, pos.indexOf("west") != -1 ? player: null, pos.indexOf("east") != -1 ? player: null, null);
				var diag = new Dialog();
				diag.Width = 900;
				diag.Height = 700;
				diag.Title = "Room_1#"+did+"#"+pos+"#"+player;
				diag.URL = "gobang.jsp";
				diag.CancelEvent = function(){
					ROOMTHIS.exitClick(diag,did,player,pos);
				};
				diag.show();
				btnThis.val("已进入");
			}else{
				alert("进入失败！"+errMsg);
				btnThis.attr("disabled",false);
				btnThis.val("进入");
			}
		},"text");
	};
	
	//监听房间的桌子是否有其他人加入
	this.joinTimer = function(){
		var url = "GoBangServer?action=monitorroom";
		jq.post(url,function(data){
			data = eval(data);//转换为json格式
			
			for ( var row = 0; row < data.length; row++) {
				var p1 = data[row].player1;
				var p2 = data[row].player2;
				var did = data[row].deskId;
				var rid = data[row].roomId;
				jq("#"+did + "\\#westbtn").attr("disabled",p1 == "" ? false : true);
				jq("#"+did + "\\#eastbtn").attr("disabled",p2 == "" ? false : true);
				
				
				ROOMTHIS.setDesk(rid, did, data[row].player1, data[row].player2, data[row].isStart);
			}
			
			//5秒重新扫描一下。
			window.setTimeout(function(){ROOMTHIS.joinTimer();}, 20000);
		},"text");
	};
	
};

//房间的Css样式
RoomCss = function(){
	//标题的样式
	this.northDivCss = function(){
		var css = {
				color : "#33CCFF",
				textAlign : "center",
				fontWeight : "bold",
				fontFamily : "微软雅黑 Candara 'Times New Roman'",
				fontSize : "34px"
		};
		return css;
	};
	//桌子的样式
	this.centerDivCss = function(){
		var lef = window.screen.width/8;
		var css = {
				backgroundColor : "#99CCCC",
				position : "absolute",
				left : lef,
				textAlign : "center",
				fontWeight : "bold",
				fontFamily : "微软雅黑 Candara 'Times New Roman'",
				fontSize : "20px"
		};
		return css;
	};
	this.tableCss = function(){
		var css = {
				textAlign : "center",
				fontWeight : "bold",
				fontFamily : "微软雅黑 Candara 'Times New Roman'",
				fontSize : "20px",
				tableLayout : "fixed"
		};
		return css;
	};
	this.btnCss = function(){
		var css = {
				fontSize : "12px"
		};
		return css;
	};
};

//桌子
Desk = function(){
	this.roomId = "";
	//桌子编号
	this.deskId = "";
	//玩家1
	this.player1 = "";
	//玩家2
	this.player2 = "";
	//是否退出
	this.isExit = true;
	//是否开始
	this.isStart = false;
};

jq(document).ready(function(){
	var room = new Room();
	room.initDesk();
	room.displayRoom();
	room.joinTimer();
});

棋盘页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>五子棋</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/gobang.js"></script>
</head>
<body>

<script type="text/javascript">
FiveChess.CONTEXTPATH = "<%=request.getContextPath() %>";
</script>
</body>
</html>

棋盘JS：

/**
 * 五子棋生成器
 * @author ps
 * @create 2012-10-23 11:14:03
 */

var jq = jQuery.noConflict();

/**
 * 五子棋类
 */
FiveChess = function (){
	//默认THIS
	var THIS = this;
	//成员
	this.chessArray = new Array();//棋盘数组
	this.repentArray = new Array();//悔棋数组
	this.clickTime = 0;//点击次数
	this.curPlayer = null;//当前玩家
	this.curTimeout = null;//当前闪烁的timeout
	this.curX = 0;//当前X坐标
	this.curY = 0;//当前Y坐标
	this.isStart = false;//是否开始对战了
	
	//常量
	this.TOP = 0;
	this.LEFT = 0;
	this.RIGHT = 14;
	this.BOTTOM = 14;
	this.FIVE = 5;
	
	//样式
	var chessCss = new FiveChessCss();
	//验证
	var fcv = new FiveChessValidate();
	
	//初始化棋盘数组为开始状态
	this.initChessArray = function (){
		for ( var row = 0; row <= this.RIGHT; row++) {
			this.chessArray[row] = new Array();
			for ( var col = 0; col <= this.BOTTOM; col++) {
				this.chessArray[row][col] = 0;
			}
		}
	};
	//悔棋处理事件
	this.repentClick = function(){
		if(this.repentArray.length == 0){
			alert("棋都还没下,你悔什么棋呀!真2!");
			return;
		}
		if(window.confirm("你怎么老悔棋呀?跟你下棋没意思!悔个屁棋呀!")){
			//清除当前步骤的数据
			var _$this = this.repentArray.pop();
			this.curX = _$this.attr("title").split(",")[0];
			this.curY = _$this.attr("title").split(",")[1];
			this.chessArray[this.curX][this.curY] = 0;
			_$this.empty();
			if(this.curTimeout != null){
				window.clearTimeout(this.curTimeout);
			}
			
			//恢复上一步骤的数据
			if(this.repentArray.length > 0){
				this.clickTime --;
				this.curPlayer = this.repentArray[this.repentArray.length-1];
				this.curX = this.curPlayer.attr("title").split(",")[0];
				this.curY = this.curPlayer.attr("title").split(",")[1];
				this.flickerTimeout(this.curPlayer);
			}else{
				this.clickTime = 0;
				this.curPlayer = null;
				this.curTimeout = null;
				this.curX = 0;
				this.curY = 0;
			}
		}
	};
	//重新开始处理事件
	this.restartClick = function(){
		if(window.confirm("真要重来?")){
			this.clickTime = 0;
			this.initChessArray();//重新初始化数组
			this.curPlayer = null;//当前选手的棋子
			if(this.curTimeout != null){
				window.clearTimeout(this.curTimeout);
			}
			this.curTimeout = null;//当前闪烁的棋子
			this.curX = 0;//当前X坐标
			this.curY = 0;//当前Y坐标
			jq("#mainTable").find("img").remove();
		}
	};
	
	//准备事件
	this.readyClick = function(){
		var url = "GoBangServer?action=ready";
		var title = jq(window.parent.document).find("span[id^='_Title_']").eq(0).text();
		
		jq.post(url,{
			roomId : title.split("#")[0],
			deskId : title.split("#")[1],
			position : title.split("#")[2]
		},function(data){
			jq("#readyBtn").attr("disabled",true);
			jq("#readyBtn").val("Readyed");
			THIS.joinTimer();
		},"text");
	};
	
	//检查是否可以开始下棋了
	this.joinTimer = function(){
		var url = "GoBangServer?action=checkstart";
		var title = jq(window.parent.document).find("span[id^='_Title_']").eq(0).text();
		var pos = title.split("#")[2];
		
		jq.post(url,{
			roomId : title.split("#")[0],
			deskId : title.split("#")[1]
		},function(data){
			var whoFirst = data.split("#")[1];
			data = data.split("#")[0];
			if("true" == data){
				if(pos === whoFirst){
					alert("嘿嘿,小子,棋权在你这,你先下!");
				}
				
				THIS.monitorTimer();
			}else{
				//等待
				window.setTimeout(function(){
					THIS.joinTimer();
				}, 1000);
			}
		},"text");
	};
	//监听是否有新数据
	this.monitorTimer = function(){
		var url = "GoBangServer?action=monitor";
		var title = jq(window.parent.document).find("span[id^='_Title_']").eq(0).text();
		jq.post(url,{
			roomId : title.split("#")[0],
			deskId : title.split("#")[1],
			position : title.split("#")[2]
		},function(data){
			window.setTimeout(function(){
				THIS.monitorTimer();
			}, 1000);
			
			var gameData = data.split("||||");
			var status = gameData[0];
			if("true" == status){
				THIS.isStart = true;
			}else{
				THIS.isStart = false;
			}
			var co = gameData[1];
			
			var _curx = co.split(",")[0];
			var _cury = co.split(",")[1];
			
			if(_curx == "" || _curx == null || _cury == "" || _cury == null){
				return;
			}
			
			jq("#mainTable td").each(function(){
				var title = jq(this).attr("title");
				if(title == co){
					if(!jq(this).html()){
						THIS.tableTdClick(jq(this));
					}
					return;
				}
			});
			
		},"text");
	};
	
	//下棋时交换数据
	this.exchangeDataTimer = function (){
		var url = "GoBangServer?action=exchange";
		var title = jq(window.parent.document).find("span[id^='_Title_']").eq(0).text();
		jq.post(url,{
			roomId : title.split("#")[0],
			deskId : title.split("#")[1],
			position : title.split("#")[2],
			"coordinate" : THIS.curX+","+THIS.curY//坐标
		},function(data){
		},"text");
	};
	
	//生成棋盘
	this.chessBoard = function(){
		var mainDiv = jq("<div id='mainDiv'></div>");
		mainDiv.css(chessCss.mainDivCss());
		
		//增加标题
		var northDiv = jq("<div id='northDiv'>JavaScript五子棋</div>");
		northDiv.css(chessCss.titleCss());
		mainDiv.append(northDiv);
		
		//增加悔棋、重来按钮
		var southDiv = jq("<div id='southDiv'/>");
		var eastDiv = jq("<div id='eastDiv'/>");
		eastDiv.css(chessCss.eastDivCss());
		
		var restartBtn = jq("<input id='restartBtn' type='button' value='重来'/>");
		restartBtn.bind("click",function(){THIS.restartClick();});
		
		var repentBtn = jq("<input id='repentBtn' type='button' value='悔棋'/>");
		//repentBtn.css(chessCss.buttonCss());
		repentBtn.bind("click",function(){THIS.repentClick();});
		
		var readyBtn = jq("<input id='readyBtn' type='button' value='Ready'/>");
		//readyBtn.css(chessCss.buttonCss());
		readyBtn.bind("click",function(){THIS.readyClick();});
		
		eastDiv.append(restartBtn);
		eastDiv.append("<br/><br/><br/>");
		eastDiv.append(repentBtn);
		eastDiv.append("<br/><br/><br/>");
		eastDiv.append(readyBtn);
		southDiv.append(eastDiv);
		
		//增加棋盘
		var rightDiv = jq("<div/>");
		var mainTable = jq("<table id='mainTable' cellpadding='0' cellspacing='0' width='565px' height='560px' ></table>");
		mainTable.css(chessCss.tableCss());
		
		rightDiv.css(chessCss.rightDivCss());
		
		
		for ( var row = 0; row < 15; row++) {
			var tr = jq("<tr></tr>");
			tr.attr("height","38px");
			tr.css(chessCss.tableTRCss());
			for ( var col = 0; col < 15; col++) {
				var td = jq("<td></td>");
				td.css(chessCss.tableTdCss());
				td.attr("title",row+","+col);
				
				tr.append(td);
				
				td.bind("click",function(){
					if(THIS.isStart){
						if(!jq(this).html()){
							THIS.isStart = false;
							THIS.tableTdClick(jq(this));
							THIS.exchangeDataTimer();
						}
					}else{
						alert("游戏还没开始呢,你怎么点也没用!");
					}
				});
			}
			mainTable.append(tr);
		}
		rightDiv.append(mainTable);
		rightDiv.append("<br/>");
		southDiv.append(rightDiv);
		mainDiv.append(southDiv);
		
		jq("body").append(mainDiv);
	};
	
	//列点击处理事件
	this.tableTdClick = function(tdObj){
		var who = (this.clickTime % 2) === 0?1:2;
		tdObj.html("<img src='"+FiveChess.CONTEXTPATH+"/images/gobang"+who+".png' style='width:30px;height:30px;'/>");
		this.curX = tdObj.attr("title").split(",")[0];
		this.curY = tdObj.attr("title").split(",")[1];
		this.chessArray[this.curX][this.curY] = who;
		this.clickTime ++;
		
		//清除上一次的闪烁
		if(this.curTimeout != null){
			clearTimeout(this.curTimeout);
			var img = this.curPlayer.children().eq(0);
			img.css("visibility","visible");
		}
		this.curPlayer = tdObj;
		this.repentArray.push(this.curPlayer);
		
		this.flickerTimeout(tdObj);
		
		this.toWin();
	};
	
	//设置当前图片闪烁
	this.flickerTimeout = function (tdObj){
		var img = tdObj.children().eq(0);
		(img.css("visibility") === "hidden")?img.css("visibility","visible"):img.css("visibility","hidden");
		
		this.curTimeout = setTimeout(function(){THIS.flickerTimeout(tdObj);},500);
	};
	
	//计算那一个玩家是否胜利
	this.toWin = function(){
		var player = this.chessArray[this.curX][this.curY] === 1 ? "黑子" : "白子";
		var isWin = this.searchX(this.curX, this.curY, this.chessArray[this.curX][this.curY]);
		if(this.searchX(this.curX, this.curY, this.chessArray[this.curX][this.curY])){
			alert(player + "，You are Win!!congratulation!");
		}else if(this.searchY(this.curX, this.curY, this.chessArray[this.curX][this.curY])){
			alert(player + "，You are Win!!congratulation!");
		}else if(this.searchXOblique(this.curX, this.curY, this.chessArray[this.curX][this.curY])){
			alert(player + "，You are Win!!congratulation!");
		}else if(this.searchYOblique(this.curX, this.curY, this.chessArray[this.curX][this.curY])){
			alert(player + "，You are Win!!congratulation!");
		}
	};
	
	/**
	 * 搜索横坐标
	 * @param x 当前X坐标
	 * @param y 当前Y坐标
	 * @param who 当前X,Y坐标值
	 * @return 若横线中有五子连球，则返回true,否则返回false
	 */
	this.searchX = function(x,y,who){
		x = parseInt(x);
		y = parseInt(y);
		who = parseInt(who);
		
		var time = 0;
		//x,y-1
		for ( var row = y; row >= this.LEFT; row --) {
			if(this.chessArray[x][row] === 0 || this.chessArray[x][row] != who){
				break;
			}else{
				time ++;
			}
		}
		//x,y+1
		for ( var row = (y + 1); row <= this.RIGHT; row++) {
			if(this.chessArray[x][row] === 0 || this.chessArray[x][row] != who){
				break;
			}else{
				time ++;
			}
		}
		
		if(time >= this.FIVE){
			return true;
		}else{
			time = 0;
		}
		
		return false;
	};
	/**
	 * 搜索纵坐标
	 * @param x 当前X坐标
	 * @param y 当前Y坐标
	 * @param who 当前X,Y坐标值
	 * @return 若纵线中有五子连球，则返回true,否则返回false
	 */
	this.searchY = function(x,y,who){
		x = parseInt(x);
		y = parseInt(y);
		who = parseInt(who);
		
		var time = 0;
		//x-1,y
		for ( var row = x; row >= this.TOP; row --) {
			if(this.chessArray[row][y] === 0 || this.chessArray[row][y] != who){
				break;
			}else{
				time ++;
			}
		}
		//x+1,y
		for ( var row = (x + 1); row <= this.BOTTOM; row++) {
			if(this.chessArray[row][y] === 0 || this.chessArray[row][y] != who){
				break;
			}else{
				time ++;
			}
		}
		
		if(time >= this.FIVE){
			return true;
		}else{
			time = 0;
		}
		
		return false;
	};
	/**
	 * 搜索/线
	 * @param x 当前X坐标
	 * @param y 当前Y坐标
	 * @param who 当前X,Y坐标值
	 * @return 若/线中有五子连球，则返回true,否则返回false
	 */
	this.searchXOblique = function(x,y,who){
		x = parseInt(x);
		y = parseInt(y);
		who = parseInt(who);
		
		var time = 0;
		var col = y;
		//X+1,Y-1
		for ( var row = x; row <= this.BOTTOM; row++) {
			if(col < this.LEFT){
				break;
			}
			if(this.chessArray[row][col] === 0 || this.chessArray[row][col] != who){
				break;
			}else{
				time ++;
			}
			col --;
		}
		//X-1,Y+1
		col = y;
		for ( var row = (x - 1); row >= this.TOP; row --) {
			col ++;
			if(col > this.RIGHT){
				break;
			}
			if(this.chessArray[row][col] === 0 || this.chessArray[row][col] != who){
				break;
			}else{
				time ++;
			}
		}
		
		if(time >= this.FIVE){
			return true;
		}else{
			time = 0;
		}
		
		return false;
	};
	/**
	 * 搜索\线
	 * @param x 当前X坐标
	 * @param y 当前Y坐标
	 * @param who 当前X,Y坐标值
	 * @return 若\线中有五子连球，则返回true,否则返回false
	 */
	this.searchYOblique = function(x,y,who){
		x = parseInt(x);
		y = parseInt(y);
		who = parseInt(who);
		
		var time = 0;
		var col = y;
		//x-1，y-1
		for ( var row = x; row >= this.TOP; row --) {
			if(col < this.LEFT){
				break;
			}
			if(this.chessArray[row][col] === 0 || this.chessArray[row][col] != who){
				break;
			}else{
				time ++;
			}
			col --;
		}
		//x+1,y+1
		col = y;
		for ( var row = (x + 1); row <= this.BOTTOM; row++) {
			col ++;
			if(col > this.RIGHT){
				break;
			}
			if(this.chessArray[row][col] === 0 || this.chessArray[row][col] != who){
				break;
			}else{
				time ++;
			}
		}
		
		if(time >= this.FIVE){
			return true;
		}else{
			time = 0;
		}
		
		return false;
	};
	
	//启动
	this.start = function (){
		this.initChessArray();
		this.chessBoard();
	};
};

/**
 * 上下文
 */
FiveChess.prototype.CONTEXTPATH = "";
/**
 * 五子棋样式
 */
FiveChessCss = function(){
	//主面板DIV样式
	this.mainDivCss = function(){
		var css = {
				textAlign :"center",
				width :"800px",
				position :"absolute",
				left : "80px"
		};
		return css;
	};
	//右边DIV样式
	this.rightDivCss = function(){
		var css = {
				backgroundColor :"#ffcc00",
				width :"640px",
				position :"relative",
				paddingTop :"35px",
				left :"40px"
		};
		return css;
	};
	//表格样式
	this.tableCss = function(){
		var css = {
				position :"relative",
				left :"-13px",
				tableLayout :"fixed",
				borderTop :"0.15px solid black",
				borderLeft :"0.15px solid black"
		};
		
		return css;
	};
	//表格行样式
	this.tableTRCss = function(){
		var css = {
				borderLeft :"0.15px solid black",
				borderCollapse : "collapse",
				width : "13px"
		};
		
		return css;
	};
	//表格列样式
	this.tableTdCss = function(){
		var css = {
				borderRight :"0.15px solid black",
				borderBottom :"0.15px solid black",
				width : "36px"
		};
		
		return css;
	};
	//标题样式
	this.titleCss = function (){
		var css = {
				fontFamily:"Calibri,微软雅黑 ,宋体",
				fontSize:"30px",
				fontWeight:"bold"
		};
		return css;
	};
	//按钮样式
	this.buttonCss = function (){
		var css = {
				top:"40px",
				position:"relative"
		};
		return css;
	};
	//东边DIV样式
	this.eastDivCss = function (){
		var css = {
				float:"left",
				right:"10px",
				position:"relative"
		};
		return css;
	};
};

/**
 * 五子棋验证类
 */
FiveChessValidate = function(){
	/**
	 * 检查IP地址是否正确
	 * @param ip4
	 * @return
	 */
	this.isIp4 = function (ip4){
		var regexp = /([0-1]?[0-9]{1,2}|[2][0-5]{1,2}).([0-1]?[0-9]{1,2}|[2][0-5]{1,2}).([0-1]?[0-9]{1,2}|[2][0-5]{1,2}).([0-1]?[0-9]{1,2}|[2][0-5]{1,2})$/g;
		if(regexp.test(ip4)){
			return true;
		}
		return false;
	};
	/**
	 * 判断输入是否为空
	 * @param source
	 * @return
	 */
	this.isEmpty = function (source){
		if(source == null){
			return true;
		}else if(source == undefined){
			return true;
		}else if(jq.trim(source) === ""){
			return true;
		}
		return false;
	};
};

//加载完页面时，加载init方法
jq(document).ready(function(){
	var fiveChess = new FiveChess();
	fiveChess.start();
});

服务端：

package com.nantian.dwr;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class GoBangServer
 */
public class GoBangServer extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public final static int WAIT = 1;
	public final static int START = 2;
	public final static int FULL = 3;
	public final static int INVITE = 4;
	
	//游戏状态
	public static String gameStatus = "P2clicked,P1canclicked";
	
	//桌子列表
	private static List<Desk> deskList = new ArrayList<Desk>();
	
	//每个房间20张桌子
	private final static int MAX_SIZE = 20;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GoBangServer() {
        super();
    }
    
    @Override
    public void init() throws ServletException {
    	super.init();
    	
    	//启动默认初始化20张桌子
    	for (int i = 0; i < MAX_SIZE; i++) {
			Desk desk = new Desk();
			desk.roomId = "Room_1";
    		desk.deskId = "Desk_" + (i + 1);
    		
    		desk.gameData1 = new GameData();
    		desk.gameData2 = new GameData();
			
    		deskList.add(desk);
		}
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String action = request.getParameter("action");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		if("checkstart".intern() == action.intern()){//检查是否可以开始了
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			Desk desk = findDesk(rid, did);
			
			if(desk.isStart){
				out.write("true#"+toTrimNull(desk.whoFirst));
			}else{
				out.write("false#"+toTrimNull(desk.whoFirst));
			}
			
		}else if("exchange".intern() == action.intern()){
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			String pos = toTrimNull(request.getParameter("position"));
			Desk desk = findDesk(rid, did);
			
			
			if("west".intern() == pos.intern()){
				desk.whoFirst = "east";
				desk.gameData1.coordinate = toTrimNull(request.getParameter("coordinate"));
			}else if("east".intern() == pos.intern()){
				desk.whoFirst = "west";
				desk.gameData2.coordinate = toTrimNull(request.getParameter("coordinate"));
			}
			
		}else if("monitor".intern() == action.intern()){
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			String pos = toTrimNull(request.getParameter("position"));
			Desk desk = findDesk(rid, did);
			String msg = "";
			
			boolean isMeClick = false;
			
			if(pos.intern() == toTrimNull(desk.whoFirst).intern()){
				isMeClick = true;
			}else {
				isMeClick = false;
				
			}
			if("west".intern() == pos.intern()){
				msg = String.valueOf(isMeClick)+"||||"+toTrimNull(desk.gameData2.coordinate);
			}else if("east".intern() == pos.intern()){
				msg = String.valueOf(isMeClick)+"||||"+toTrimNull(desk.gameData1.coordinate);
			}
			
			
			out.write(msg);
		}else if("monitorroom".intern() == action.intern()){
			String msg = "[";
			
			for (int i = 0; i < deskList.size(); i++) {
				Desk desk = deskList.get(i);
				
				msg += "{";
				msg += "roomId:'"+toTrimNull(desk.roomId)+"'";
				msg += ",";
				msg += "deskId:'"+toTrimNull(desk.deskId)+"'";
				msg += ",";
				msg += "player1:'"+toTrimNull(desk.player1)+"'";
				msg += ",";
				msg += "player2:'"+toTrimNull(desk.player2)+"'";
				msg += ",";
				msg += "position1:'"+toTrimNull(desk.position1)+"'";
				msg += ",";
				msg += "position2:'"+toTrimNull(desk.position2)+"'";
				msg += ",";
				msg += "isStart:'"+desk.isStart+"'";
				msg += "}";
				
				if(i < deskList.size() - 1){
					msg += ",";
				}
			}
			
			msg += "]";
			
			out.write(msg);
		}else if("joinin".intern() == action.intern()){
			String ipAddr = request.getRemoteAddr();
			
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			String pos = toTrimNull(request.getParameter("position"));
			
			boolean isJoin = true;
			String errMsg = "该椅子有人了!";
			
			Desk desk = findDesk(rid, did);
			if("west".intern() == pos.intern()){
				if("".equals(desk.player1) || desk.player1 == null){
					desk.player1 = ipAddr;
					desk.position1 = pos;
					errMsg = "";
				}
			}else if("east".intern() == pos.intern()){
				if("".equals(desk.player2) || desk.player2 == null){
					desk.player2 = ipAddr;
					desk.position2 = pos;
					errMsg = "";
				}
			}
			
			out.write(String.valueOf(isJoin)+"#"+errMsg+"#"+ipAddr);
		}else if("exit".intern() == action.intern()){
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			String pos = toTrimNull(request.getParameter("position"));
			
			Desk desk = findDesk(rid, did);
			if("west".intern() == pos.intern()){
				desk.player1 = null;
				desk.position1 = null;
				desk.isPlayer1Ready = false;
				desk.gameData1 = new GameData();
				if(desk.isPlayer2Ready){
					desk.whoFirst = "east";
				}else{
					desk.whoFirst = "";
				}
				
			}else if("east".intern() == pos.intern()){
				desk.player2 = null;
				desk.position2 = null;
				desk.isPlayer2Ready = false;
				desk.gameData2 = new GameData();
				if(desk.isPlayer1Ready){
					desk.whoFirst = "west";
				}else{
					desk.whoFirst = "";
				}
			}
			desk.isStart = false;
			
			
		}else if("ready".intern() == action.intern()){
			String rid = toTrimNull(request.getParameter("roomId"));
			String did = toTrimNull(request.getParameter("deskId"));
			String pos = toTrimNull(request.getParameter("position"));
			
			Desk desk = findDesk(rid, did);
			if("west".intern() == pos.intern()){
				if(!desk.isPlayer1Ready && desk.isPlayer2Ready){
					desk.whoFirst = "east";
				}
				
				desk.isPlayer1Ready = true;
			}else if("east".intern() == pos.intern()){
				if(desk.isPlayer1Ready && !desk.isPlayer2Ready){
					desk.whoFirst = "west";
				}
				desk.isPlayer2Ready = true;
			}
			
			if(desk.isPlayer1Ready && desk.isPlayer2Ready){
				desk.isStart = true;
			}
		}
		
		out.flush();
		
	}
	
	/**
	 * 根据房间号与桌子号查询Desk信息
	 * @param roomId
	 * @param deskId
	 * @return
	 */
	private Desk findDesk(String roomId,String deskId){
		for (int i = 0; i < deskList.size(); i++) {
			Desk desk = deskList.get(i);
			
			if(roomId.intern() == desk.roomId.intern() && deskId.intern() == desk.deskId.intern()){
				return desk;
			}
		}
		
		return null;
	}
	
	
	private String toTrimNull(String source){
		if(source == null){
			return "";
		}
		return source;
	}
}

游戏实体类：

/**
 * 
 */
package com.nantian.dwr;

import java.io.Serializable;

/**
 * @author ps
 *
 */
public class GameData implements Serializable{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public String playerData;
	public String clickTime;
	public String coordinate;
	public String status;
}

桌子实体类：

/**
 * 
 */
package com.nantian.dwr;

/**
 * @author ps
 *
 */
public class Desk {
	public String roomId;
	public String player1;
	public String player2;
	public String deskId;
	public String position1;
	public String position2;
	public boolean isStart;
	public GameData gameData1;
	public GameData gameData2;
	public boolean isPlayer1Ready;
	public boolean isPlayer2Ready;
	public String whoFirst = "";
}

哈哈。。。。

完了。。

psyuhen

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript五子棋游戏制作（二）

上一篇文章：javascript五子棋游戏制作（一）上一篇文章的抛砖引玉，希望大家拍砖！下面来第二篇:设计原理：房间——》桌子——》椅子——》准备——》开始——结束。房间页面：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
复制链接

扫一扫