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

javascript五子棋游戏制造（-）

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

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 : "微软雅黑 Candar

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

javascript五子棋游戏制造（-）

相关资料更多>

推荐阅读更多>