├── .gitignore ├── README.md ├── img ├── btn.png ├── b_che.png ├── b_ma.png ├── b_pao.png ├── b_shi.png ├── b_zu.png ├── guide1.png ├── guide2.png ├── guide3.png ├── guide4.png ├── r_che.png ├── r_ma.png ├── r_pao.png ├── r_shi.png ├── r_zu.png ├── ready.png ├── xinju.png ├── b_jiang.png ├── b_xiang.png ├── bg_cont.png ├── newgame.png ├── r_jiang.png ├── r_xiang.png ├── zhunbei.png ├── chesspanel.png └── ���� - ����.png ├── HTML5���ν���SDK˵���ĵ�.doc ├── HTML5���νӿڵ���demo�����ܽ�.doc ├── css ├── public.css └── chinesechess.css ├── index.html ├── js ├── ResourceManager.js ├── utils.js ├── canvascomponent.js ├── loadres.js ├── html5gamedemo.js ├── component.js ├── MicrorapidNetGameSDK.js ├── canvaswrapper.js ├── canvaschesspanel.js ├── chinesechess.js └── jquery-1.4.2.js └── index.jsp /.gitignore: -------------------------------------------------------------------------------- 1 | .svn 2 | build 3 | .settings 4 | *~ 5 | .project 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ChineseChess 2 | ============ 3 | 4 | HTML5版中国象棋对战游戏 -------------------------------------------------------------------------------- /img/btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/btn.png -------------------------------------------------------------------------------- /img/b_che.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_che.png -------------------------------------------------------------------------------- /img/b_ma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_ma.png -------------------------------------------------------------------------------- /img/b_pao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_pao.png -------------------------------------------------------------------------------- /img/b_shi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_shi.png -------------------------------------------------------------------------------- /img/b_zu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_zu.png -------------------------------------------------------------------------------- /img/guide1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/guide1.png -------------------------------------------------------------------------------- /img/guide2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/guide2.png -------------------------------------------------------------------------------- /img/guide3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/guide3.png -------------------------------------------------------------------------------- /img/guide4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/guide4.png -------------------------------------------------------------------------------- /img/r_che.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_che.png -------------------------------------------------------------------------------- /img/r_ma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_ma.png -------------------------------------------------------------------------------- /img/r_pao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_pao.png -------------------------------------------------------------------------------- /img/r_shi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_shi.png -------------------------------------------------------------------------------- /img/r_zu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_zu.png -------------------------------------------------------------------------------- /img/ready.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/ready.png -------------------------------------------------------------------------------- /img/xinju.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/xinju.png -------------------------------------------------------------------------------- /img/b_jiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_jiang.png -------------------------------------------------------------------------------- /img/b_xiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/b_xiang.png -------------------------------------------------------------------------------- /img/bg_cont.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/bg_cont.png -------------------------------------------------------------------------------- /img/newgame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/newgame.png -------------------------------------------------------------------------------- /img/r_jiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_jiang.png -------------------------------------------------------------------------------- /img/r_xiang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/r_xiang.png -------------------------------------------------------------------------------- /img/zhunbei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/zhunbei.png -------------------------------------------------------------------------------- /img/chesspanel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/chesspanel.png -------------------------------------------------------------------------------- /img/���� - ����.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/img/���� - ����.png -------------------------------------------------------------------------------- /HTML5���ν���SDK˵���ĵ�.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/HTML5���ν���SDK˵���ĵ�.doc -------------------------------------------------------------------------------- /HTML5���νӿڵ���demo�����ܽ�.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p-jasonchen/ChineseChess/HEAD/HTML5���νӿڵ���demo�����ܽ�.doc -------------------------------------------------------------------------------- /css/public.css: -------------------------------------------------------------------------------- 1 | body, div, p, ul, li, table, tbody, tr, td, textarea, form, input, h1, h2, h3, h4, h5, dl, dt, dd, img, iframe 2 | { 3 | border: 0 none; 4 | list-style: none outside none; 5 | font-size: 14px; 6 | font-family: "Microsoft YaHei",Helvetica; 7 | margin: 0; 8 | padding: 0; 9 | 10 | } 11 | body{-webkit-user-select:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;} 12 | a 13 | { 14 | text-decoration: none; 15 | } 16 | 17 | -------------------------------------------------------------------------------- /css/chinesechess.css: -------------------------------------------------------------------------------- 1 | #chess_frame, #chess_panel { 2 | width: 100%; 3 | height: 100%; 4 | min-height: 400px; 5 | } 6 | 7 | #players{ 8 | width : 100px; 9 | height : 100%; 10 | min-height: 400px; 11 | float: left; 12 | text-align: right; 13 | padding-right: 10px; 14 | } 15 | 16 | #players ul{ 17 | height: 100%; 18 | } 19 | 20 | #players ul li:first-child{ 21 | color: red; 22 | } 23 | 24 | #tips{ 25 | text-align: left; 26 | } 27 | #piece_type{ 28 | color: red; 29 | font-size: 20px; 30 | font-style: bold; 31 | text-align: center; 32 | } 33 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 中国象棋 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 38 |

39 |

40 |
41 |
42 |
43 | 44 | 48 | 49 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /js/ResourceManager.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 资源管理器 3 | */ 4 | 5 | var ResourceManager={}; 6 | (function(manager){ 7 | var ResourceDownloader=function(){ 8 | this.resources = []; 9 | this.callbackObj = []; 10 | this.countLoaded=0; 11 | 12 | ResourceDownloader.prototype.init = function(jRes){ 13 | 14 | }; 15 | 16 | ResourceDownloader.prototype.loadRes = function(jRes){ 17 | if(jRes){ 18 | var type = jRes.type; 19 | //相对路径 20 | var path = (jRes.path == undefined) ? './' : jRes.path; 21 | var resArray = jRes.resArray; 22 | 23 | var that=this; 24 | for(var i=0;i 2 | <%@ page import="java.net.InetAddress,java.net.UnknownHostException" %> 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 中国象棋 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 |
    38 |
39 |

40 |

41 |
42 |
43 |
44 | 45 | <% 46 | { 47 | InetAddress addr; 48 | String SERVER_IP="", PROXY_SERVER_IP=""; 49 | try { 50 | addr = InetAddress.getLocalHost(); 51 | PROXY_SERVER_IP = addr.getHostAddress().toString(); 52 | SERVER_IP = PROXY_SERVER_IP; 53 | String hostname = addr.getHostName().toString();//获得本机名称 54 | System.out.println("PROXY_SERVER_IP:\t" + PROXY_SERVER_IP + "\tPROXY_NAME:\t" + hostname); 55 | } catch (UnknownHostException e) { 56 | // TODO Auto-generated catch block 57 | e.printStackTrace(); 58 | } 59 | %> 60 | 61 | <%}%> 62 | 63 | 66 | 67 |
68 |
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /js/utils.js: -------------------------------------------------------------------------------- 1 | var Utils={}; 2 | (function(util){ 3 | 4 | function _re_mask() { 5 | /* 6 | 更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容 7 | */ 8 | var mask = document.getElementById("mask"); 9 | if(null == mask) 10 | return; 11 | mask.style.width = util.getVisualWidth() + "px"; 12 | mask.style.height = util.getVisualHeight() + "px"; 13 | } 14 | 15 | function _re_pos(id) { 16 | /* 17 | 更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间 18 | */ 19 | var box = document.getElementById(id); 20 | if(null != box) { 21 | var w = box.clientWidth; 22 | var h = box.clientHeight; 23 | box.style.left = util.getLeft(w) + "px"; 24 | box.style.top = util.getTop(h) + "px"; 25 | } 26 | } 27 | 28 | 29 | util.getVisualWidth = function(){ 30 | var w1 = document.body.clientWidth; 31 | var w2 = window.innerWidth; 32 | return (w1 > w2) ? w1 : w2; 33 | //return w1; 34 | } 35 | util.getVisualHeight = function(){ 36 | var h1 = document.body.clientHeight; 37 | var h2 = window.innerHeight; 38 | return (h1 > h2) ? h1 : h2; 39 | //return h1; 40 | } 41 | 42 | util.getLeft = function(w) { 43 | var bw = document.body.clientWidth; 44 | var bh = document.body.clientHeight; 45 | w = parseFloat(w); 46 | return (bw / 2 - w / 2 + document.body.scrollLeft); 47 | } 48 | 49 | util.getTop = function(h) { 50 | var bw = document.body.clientWidth; 51 | var bh = document.body.clientHeight; 52 | h = parseFloat(h); 53 | return (document.body.scrollTop + h / 2); 54 | } 55 | 56 | util.createMask = function(){//创建遮罩层的函数 57 | if(this.mask) return this.mask; 58 | var mask=document.createElement("div"); 59 | mask.id="mask"; 60 | mask.style.position="absolute"; 61 | //mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置 62 | mask.style.opacity=0.3;//Mozilla的不透明设置 63 | mask.style.background=" rgba(0, 0, 0, 0.3)"; 64 | mask.style.top="0px"; 65 | mask.style.left="0px"; 66 | mask.style.width=this.getVisualWidth()+'px'; 67 | mask.style.height=this.getVisualHeight()+'px'; 68 | mask.style.zIndex=1000; 69 | document.body.appendChild(mask); 70 | this.mask = mask; 71 | } 72 | 73 | var Guide = function(guideArray){ 74 | if(!guideArray || guideArray.length == 0) return; 75 | if(!this.guideArray){ 76 | util.createMask(); 77 | 78 | var box=document.createElement("img"); 79 | box.src="img/" + guideArray[0]; 80 | box.id="guide"; 81 | box.style.position="absolute"; 82 | 83 | box.style.top="0px"; 84 | box.style.left="0px"; 85 | box.style.opacity=0.7; 86 | 87 | box.style.width=util.getVisualWidth()+'px'; 88 | 89 | box.style.height=util.getVisualHeight()+'px'; 90 | box.style.overflow="visible"; 91 | //box.style.border="1px solid black"; 92 | //box.style.borderRadius = "6px"; 93 | 94 | box.style.zIndex=1001; 95 | document.body.appendChild(box); 96 | //_re_pos(box.id); 97 | var that = this; 98 | box.onclick = function(){ 99 | var array = that.guideArray; 100 | var guide = array.shift(); 101 | array.push(guide); 102 | box.src="img/" + guide; 103 | if(that.count++ == array.length) box.style.display='none'; 104 | } 105 | } 106 | this.guideArray = guideArray; 107 | this.count = 0; 108 | 109 | } 110 | 111 | 112 | util.Guide = Guide; 113 | 114 | })(Utils); 115 | -------------------------------------------------------------------------------- /js/canvascomponent.js: -------------------------------------------------------------------------------- 1 | ( function(window) {"use strict"; 2 | 3 | function absoluteCenter(canvas, span, offset){ 4 | var left = (document.body.clientWidth - canvas.width)/2; 5 | var top = (document.body.clientHeight - canvas.height)/2; 6 | var css = { 7 | position: 'absolute', 8 | left : left + 'px', 9 | top : top + 'px', 10 | 11 | } 12 | css['text-align'] = 'center'; 13 | $(canvas).css(css); 14 | 15 | if(span){ 16 | css.width = canvas.width; 17 | css.height = canvas.heigth; 18 | var _offset = offset; 19 | if(!_offset) 20 | _offset = 0; 21 | css.top = top + _offset + 'px'; 22 | $(span).css(css); 23 | } 24 | 25 | } 26 | 27 | /* 28 | * CanvasProgressbar 29 | */ 30 | var CanvasProgressbar = function(id, opt) { 31 | var progressbar = new CanvasWrapper(id, opt); 32 | 33 | progressbar.width = 200; 34 | progressbar.height = 20; 35 | progressbar.progress = 0; 36 | 37 | 38 | var span = progressbar.addEl('span', document.getElementById(opt.id)); 39 | if(span){ 40 | span.id = 'loadingres_span'; 41 | span.innerHTML = '0%'; 42 | span.width = progressbar.width; 43 | span.height = progressbar.height; 44 | } 45 | 46 | 47 | progressbar.setProgress = function(progress) { 48 | span.innerHTML = (progress * 100).toFixed(0) + '%'; 49 | // console.log(span.innerHTML); 50 | this.progress = progress; 51 | this.redraw(); 52 | } 53 | 54 | progressbar.Config = function(){ 55 | this.setAttr(this.can, { 56 | width : this.width, 57 | height : this.height 58 | }); 59 | this.setAttr(this.cCan, { 60 | width : this.width, 61 | height : this.height 62 | }); 63 | 64 | absoluteCenter(this.can, span); 65 | } 66 | 67 | progressbar.draw = function () { 68 | var c = this.con, d = 1000; 69 | c.clearRect(0, 0, d, d); 70 | 71 | c.fillStyle = "rgb(" + this.cRGB.r + "," + this.cRGB.g + "," + this.cRGB.b + ")"; 72 | c.fillRect(0,0, this.width * this.progress,this.height); 73 | }; 74 | 75 | progressbar.Config(); 76 | 77 | return progressbar; 78 | 79 | }; 80 | 81 | window.CanvasProgressbar = CanvasProgressbar; 82 | /* 83 | * CanvasProgressbar 84 | */ 85 | 86 | 87 | /* 88 | * CanvasLoader 89 | */ 90 | var CanvasLoader = function(id, opt) { 91 | 92 | var canvasloader = new CanvasWrapper(id, opt); 93 | canvasloader.width = 100; 94 | canvasloader.height = 100; 95 | 96 | var span = canvasloader.addEl('span', document.getElementById(opt.id)); 97 | if(span){ 98 | span.id = 'loading_span'; 99 | span.innerHTML = '加载中...'; 100 | span.width = canvasloader.width; 101 | span.height = canvasloader.height; 102 | } 103 | 104 | canvasloader.draw = function () { 105 | var c = this.con, d = 1000; 106 | c.clearRect(0, 0, d, d); 107 | var image = new Image(); 108 | image.src = '../img/loading.png'; 109 | var that = this; 110 | image.onload = function(){ 111 | var xScale = (that.width / image.naturalWidth); 112 | var yScale = (that.height / image.naturalHeight); 113 | c.scale(xScale,yScale); 114 | c.drawImage(image, 0, 0); 115 | } 116 | }; 117 | 118 | canvasloader.Config = function(){ 119 | this.setAttr(this.can, { 120 | width : this.width, 121 | height : this.height 122 | }); 123 | this.setAttr(this.cCan, { 124 | width : this.width, 125 | height : this.height 126 | }); 127 | 128 | absoluteCenter(this.can, span, 0.5 * this.height); 129 | 130 | } 131 | 132 | canvasloader.Config(); 133 | return canvasloader; 134 | }; 135 | 136 | 137 | window.CanvasLoader = CanvasLoader; 138 | /* 139 | * CanvasLoader 140 | */ 141 | 142 | 143 | 144 | }(window)); 145 | -------------------------------------------------------------------------------- /js/loadres.js: -------------------------------------------------------------------------------- 1 | var DownloadControler={}; 2 | (function(controler){ 3 | 4 | var DownloaderCtx = function(_states, _progressBar){ 5 | this.states = _states; 6 | this.state = this.states[0]; 7 | this.progressBar = _progressBar; 8 | 9 | this.total = 0; 10 | for(var i=0; i< this.states.length; i++){ 11 | this.total += this.states[i].jRes.resArray.length; 12 | } 13 | 14 | DownloaderCtx.prototype.load = function(){ 15 | var that = this; 16 | if(that.state) 17 | that.state.load(that); 18 | } 19 | } 20 | 21 | var State = function(_order){ 22 | this.order = _order; 23 | this.jRes = {}; 24 | 25 | State.prototype.setProgress = function(jData){ 26 | var ctx = this.ctx; 27 | if(jData){ 28 | var current = jData.args[0]; 29 | for(var i = 0; i < this.order; i++){ 30 | current += ctx.states[i].jRes.resArray.length; 31 | } 32 | if(ctx){ 33 | if(ctx.progressBar) 34 | ctx.progressBar.setProgress(current / ctx.total); 35 | if(jData.args[0] == jData.args[1]){ 36 | ctx.state = ctx.states[this.order + 1]; 37 | ctx.load(); 38 | if(this.onFinish) 39 | this.onFinish(); 40 | } 41 | } 42 | } 43 | }; 44 | 45 | 46 | State.prototype.load = function(ctx){ 47 | var rm = new ResourceManager.ResourceDownloader(); 48 | this.ctx = ctx; 49 | rm.bind(this); 50 | rm.loadRes(this.jRes); 51 | 52 | }; 53 | } 54 | 55 | 56 | 57 | 58 | var ImgState = function(_order){ 59 | var img = new State(_order); 60 | img.jRes = { 61 | type:'img', 62 | path:'img/', 63 | resArray:[ 64 | 'chesspanel.png', 'r_jiang.png', 'r_shi.png', 65 | 'r_xiang.png', 'r_che.png', 'r_ma.png', 66 | 'r_pao.png', 'r_zu.png', 'b_zu.png', 67 | 'b_pao.png', 'b_jiang.png', 'b_ma.png', 68 | 'b_shi.png', 'b_xiang.png', 'b_che.png', 69 | 'ready.png', 'newgame.png', 'guide1.png', 70 | 'guide2.png', 'guide3.png', 'guide4.png', 71 | ] 72 | }; 73 | 74 | img.onFinish = function(){ 75 | var opt = { 76 | id : 'canvasChessPanel', 77 | }; 78 | var guideImgs = ['guide1.png','guide2.png', 'guide3.png', 'guide4.png',]; 79 | var guides = new Utils.Guide(guideImgs); 80 | var chessPanel = new CanvasChessPanel('chess_frame', opt); 81 | chessPanel.pieces = ChineseChess.pieces, 82 | window.chessPanel = chessPanel; 83 | 84 | } 85 | 86 | return img; 87 | } 88 | 89 | var CommonJsState = function(_order){ 90 | var js = new State(_order); 91 | js.jRes = { 92 | type:'script', 93 | path:'../javascript/', 94 | resArray:[ 95 | 'nc.js', 96 | 'zepto.js', 97 | 'common.js', 98 | 'iscroll4.js', 99 | ] 100 | }; 101 | 102 | 103 | js.onFinish = function(){ 104 | NC.pages.config({switchStyle:NC.SwitchStyleEnum.CUBE,defaultPage:'index'}); 105 | } 106 | 107 | return js; 108 | } 109 | 110 | var WorkJsState = function(_order){ 111 | var js = new State(_order); 112 | js.jRes = { 113 | type:'script', 114 | resArray:[ 115 | 'index.js', 116 | 'index_new.js', 117 | 'pintu.js', 118 | 'favorite.js', 119 | 'gameend.js', 120 | 'selectpic.js', 121 | 'selectdif.js', 122 | 'gamelist.js', 123 | 'roominfo.js', 124 | 'roundinfo.js', 125 | 'pcomment.js', 126 | 'guide.js' 127 | ] 128 | }; 129 | 130 | return js; 131 | } 132 | 133 | 134 | 135 | var doDownload = function(){ 136 | var states = []; 137 | states.push(new ImgState(states.length)); 138 | //states.push(new CommonJsState(states.length)); 139 | //states.push(new WorkJsState(states.length)); 140 | 141 | 142 | 143 | var opt = {}; 144 | opt.id = 'canvasProgressbar'; 145 | var pb = Component.CanvasProgressbar.init('info-loading', opt); 146 | 147 | var ctx = new DownloaderCtx(states,pb); 148 | ctx.load(); 149 | }; 150 | 151 | 152 | controler.doDownload = doDownload; 153 | 154 | 155 | 156 | })(DownloadControler); -------------------------------------------------------------------------------- /js/html5gamedemo.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var proxy = new MicrorapidNetGameSDK.Proxy(); 3 | 4 | function createFriendListHtml (jsonFriends) { 5 | var array = []; 6 | 7 | array.push('
'); 16 | return array.join(''); 17 | 18 | } 19 | 20 | function showFriendList(jsonData){ 21 | /* 22 | jsonData = window.JSON.parse(data); 23 | stringData = jsonData.data; 24 | last = stringData.lastIndexOf('}'); 25 | stringData = stringData.substring(0,last+1); 26 | ////window.log('stringData:' + stringData); 27 | jsonData = window.JSON.parse(stringData); 28 | */ 29 | 30 | //正常获取好友列表 31 | if(jsonData){ 32 | //frienListString = jsonData.list; 33 | //jsonFriends = window.JSON.parse(frienListString); 34 | html = createFriendListHtml(jsonData); 35 | $("#container").html(html); 36 | }else{ 37 | var array = []; 38 | array.push('
'); 41 | html = array.join(''); 42 | $("#container").html(html); 43 | } 44 | 45 | } 46 | 47 | function showBuyPropResult(jsonData){ 48 | /* 49 | jsonData = window.JSON.parse(data); 50 | stringData = jsonData.data; 51 | last = stringData.lastIndexOf('}'); 52 | stringData = stringData.substring(0,last+1); 53 | //window.log('stringData:' + stringData); 54 | jsonData = window.JSON.parse(stringData); 55 | */ 56 | 57 | $(".result").show(); 58 | if(jsonData){ 59 | $(".result .desc").html('单号：'); 60 | $(".result .orderid").html(jsonData.orderid); 61 | }else{ 62 | $(".result .desc").html(jsonData.code); 63 | $(".result .orderid").html(jsonData.desc); 64 | } 65 | 66 | } 67 | 68 | function showQueryMoneyResult(jsonData){ 69 | /* 70 | jsonData = window.JSON.parse(data); 71 | stringData = jsonData.data; 72 | last = stringData.lastIndexOf('}'); 73 | stringData = stringData.substring(0,last+1); 74 | //window.log('stringData:' + stringData); 75 | jsonData = window.JSON.parse(stringData); 76 | */ 77 | 78 | var array = []; 79 | array.push('
'); 82 | html = array.join(''); 83 | $("#container").html(html); 84 | 85 | if(jsonData.code == '0'){ 86 | $(".result .desc").html('余额：'); 87 | $(".result .balance").html(jsonData.balance); 88 | }else{ 89 | $(".result .desc").html(jsonData.code); 90 | $(".result .balance").html(jsonData.desc); 91 | } 92 | } 93 | 94 | function resetContainer () { 95 | $("#container").html(''); 96 | } 97 | 98 | chongzhi = function (){ 99 | proxy.go2ReCharge(); 100 | } 101 | 102 | 103 | doBuyProp = function (btn){ 104 | div = $(btn).parent().parent(); 105 | propid = div.children(".propid").val(); 106 | price = div.children('.prop_price_div').children('.prop_price').html(); 107 | num = div.children('.prop_num').children('select').val(); 108 | var goods = new MicrorapidNetGameSDK.Goods(propid, price, num); 109 | proxy.payMoney(goods, showBuyPropResult); 110 | } 111 | 112 | 113 | 114 | 115 | 116 | var getFriendsBtn = $("#get_friend_list_fgdev"); 117 | getFriendsBtn.click(function(){ 118 | resetContainer(); 119 | //doPost(getCookie(),fgdevurl, 'cmd=getFriendList' ,showFriendList); 120 | proxy.getFriendList(showFriendList); 121 | }); 122 | 123 | $('#query_money').click(function(){ 124 | resetContainer(); 125 | //doPost(getCookie(),fgdevurl, 'cmd=qcoins', showQueryMoneyResult); 126 | proxy.queryAccountBalance(showQueryMoneyResult); 127 | }); 128 | 129 | $('#buy_prop').click(function(){ 130 | resetContainer(); 131 | $("#container").load('ppay.html'); 132 | // $("#container").load('ppay'); 133 | 134 | }); 135 | 136 | }); 137 | -------------------------------------------------------------------------------- /js/component.js: -------------------------------------------------------------------------------- 1 | var Component={}; 2 | (function(comp){ 3 | 4 | /* 5 | 功能:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定 6 | */ 7 | function _getWidth(){ 8 | return (document.body.clientWidth+document.body.scrollLeft); 9 | } 10 | function _getHeight(){ 11 | return (document.body.clientHeight+document.body.scrollTop); 12 | } 13 | function _getLeft(w){ 14 | var bw=document.body.clientWidth; 15 | var bh=document.body.clientHeight; 16 | w=parseFloat(w); 17 | return (bw/2-w/2+document.body.scrollLeft); 18 | } 19 | function _getTop(h){ 20 | var bw=document.body.clientWidth; 21 | var bh=document.body.clientHeight; 22 | h=parseFloat(h); 23 | return (bh/2-h/2+document.body.scrollTop); 24 | } 25 | 26 | function _createMask(){//创建遮罩层的函数 27 | var mask=document.createElement("div"); 28 | mask.id="mask"; 29 | mask.style.position="absolute"; 30 | //mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置 31 | mask.style.opacity=0.3;//Mozilla的不透明设置 32 | mask.style.background=" rgba(0, 0, 0, 0.3)"; 33 | mask.style.top="0px"; 34 | mask.style.left="0px"; 35 | mask.style.width=_getWidth(); 36 | mask.style.height=_getHeight(); 37 | mask.style.zIndex=1000; 38 | document.body.appendChild(mask); 39 | } 40 | function _createMsgbox(w,h,t){//创建弹出对话框的函数 41 | var box=document.createElement("div") ; 42 | box.id="msgbox"; 43 | box.style.opacity=0.7; 44 | box.style.position="absolute"; 45 | box.style.background="black"; 46 | box.style.width=w; 47 | 48 | box.style.height=h*0.8; 49 | box.style.overflow="visible"; 50 | box.style.border="1px solid black"; 51 | box.style.borderRadius = "6px"; 52 | box.innerHTML=t; 53 | box.style.zIndex=1001; 54 | document.body.appendChild(box); 55 | _re_pos(); 56 | } 57 | function _re_mask(){ 58 | /* 59 | 更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容 60 | */ 61 | var mask=document.getElementById("mask") ; 62 | if(null==mask)return; 63 | mask.style.width=_getWidth()+"px"; 64 | mask.style.height=_getHeight()+"px"; 65 | } 66 | function _re_pos(){ 67 | /* 68 | 更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间 69 | */ 70 | var box=document.getElementById("msgbox"); 71 | if(null!=box){ 72 | var w=box.clientWidth;//style.width; 73 | var h=box.clientHeight;//style.height; 74 | box.style.left=_getLeft(w)+"px"; 75 | box.style.top=_getTop(h)+"px"; 76 | } 77 | } 78 | function _remove(){ 79 | /* 80 | 清除遮罩层以及弹出的对话框 81 | */ 82 | var mask=document.getElementById("mask"); 83 | var msgbox=document.getElementById("msgbox"); 84 | if(null==mask&&null==msgbox)return; 85 | document.body.removeChild(mask); 86 | document.body.removeChild(msgbox); 87 | } 88 | function _re_show(){ 89 | /* 90 | 重新显示遮罩层以及弹出窗口元素 91 | */ 92 | _re_pos(); 93 | _re_mask(); 94 | } 95 | function _set_url(url) 96 | { 97 | window.location.href=goUrl(url); 98 | } 99 | 100 | comp.MsgDialog={ 101 | msgbox:function (option){ 102 | var mstitle =option.title||null; 103 | var mstext =option.content||null; 104 | var callbackone =option.callbackone||null; 105 | var callbacktwo =option.callbacktwo||null; 106 | var buttonone =option.buttonone||null; 107 | var buttontwo =option.buttontwo||null; 108 | var isfocus =option.focus||null; 109 | _createMask(); 110 | 111 | //if(typeof callbacktwo == 'string')callbacktwo="set_url('"+callbacktwo+"')"; 112 | var temp="
"; 113 | if(mstitle)temp+=""; 114 | temp+=""; 115 | temp+="";} 118 | if(!buttonone&&!buttontwo){temp+=""+"关闭";} 119 | temp+="
"+mstitle+"
"+mstext+"
"; 116 | if(buttonone){temp+=""+buttonone+"";} 117 | if(buttontwo){temp+="  "+buttontwo+"
"; 120 | _createMsgbox(400,200,temp); 121 | if(buttonone) 122 | document.getElementById('buttonone').onclick =function(){ 123 | _remove(); 124 | (typeof callbackone == 'string') ?_set_url(callbackone):callbackone(); 125 | }; 126 | if(buttontwo) 127 | document.getElementById('buttontwo').onclick =function(){ 128 | _remove(); 129 | (typeof callbacktwo == 'string') ?_set_url(callbacktwo):callbacktwo(); 130 | }; 131 | if(focus==0||focus=="0"||null==focus){document.getElementById("buttonone").focus();} 132 | else if(focus==1||focus=="1"){document.getElementById("buttontwo").focus();} 133 | _re_show(); 134 | } 135 | }; 136 | 137 | 138 | 139 | comp.CanvasLoader={ 140 | show:function(id, opt){ 141 | if (!this.cl) { 142 | cl = new CanvasLoader(id, opt); 143 | cl.setColor('#a8a5a8'); // default is '#000000' 144 | /* 145 | cl.setColor('#a8a5a8'); // default is '#000000' 146 | cl.setShape('spiral'); // default is 'oval' 147 | cl.setDiameter(50); // default is 40 148 | cl.setDensity(45); // default is 40 149 | cl.setRange(1); // default is 1.3 150 | this.cl = cl; 151 | */ 152 | this.cl = cl; 153 | 154 | } 155 | $("#canvasLoader").css("margin-top", ($(window).height() / 2 - 20) + "px"); 156 | $("#canvasLoader").css("margin-left", ($(window).width() / 2 - 20) + "px"); 157 | $('#info-loading').css('display', 'block'); 158 | this.cl.show(); 159 | }, 160 | 161 | hide:function(){ 162 | if (this.cl) { 163 | this.cl.hide(); 164 | } 165 | $('#info-loading').css('display', 'none'); 166 | }, 167 | 168 | }; 169 | 170 | comp.CanvasProgressbar={ 171 | init : function(id, opt) { 172 | if(!this.cpb) { 173 | var cpb = new CanvasProgressbar(id, opt); 174 | cpb.setColor('#a8a5a8'); 175 | // default is '#000000' 176 | this.cpb = cpb; 177 | 178 | } 179 | $("#canvasProgressbar").css("margin-top", ($(window).height() / 2 - 20) + "px"); 180 | $("#canvasProgressbar").css("margin-left", ($(window).width() / 2 - 20) + "px"); 181 | $('#info-loading').css('display', 'block'); 182 | this.cpb.show(); 183 | return this; 184 | }, 185 | 186 | setProgress : function(progress) { 187 | if(this.cpb) { 188 | this.cpb.setProgress(progress); 189 | if(progress == 1){ 190 | this.cpb.hide(); 191 | $('#info-loading').css('display', 'none') 192 | } 193 | 194 | } 195 | }, 196 | }; 197 | 198 | })(Component); 199 | -------------------------------------------------------------------------------- /js/MicrorapidNetGameSDK.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Administrator 3 | */ 4 | 5 | 6 | //todo: 参考jquery的noConflict 机制，可以对SDK重命名，防止和开发商的类冲突 7 | var MicrorapidNetGameSDK = {}; 8 | (function(sdk) { 9 | 10 | var Utils = function(){}; 11 | Utils.prototype.cleanString2Json = function(rspTxt){ 12 | var jsonData = window.JSON.parse(rspTxt); 13 | var stringData = jsonData.data; 14 | var last = stringData.lastIndexOf('}'); 15 | stringData = stringData.substring(0,last+1); 16 | jsonData = window.JSON.parse(stringData); 17 | return jsonData; 18 | } 19 | Utils.prototype.getFriends = function(rspTxt){ 20 | 21 | var jsonData = this.cleanString2Json(rspTxt); 22 | //正常获取好友列表 23 | if(jsonData.code == '1'){ 24 | frienListString = jsonData.list; 25 | jsonFriends = window.JSON.parse(frienListString); 26 | return jsonFriends; 27 | } 28 | } 29 | 30 | Utils.prototype.getPayMoneyResult = function(rspTxt){ 31 | var jsonData = this.cleanString2Json(rspTxt); 32 | return jsonData; 33 | } 34 | 35 | Utils.prototype.getQueryMoneyResult = function(rspTxt){ 36 | var jsonData = this.cleanString2Json(rspTxt); 37 | return jsonData; 38 | } 39 | 40 | Utils.prototype.isObject = function(param){ 41 | var b = (parma || typeof param == 'object'); 42 | return b; 43 | } 44 | 45 | Utils.prototype.isFunction = function(param){ 46 | var b = (param || typeof param == 'function'); 47 | return b; 48 | } 49 | 50 | Utils.prototype.getKeyValueReg = function(str) { 51 | var res = []; 52 | var reg = /(\w+)=([^&]+)/g; 53 | while ((a = reg.exec(str))) { 54 | res.push(a[0]); 55 | } 56 | return res; 57 | } 58 | 59 | var helper = new Utils(); 60 | 61 | var AjaxType = { 62 | getFriendList : 1, 63 | qcoins : 2, 64 | ppay : 3, 65 | } 66 | 67 | var Ajax = function(opt, ajaxType) { 68 | if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 69 | this.xmlhttp = new XMLHttpRequest(); 70 | } else {// code for IE6, IE5 71 | this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 72 | } 73 | 74 | var xmlhttp = this.xmlhttp, opt = opt || {}; 75 | xmlhttp.onreadystatechange = function() { 76 | if(xmlhttp.readyState == 4) { 77 | switch(xmlhttp.status) { 78 | case 0: 79 | //window.log('ajaxType:' + ajaxType); 80 | helper.isFunction(opt.error) && opt.error(xmlhttp);break; 81 | case 200:{ 82 | var jsonData; 83 | //window.log(xmlhttp.responseText); 84 | switch(ajaxType){ 85 | case AjaxType.getFriendList: 86 | jsonData = helper.getFriends(xmlhttp.responseText);break; 87 | case AjaxType.qcoins: 88 | jsonData = helper.getQueryMoneyResult(xmlhttp.responseText);break; 89 | case AjaxType.ppay: 90 | jsonData = helper.getPayMoneyResult(xmlhttp.responseText);break; 91 | } 92 | helper.isFunction(opt.success) && opt.success(jsonData); 93 | break; 94 | } 95 | } 96 | } 97 | } 98 | var method, url, async = true; 99 | 100 | helper.isFunction(opt.beforeSend) && opt.beforeSend(xmlhttp); 101 | opt.data && typeof opt.data == 'string' && ( method = 'POST'); 102 | if(!method) { 103 | var type; 104 | opt.type && typeof opt.type == 'string' && ( type = opt.type.toLocaleUpperCase()); 105 | (type == 'GET' || type == 'POST') ? ( method = type) : ( method = 'GET'); 106 | } 107 | 108 | opt.async && typeof opt.async == 'boolean' && ( async = opt.async); 109 | opt.url && typeof opt.url == 'string' && ( url = opt.url); 110 | //window.log('method :' + method); 111 | xmlhttp.open(method, url, async); 112 | 113 | if(opt.data){ 114 | var data = opt.data; 115 | //发送post数据的关键设置代码 116 | xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8"); 117 | xmlhttp.send(data); 118 | }else 119 | xmlhttp.send(); 120 | 121 | 122 | 123 | } 124 | var Proxy = function() { 125 | this.postUrl = "http://221.130.15.185:18000/json"; //dev 126 | this.cookie = this.getCookie(); 127 | } 128 | 129 | Proxy.prototype.doPost = function(cmd, ajaxType ,successFunc, errorFunc) { 130 | var jsonData = { 131 | data : cmd, 132 | url : '1379/MLibok/main.swf', 133 | //md5 : 'a5cea1eac184bb7f2bee9e99e79b8961', 134 | md5 : 'c6e7c6a1b86042745fc64766b16bbe62', 135 | cookie : this.cookie, 136 | }; 137 | 138 | var stringData = window.JSON.stringify(jsonData); 139 | //window.log(stringData); 140 | 141 | var success,error; 142 | helper.isFunction(successFunc)? success = successFunc : success = function(jsonData) { 143 | window.log('success' + jsonData); 144 | 145 | }; 146 | 147 | helper.isFunction(errorFunc) ? error = errorFunc : error = function(xhr) { 148 | window.log('error' + xhr); 149 | }; 150 | var opt = { 151 | url : this.postUrl, 152 | type : 'POST', 153 | data : "data=" + stringData, 154 | // data : stringData, 155 | async : true, 156 | success : success, 157 | error : error, 158 | beforeSend : function(xhr) { 159 | //window.log('beforeSend' + xhr); 160 | } 161 | }; 162 | new Ajax(opt, ajaxType); 163 | } 164 | 165 | 166 | 167 | 168 | Proxy.prototype.getCookie = function() { 169 | var chromecookiefgdev = "token=PCDZ7QfsdDoHIiF1GkArgCesWJTthFT4zpkAAdbAFKIPa0fnyVtr0/BlpkyZ89WfDIotlb9dsUKyGK9ATvH5L2iENA/Z1ysFI9jv/GYqAL7LnkVLiyQlaconSB2CzGUo;appid=10002;gameid=1379;g_ut=3;PK=0;sid=AcWfxRIXEpKAmSjI_QqFhtc3;JumpURLExtraData=0|0|0|newwap|0|0;" 170 | var host = window.location.host, token; 171 | //必须使用dev 环境的cookie才能在fgnew 环境调试 172 | if(host.indexOf('dev') == -1) 173 | token = chromecookiefgdev; 174 | else { 175 | paras = window.location.search; 176 | ret = helper.getKeyValueReg(paras); 177 | token = ret.join(';'); 178 | } 179 | return token; 180 | } 181 | 182 | /** 183 | * 获取好友列表 184 | * @param successFunc 获取好友列表成功的回调 185 | * @param errorFunc 获取好友列表失败的回调 186 | */ 187 | Proxy.prototype.getFriendList = function(successFunc, errorFunc) { 188 | window.log('getFriendList'); 189 | this.doPost('cmd=getFriendList', AjaxType.getFriendList, successFunc, errorFunc); 190 | } 191 | 192 | /** 193 | * 获取账户余额 194 | * @param successFunc 获取账户余额成功的回调 195 | * @param errorFunc 获取账户余额失败的回调 196 | */ 197 | Proxy.prototype.queryAccountBalance = function(successFunc, errorFunc) { 198 | window.log('queryAccountBalance'); 199 | this.doPost('cmd=qcoins', AjaxType.qcoins, successFunc, errorFunc); 200 | } 201 | 202 | /** 203 | * 购买商品请求支付接口 204 | * @param successFunc 支付成功的回调 205 | * @param errorFunc 支付失败的回调 206 | */ 207 | Proxy.prototype.payMoney = function(goods, successFunc, errorFunc) { 208 | window.log('payMoney'); 209 | this.doPost('cmd=ppay&' + goods.toString(), AjaxType.ppay, successFunc, errorFunc); 210 | } 211 | 212 | /** 213 | * 跳转到充值页面的请求 214 | */ 215 | Proxy.prototype.go2ReCharge = function() { 216 | window.log('go2ReCharge'); 217 | var key = 'gameid='; 218 | var params = window.location.search; 219 | var start = params.indexOf(key), end, gameid; 220 | if(start > -1) { 221 | end = params.indexOf('&', start); 222 | start += key.length; 223 | if(end == -1) 224 | gameid = params.substring(start); 225 | else 226 | gameid = params.substring(start, end); 227 | } else { 228 | window.log('gameid not exist, use default for test'); 229 | gameid = 1225; 230 | } 231 | window.log(gameid); 232 | window.location = 'http://flash' + gameid + '.mbdev.3g.qq.com'; 233 | } 234 | 235 | /** 236 | * 对游戏中购买的商品的封装类 237 | * @param id 所购买商品的id 238 | * @param price 所购买商品的单价 239 | * @param num 所购买商品的数量 240 | */ 241 | var Goods = function(id, price, num) { 242 | this.id = id; 243 | this.price = price, this.num = num; 244 | 245 | Goods.prototype.toString = function() { 246 | var s = ['propid=', this.id, "&price=", this.price, '&num=', this.num]; 247 | return s.join(''); 248 | } 249 | } 250 | 251 | 252 | 253 | sdk.Proxy = Proxy; 254 | sdk.Goods = Goods; 255 | /* 256 | sdk.getKeyValueRegTest = function(){ 257 | var a='?name=zhiyelee&blog=www.tsnrose.com&name=zhiyelee&blog=www.tsnrose.com&name=zhiyelee&blog=www.tsnrose.com'; 258 | return helper.getKeyValueReg(a); 259 | } 260 | */ 261 | 262 | window.debug = true; 263 | window.log = function(b) { 264 | if(window.debug) { 265 | window.console && window.console.log(b); 266 | } 267 | } 268 | 269 | })(MicrorapidNetGameSDK); 270 | -------------------------------------------------------------------------------- /js/canvaswrapper.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2011 Róbert Pataki 3 | * 4 | * Permission is hereby granted, free of charge, to any person obtaining a copy 5 | * of this software and associated documentation files (the "Software"), to deal 6 | * in the Software without restriction, including without limitation the rights 7 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | * copies of the Software, and to permit persons to whom the Software is 9 | * furnished to do so, subject to the following conditions: 10 | * 11 | * The above copyright notice and this permission notice shall be included in 12 | * all copies or substantial portions of the Software. 13 | * 14 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | * THE SOFTWARE. 21 | * 22 | * ---------------------------------------------------------------------------------------- 23 | * 24 | * Check out my GitHub: http://github.com/heartcode/ 25 | * Send me an email: heartcode@robertpataki.com 26 | * Follow me on Twitter: http://twitter.com/#iHeartcode 27 | * Blog: http://heartcode.robertpataki.com 28 | */ 29 | 30 | /** 31 | * CanvasWrapper uses the HTML5 canvas element in modern browsers and VML in IE6/7/8 to create and animate the most popular preloader shapes (oval, spiral, rectangle, square and rounded rectangle).

32 | * It is important to note that CanvasWrapper doesn't show up and starts rendering automatically on instantiation. To start rendering and display the loader use the show() method. 33 | * @module CanvasWrapper 34 | **/ 35 | ( function(window) {"use strict"; 36 | /** 37 | * CanvasWrapper is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

38 | * A CanvasWrapper instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

39 | * If no id is passed in the constructor, the canvas objects are paced in the document directly. 40 | * @class CanvasWrapper 41 | * @constructor 42 | * @param id {String} The id of the placeholder div 43 | * @param opt {Object} Optional parameters

44 | * Possible values of optional parameters:
45 | *