javascript五子棋游戏制作（-）

闲着无事，使用jquery和js写写五子棋游戏，帮各位拍砖呀。

准备工作：

下载jQuery包。

1、制作房间：

Jsp页面

<%@ 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/room.js"></script>
</head>
<body>
<table cellspacing=""></table>
</body>
</html>

2、写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);
	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.deskId = "Desk_" + (row + 1);
			this.deskList[row] = desk1;
		}
		
	};
	
	//显示房间
	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);
			tab.append("<tr><td><input type='button' value='进入' /></td><td><img alt='' src='images/qizhuo.jpg' style='width:100px;height:120px' /></td><td><input type='button' value='进入' /></td></tr>");
			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);
	};
};

//房间的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.availWidth)/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;
	};
};

//桌子
Desk = function(){
	//桌子编号
	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();
});

在这篇中，先不再解释，希望大家看看后，给个建议。我再去一步一步解释。。

秒客网

javascript五子棋游戏制作（-）

相关文章