javascript五子棋游戏制造（二）-JavaSript-爱易网页

javascript五子棋游戏制造（二）

日期：2014-05-16　浏览次数：20347 次

javascript五子棋游戏制作（二）

上一篇文章：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>&q

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript五子棋游戏制造（二）

相关资料更多>

推荐阅读更多>