javascript五子棋游戏制作(-)
闲着无事,使用jquery和js写写五子棋游戏,帮各位拍砖呀。
准备工作:
下载jQuery包。
1、制作房间:
Jsp页面
/** * 房间 * @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 = "";//玩家1this.player1 = "";//玩家2this.player2 = "";//是否退出this.isExit = true;//是否开始this.isStart = false;};jq(document).ready(function(){var room = new Room();room.initDesk();room.displayRoom();});在这篇中,先不再解释,希望大家看看后,给个建议。我再去一步一步解释 。。