ie10版本
View Code
<!DOCTYPE html> <!-- begin : 20130508 author : Spider (利用js复习对象概念) 20130508: 背景 棋盘 双方 棋子等对象定义 20130509: 棋盘 双方 棋子等对象功能实现 20130510: 各对象之间功能交换实现游戏规则 20130511: 加入刚学到HTML5_CSS3部分效果(ie10) --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_HTML5_CSS3练习象棋游戏ie10</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #bgdiv { border: 0px solid #00ff21; } #bg { background-image: url("bg.jpg"); width: 600px; height: 600px; } #box { width: 495px; height: 500px; border: 1px solid rgba(0, 255, 33, 0.00); top: 10px; left: 10px; position: absolute; z-index: 1; /*column-count: 9;*/ } .di { margin: 3px; width: 49px; height: 44px; border: 0px solid #ffd800; float: left; background-color: rgba(200, 193, 147, 0.00); border-radius: 25px; } .qz { margin: 1px; width: 40px; height: 40px; border: 1px solid #00ffff; border-radius: 25px; font-size: 35px; background-color: #bd8143; text-align: center; cursor: pointer; position: relative; transition: transform 1s, width 0.5s, height 0.5s,top 0.5s,left 0.5s,font-size 0.5s; /*transition-delay: 0.5s;*/ box-shadow: 5px 5px 15px #888888; font-family: 隶书; } .d3:hover { top: -3px; left: -3px; } .d4 { width: 46px; height: 46px; font-size: 40px; transform: rotate(360deg); } .qz0 { color: red; } .qz1 { color: black; } .delz { width: 90px; height: 500px; border: 1px solid rgba(0, 255, 255, 0.00); top: 10px; left: 10px; position: absolute; z-index: 1; /*column-count: 2;*/ } .tiqi { border: 1px solid #00ff21; } @keyframes action01 { } </style> <script type="text/javascript"> //B:工厂 E:事件 F:方法 //------------------------- //快捷获取DOM function A(id) { if (typeof id == "string") { return document.getElementById(id); } else if (typeof id == "object") { return id; } } //快捷获取DOM id名 function sA(id) { if (typeof id == "string") { return id; } else if (typeof id == "object") { return id.id; } } //alert function al(s) { alert(s); } //快捷parseInt function pi(s) { return parseInt(s); } //快捷parseFloat function pf(s) { return parseFloat(s); } //快捷Number function nb(s) { return Number(s); } //取element的viewport(可视区域)坐标 function viewtblr(id) { return A(id).getBoundingClientRect(); } //车 function ms0(ts) { var dq = ts.dqwz; var re = ts.lzwz; //上 for (var i = dq - 9 ; i >= 0; i -= 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //下 for (var i = dq + 9 ; i <= 89; i += 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //左 for (var i = dq - 1 ; i % 9 >= 0; i -= 1) { if (i % 9 == 8) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //右 for (var i = dq + 1 ; i % 9 <= 8 ; i += 1) { if (i % 9 == 0) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } return re; } //马 function ms1(ts) { var dq = ts.dqwz; var re = ts.lzwz; if (dq % 9 != 0 && dq != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) { re.push(dq - 19); } if ((dq + 1) % 9 != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) { re.push(dq + 19); } if ((dq + 1) % 9 != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) { re.push(dq - 17); } if (dq % 9 != 0 && dq != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) { re.push(dq + 17); } if (dq - 9 >= 0 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) { re.push(dq - 11); } if (dq + 9 <= 89 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) { re.push(dq + 11); } if (dq - 9 >= 0 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) { re.push(dq - 7); } if (dq + 9 <= 89 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) { re.push(dq + 7); } ts.chiziwz(); return re; } //象 function ms2(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 47: 1, 51: 1, 63: 1, 67: 1, 71: 1, 83: 1, 87: 1 }; } else { fw = { 38: 1, 42: 1, 26: 1, 22: 1, 18: 1, 2: 1, 6: 1 }; } if ((dq - 20) in fw && ts.fang.qp.getdizqz(dq - 10) == undefined) { re.push(dq - 20);//左上 } if ((dq + 20) in fw && ts.fang.qp.getdizqz(dq + 10) == undefined) { re.push(dq + 20);//右下 } if ((dq - 16) in fw && ts.fang.qp.getdizqz(dq - 8) == undefined) { re.push(dq - 16);//右上 } if ((dq + 16) in fw && ts.fang.qp.getdizqz(dq + 8) == undefined) { re.push(dq + 16);//左下 } ts.chiziwz(); return re; } //士 function ms3(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 66: 1, 68: 1, 76: 1, 84: 1, 86: 1 }; } else { fw = { 3: 1, 5: 1, 13: 1, 21: 1, 23: 1 }; } if ((dq - 10) in fw) { re.push(dq - 10);//左上 } if ((dq + 10) in fw) { re.push(dq + 10);//右下 } if ((dq - 8) in fw) { re.push(dq - 8);//右上 } if ((dq + 8) in fw) { re.push(dq + 8);//左下 } ts.chiziwz(); return re; } //帅 function ms4(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 66: 1, 67: 1, 68: 1, 75: 1, 76: 1, 77: 1, 84: 1, 85: 1, 86: 1 }; } else { fw = { 3: 1, 4: 1, 5: 1, 12: 1, 13: 1, 14: 1, 21: 1, 22: 1, 23: 1 }; } if ((dq - 9) in fw) { re.push(dq - 9);//上 } if ((dq + 9) in fw) { re.push(dq + 9);//下 } if ((dq - 1) in fw) { re.push(dq - 1);//左 } if ((dq + 1) in fw) { re.push(dq + 1);//右 } ts.chiziwz(); return re; } //炮 function ms5(ts) { var dq = ts.dqwz; var re = ts.lzwz; //上 var cc = 0; for (var i = dq - 9 ; i >= 0; i -= 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //下 cc = 0; for (var i = dq + 9 ; i <= 89; i += 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //左 cc = 0; for (var i = dq - 1 ; i % 9 >= 0; i -= 1) { if (i % 9 == 8) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //右 cc = 0; for (var i = dq + 1 ; i % 9 <= 8 ; i += 1) { if (i % 9 == 0) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } return re; } //兵 function ms6(ts) { var dq = ts.dqwz; var re = ts.lzwz; if (ts.fh == 0 && dq - 9 >= 0) { re.push(dq - 9);//上 } if (ts.fh == 1 && dq + 9 <= 89) { re.push(dq + 9);//下 } if (dq % 9 != 0 && dq != 0) { re.push(dq - 1);//左 } if ((dq + 1) % 9 != 0) { re.push(dq + 1);//右 } ts.chiziwz(); return re; } //F恢复className function reclsnme(dv) { if (qp.tq_qz) qp.tq_qz.div.className = qp.tq_qz.div.className.replace(" d4", ""); } //E右键放下提起的棋子 function qzdown(e) { qp.cldiclick(); qp.clqzclick(); qp.ydf == 0 ? qp.hong.setqzclick(tiqiqz) : qp.hei.setqzclick(tiqiqz); reclsnme(qp.tq_qz.div); if (e.button == 0) { e.target.click = tiqiqz; e.target.click(); } } //E可以被吃棋子的点击事件 function beichiqz(e) { qp.shijian = e; qp.clqzclick(); //动画 var ts = e.target; var tsxy = viewtblr(ts); var dq = qp.tq_qz.div; var dqxy = viewtblr(dq); A("body1").appendChild(dq); ts.style.zIndex = 2; dq.style.position = "absolute"; dq.style.top = dqxy.top + "px"; dq.style.left = dqxy.left + "px"; setTimeout(csf3, 0); } //?? function csf3() { var ts = qp.shijian.target; var tsxy = viewtblr(ts); var dq = qp.tq_qz.div; var dqxy = viewtblr(dq); var mm = qp.ydf == 0 ? "delz0" : "delz1"; dq.style.top = (dqxy.top + (tsxy.top - dqxy.top)) + "px"; dq.style.left = (dqxy.left + (tsxy.left - dqxy.left)) + "px"; qp.d_i = ts.qz.getqzzdi(); A("body1").appendChild(ts); ts.style.position = "absolute"; ts.style.top = tsxy.top + "px"; ts.style.left = tsxy.left + "px"; ts.style.top = (tsxy.top + (viewtblr(mm).top - tsxy.top)) + 0 + "px"; ts.style.left = (tsxy.left + (viewtblr(mm).left - tsxy.left)) + 25 + "px"; setTimeout(reclsnme(), 0); setTimeout(csf4, 900); } //?? function csf4() { var ts = qp.shijian.target; qp.tq_qz.div.style.position = "static"; ts.style.position = "static"; if (ts.id == "qz14") { al("红方胜"); document.form1.submit(); } else if (ts.id == "qz085") { al("黑方胜"); document.form1.submit(); } var d_i = qp.d_i; qp.ydf == 0 ? qp.delz0.appendChild(ts) : qp.delz1.appendChild(ts); ts.dqwz = -1; ts.qz.huo = false; d_i.appendChild(qp.tq_qz.div); qp.tq_qz.dqwz = pi(d_i.id.replace("div", "")); qp.jiaohuan(); } //E空底落下棋子 并换方 function luoxiaqz(e) { qp.shijian = e; qp.clqzclick(); //动画 var ts = e.target; var tsxy = viewtblr(ts); var dq = qp.tq_qz.div; var dqxy = viewtblr(dq); A("body1").appendChild(dq); dq.style.position = "absolute"; dq.style.top = dqxy.top + "px"; dq.style.left = dqxy.left + "px"; setTimeout(csf1, 0); } //?? function csf1() { var ts = qp.shijian.target; var tsxy = viewtblr(ts); var dq = qp.tq_qz.div; var dqxy = viewtblr(dq); dq.style.top = (dqxy.top + (tsxy.top - dqxy.top)) + "px"; dq.style.left = (dqxy.left + (tsxy.left - dqxy.left)) + "px"; setTimeout(reclsnme(), 0); setTimeout(csf2, 800); } //?? function csf2() { var ts = qp.shijian.target; qp.tq_qz.div.style.position = "static"; ts.appendChild(qp.tq_qz.div); qp.tq_qz.dqwz = pi(ts.id.replace("div", "")); qp.jiaohuan(); } //E提起棋子 function tiqiqz(e) { var ts = this; //if (ts.qz.fang.qp.ydf != ts.qz.fh) return; ts.qz.fang.qp.clqzclick(); ts.qz.fang.qp.tq_qz = ts.qz;//设置当前提起的棋子 ts.style.borderColor = "#00ff21"; ts.className = ts.className + " d4"; //ts.qz.lzwz = ts.qz.luoziwz(); //ts.qz.czwz = ts.qz.chiziwz(); //空底绑定落子事件 for (var i = 0 ; i < ts.qz.lzwz.length; i++) { qp.di[ts.qz.lzwz[i]].onclick = luoxiaqz; qp.di[ts.qz.lzwz[i]].style.borderColor = "red"; } //对方子绑定被吃事件 for (var i = 0 ; i < ts.qz.czwz.length; i++) { ts.qz.czwz[i].qz.setclick_1(beichiqz); ts.qz.czwz[i].style.borderColor = "black"; } ts.qz.fang.setqzclick(qzdown); } //B棋子基类 function getqz(fang, name, wei, mox) { var qz = new Object(); qz.fang = fang;//所属的红黑方对象 qz.name = name;//棋子名 qz.fh = fang.fh;//方号 qz.mox = mox;//棋子模型编号 var d = document.createElement('div');//创建棋子的div d.className = "d3 qz qz" + fang.fh; d.id = "qz" + qz.fh + wei; d.innerHTML = qz.name; qz.div = d;//绑定棋子的div qz.div.qz = qz;//div中绑定棋子对象 fang.qp.di[wei].appendChild(qz.div);//添加到方 qz.huo = true;//棋子生死 qz.dqwz = wei;//当前位置 qz.lzwz = [];//可以移动到的位置 qz.czwz = [];//能吃到对方子的div //方法 qz.kezou = function (mox) {//F根据模式分支选择 switch (mox) { case 0: return ms0(this); case 1: return ms1(this); case 2: return ms2(this); case 3: return ms3(this); case 4: return ms4(this); case 5: return ms5(this); case 6: return ms6(this); } } qz.kechi = function (mox) {//F根据模式选择分支 } qz.luoziwz = function () {//F获取落子位置 底的编号数组 this.lzwz = []; this.czwz = []; this.kezou(qz.mox); return this.lzwz; } qz.chiziwz = function () {//F获取能吃对方子位置 对方子的div数组 var re = this.lzwz; var le = re.length; var re1 = []; for (var i = 0 ; i < re.length; i++) { re1[i] = re[i]; } var bh = 0; for (var i = 0 ; i < le; i++) { var ffh = this.fang.qp.getdizqz(re1[i]); if (ffh == undefined) { continue; } else if (ffh.qz.fh == this.fh) { re.splice(i - bh++, 1); } else { this.czwz.push(ffh); re.splice(i - bh++, 1); } } return this.czwz; } qz.getqzzdi = function () {//F棋子所在的底 return this.div.parentNode; } qz.setclick = function () {//棋子 绑定提起事件 this.setclick_1(tiqiqz); } qz.setclick_1 = function (en) {//棋子 绑定给定事件 if (this.huo) this.div.onclick = en; } qz.clclick = function () {//棋子 撤除提起事件 this.div.onclick = null; this.div.style.borderColor = "#00ffff"; } return qz; } //F获取一方16棋子对象数组 function getqzarr(fang, h) { var qzar = []; var nam = [["车", "马", "象", "士", "帅", "士", "象", "马", "车", "炮", "炮", "兵", "兵", "兵", "兵", "兵"], ["車", "馬", "相", "仕", "將", "仕", "相", "馬", "車", "炮", "炮", "卒", "卒", "卒", "卒", "卒"]]; var wei = [[81, 82, 83, 84, 85, 86, 87, 88, 89, 64, 70, 54, 56, 58, 60, 62], [0, 1, 2, 3, 4, 5, 6, 7, 8, 19, 25, 27, 29, 31, 33, 35]]; var mox = [0, 1, 2, 3, 4, 3, 2, 1, 0, 5, 5, 6, 6, 6, 6, 6]; for (var i = 0 ; i < 16; i++) { var c1 = getqz(fang, nam[h][i], wei[h][i], mox[i]); qzar.push(c1); } return qzar; } //B红方黑方对象 function getfang(qp, h) { var fang = new Object(); //if (qp == undefined) fang.qp = getqp("box"); fang.qp = qp;//所属的棋盘对象 fang.name = h == 0 ? "红方" : "黑方";//方名 fang.fh = h;//方号 fang.qzar = getqzarr(fang, h);//获取16子 //方法 fang.setqzclick = function (en) {//方中所有棋子 绑定提起事件 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].setclick_1(en); } } fang.clqzclick = function (en) {//方中所有棋子 撤除提起事件 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].clclick(); } } fang.luoziwz = function () {//F方的所有子更新落吃位置 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].luoziwz(); } } fang.benfwz = function () {//F本方的所有子当前位置 var re = []; for (var i = 0 ; i < this.qzar.length; i++) { re.push(this.qzar[i].dqwz); } fang.bfwz = re; return re; } fang.duifwz = function () {//F对方的所有子当前位置 var re = []; var duif = this === fang.qp.hong ? fang.qp.hei : fang.qp.hong; for (var i = 0 ; i < duif.qzar.length; i++) { re.push(duif.qzar[i].dqwz); } fang.dfwz = re; return re; } return fang; } //B棋盘对象 function getqp(box) { var qp = new Object(); qp.box = A(box);//最外div qp.box.innerHTML = ""; for (var i = 0 ; i < 90; i++) { var d = document.createElement('div'); d.className = "di"; d.id = "div" + i; d.qp = qp; //d.setAttribute("valign", "center"); qp.box.appendChild(d); } qp.di = qp.box.childNodes;//90个位置div qp.hong = getfang(qp, 0); //红方对象 qp.hei = getfang(qp, 1);//黑方对象 qp.ydf = 1;//行动方 qp.tq_qz = null;//当前提起的棋子 qp.sp_f = A("sp_f");//提示器 qp.delz0 = A("delz0");//死子区 qp.delz1 = A("delz1");//死子区 //方法 qp.clqzclick = function () {//F清除所有棋子的点击事件 this.hei.clqzclick(); this.hong.clqzclick(); } qp.getdizqz = function (i) {//F底中存在的棋子 return this.di[i].childNodes[0]; } qp.cldiclick = function () {//F清除所有底的点击事件 for (var i = 0 ; i < this.di.length; i++) { this.di[i].onclick = null; this.di[i].style.borderColor = "#ffd800"; } } qp.luoziwz = function () {//F所有子更新落吃位置 this.hong.luoziwz(); this.hei.luoziwz(); } qp.jiaohuan = function () {//F交换走棋方 this.cldiclick(); this.clqzclick(); this.ydf = this.ydf == 0 ? 1 : 0; if (this.ydf == 0) { this.sp_f.style.color = "red"; this.sp_f.innerHTML = "红方"; this.hong.setqzclick(tiqiqz); } else { this.sp_f.style.color = "black"; this.sp_f.innerHTML = "黑方"; this.hei.setqzclick(tiqiqz); } this.luoziwz(); if (this.tq_qz) reclsnme(this.tq_qz.div); this.tq_qz = null; } //初始化 //qp.hong.luoziwz();//hong方的所有子更新落吃位置 //qp.hei.luoziwz();//hei方的所有子更新落吃位置 return qp; } //E窗体大小改变事件 function winresize() { qp.box.style.top = (viewtblr("bg").top + 50) + "px"; qp.box.style.left = (viewtblr("bg").left + 53) + "px"; qp.delz0.style.top = (viewtblr(qp.box).top + 0) + "px"; qp.delz0.style.left = (viewtblr(qp.box).left - 90) + "px"; qp.delz1.style.top = (viewtblr(qp.box).top + 0) + "px"; qp.delz1.style.left = (viewtblr(qp.box).left + qp.box.clientWidth) + "px"; } //E初始化 function load() { qp = getqp("box"); qp.jiaohuan(); winresize(); window.onresize = winresize; document.onmouseup = function (e) { if (e.button == 2) { qzdown(e); //e.preventDefault(); } } } //测试 function aaabbb() { document.form1.submit(); } </script> </head> <body id="body1" onload="load();" oncontextmenu="return false;"> <form id="form1" name="form1"> <div align="center" style="border: 1px solid #00ff21;"> <a href="../game2/xqi2.html">ie9象棋</a> <a href="../game1/she.html">贪吃蛇</a> <a href="../Default.html">返回</a> <br />ie10 </div> <div align="center" style="background-color: #c8c193;"> <div id="bgdiv"> <img id="bg" alt="aa" src="bg.jpg" /> </div> <div id="delz0" class="delz" style="float: left;"></div> <div id="delz1" class="delz" style="float: right;"></div> <div id="box"> </div> <br /> <span id="sp_f" style="color: red; font-family: 隶书; font-size: 40px;">红方</span> <br /> <input id="Submit1" type="submit" value="刷新" /> <input id="Button1" type="button" value="测试" onclick="aaabbb()" /> <br /> </div> </form> </body> </html> <script type="text/javascript"> //var qp_di = A("box").childNodes; </script>
ie9版本
View Code
<!DOCTYPE html> <!-- begin : 20130508 author : Spider (利用js复习对象概念) 20130508: 背景 棋盘 双方 棋子等对象定义 20130509: 棋盘 双方 棋子等对象功能实现 20130510: 各对象之间功能交换实现游戏规则 20130511: ie9版本无变动 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_HTML5_CSS3练习象棋游戏ie9</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #bgdiv { border: 0px solid #00ff21; } #bg { background-image: url("bg.jpg"); width: 600px; height: 600px; } #box { width: 495px; height: 500px; border: 1px solid rgba(0, 255, 33, 0.00); top: 10px; left: 10px; position: absolute; z-index: 1; /*column-count: 9;*/ } .di { margin: 3px; width: 49px; height: 44px; border: 0px solid #ffd800; float: left; background-color: rgba(200, 193, 147, 0.00); border-radius: 25px; } .qz { margin: 1px; width: 40px; height: 40px; border: 1px solid #00ffff; border-radius: 25px; font-size: 35px; background-color: #bd8143; text-align: center; cursor: pointer; position: relative; transition: transform 1s, width 0.5s, height 0.5s,top 0.5s,left 0.5s,font-size 0.5s; /*transition-delay: 0.5s;*/ box-shadow: 5px 5px 15px #888888; font-family: 隶书; } .d3:hover { top: -3px; left: -3px; } .d4 { width: 46px; height: 46px; font-size: 40px; transform: rotate(360deg); } .qz0 { color: red; } .qz1 { color: black; } .delz { width: 90px; height: 500px; border: 1px solid rgba(0, 255, 255, 0.00); top: 10px; left: 10px; position: absolute; z-index: 1; /*column-count: 2;*/ } .tiqi { border: 1px solid #00ff21; } @keyframes action01 { } </style> <script type="text/javascript"> //B:工厂 E:事件 F:方法 //------------------------- //快捷获取DOM function A(id) { if (typeof id == "string") { return document.getElementById(id); } else if (typeof id == "object") { return id; } } //快捷获取DOM id名 function sA(id) { if (typeof id == "string") { return id; } else if (typeof id == "object") { return id.id; } } //alert function al(s) { alert(s); } //快捷parseInt function pi(s) { return parseInt(s); } //快捷parseFloat function pf(s) { return parseFloat(s); } //快捷Number function nb(s) { return Number(s); } //取element的viewport(可视区域)坐标 function viewtblr(id) { return A(id).getBoundingClientRect(); } //车 function ms0(ts) { var dq = ts.dqwz; var re = ts.lzwz; //上 for (var i = dq - 9 ; i >= 0; i -= 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //下 for (var i = dq + 9 ; i <= 89; i += 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //左 for (var i = dq - 1 ; i % 9 >= 0; i -= 1) { if (i % 9 == 8) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } //右 for (var i = dq + 1 ; i % 9 <= 8 ; i += 1) { if (i % 9 == 0) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { ts.lzwz.push(i); } else if (ffh.qz.fh == ts.fh) { break; } else { ts.czwz.push(ffh); break; } } return re; } //马 function ms1(ts) { var dq = ts.dqwz; var re = ts.lzwz; if (dq % 9 != 0 && dq != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) { re.push(dq - 19); } if ((dq + 1) % 9 != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) { re.push(dq + 19); } if ((dq + 1) % 9 != 0 && dq - 18 >= 0 && ts.fang.qp.getdizqz(dq - 9) == undefined) { re.push(dq - 17); } if (dq % 9 != 0 && dq != 0 && dq + 18 <= 89 && ts.fang.qp.getdizqz(dq + 9) == undefined) { re.push(dq + 17); } if (dq - 9 >= 0 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) { re.push(dq - 11); } if (dq + 9 <= 89 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) { re.push(dq + 11); } if (dq - 9 >= 0 && (dq + 1) % 9 != 0 && (dq + 2) % 9 != 0 && ts.fang.qp.getdizqz(dq + 1) == undefined) { re.push(dq - 7); } if (dq + 9 <= 89 && dq % 9 != 0 && (dq - 1) % 9 != 0 && ts.fang.qp.getdizqz(dq - 1) == undefined) { re.push(dq + 7); } ts.chiziwz(); return re; } //象 function ms2(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 47: 1, 51: 1, 63: 1, 67: 1, 71: 1, 83: 1, 87: 1 }; } else { fw = { 38: 1, 42: 1, 26: 1, 22: 1, 18: 1, 2: 1, 6: 1 }; } if ((dq - 20) in fw && ts.fang.qp.getdizqz(dq - 10) == undefined) { re.push(dq - 20);//左上 } if ((dq + 20) in fw && ts.fang.qp.getdizqz(dq + 10) == undefined) { re.push(dq + 20);//右下 } if ((dq - 16) in fw && ts.fang.qp.getdizqz(dq - 8) == undefined) { re.push(dq - 16);//右上 } if ((dq + 16) in fw && ts.fang.qp.getdizqz(dq + 8) == undefined) { re.push(dq + 16);//左下 } ts.chiziwz(); return re; } //士 function ms3(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 66: 1, 68: 1, 76: 1, 84: 1, 86: 1 }; } else { fw = { 3: 1, 5: 1, 13: 1, 21: 1, 23: 1 }; } if ((dq - 10) in fw) { re.push(dq - 10);//左上 } if ((dq + 10) in fw) { re.push(dq + 10);//右下 } if ((dq - 8) in fw) { re.push(dq - 8);//右上 } if ((dq + 8) in fw) { re.push(dq + 8);//左下 } ts.chiziwz(); return re; } //帅 function ms4(ts) { var dq = ts.dqwz; var re = ts.lzwz; var fw = {}; if (ts.fh == 0) { fw = { 66: 1, 67: 1, 68: 1, 75: 1, 76: 1, 77: 1, 84: 1, 85: 1, 86: 1 }; } else { fw = { 3: 1, 4: 1, 5: 1, 12: 1, 13: 1, 14: 1, 21: 1, 22: 1, 23: 1 }; } if ((dq - 9) in fw) { re.push(dq - 9);//上 } if ((dq + 9) in fw) { re.push(dq + 9);//下 } if ((dq - 1) in fw) { re.push(dq - 1);//左 } if ((dq + 1) in fw) { re.push(dq + 1);//右 } ts.chiziwz(); return re; } //炮 function ms5(ts) { var dq = ts.dqwz; var re = ts.lzwz; //上 var cc = 0; for (var i = dq - 9 ; i >= 0; i -= 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //下 cc = 0; for (var i = dq + 9 ; i <= 89; i += 9) { var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //左 cc = 0; for (var i = dq - 1 ; i % 9 >= 0; i -= 1) { if (i % 9 == 8) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } //右 cc = 0; for (var i = dq + 1 ; i % 9 <= 8 ; i += 1) { if (i % 9 == 0) break; var ffh = ts.fang.qp.getdizqz(i); if (ffh == undefined) { if (cc == 0) { ts.lzwz.push(i); } } else if (ffh.qz.fh == ts.fh) { if (cc == 0) { cc = 1; continue; } else { break; } } else { if (cc == 0) { cc = 1; continue; } else { ts.czwz.push(ffh); break; } } } return re; } //兵 function ms6(ts) { var dq = ts.dqwz; var re = ts.lzwz; if (ts.fh == 0 && dq - 9 >= 0) { re.push(dq - 9);//上 } if (ts.fh == 1 && dq + 9 <= 89) { re.push(dq + 9);//下 } if (dq % 9 != 0 && dq != 0) { re.push(dq - 1);//左 } if ((dq + 1) % 9 != 0) { re.push(dq + 1);//右 } ts.chiziwz(); return re; } //E右键放下提起的棋子 function qzdown(e) { qp.cldiclick(); qp.clqzclick(); qp.ydf == 0 ? qp.hong.setqzclick(tiqiqz) : qp.hei.setqzclick(tiqiqz); if (e.button == 0) { e.target.click = tiqiqz; e.target.click(); } } //E可以被吃棋子的点击事件 function beichiqz(e) { var ts = e.target; if (ts.id == "qz14") { al("红方胜"); document.form1.submit(); } else if (ts.id == "qz085") { al("黑方胜"); document.form1.submit(); } var d_i = ts.qz.getqzzdi(); qp.ydf == 0 ? qp.delz0.appendChild(ts) : qp.delz1.appendChild(ts); ts.dqwz = -1; ts.qz.huo = false; d_i.appendChild(qp.tq_qz.div); qp.tq_qz.dqwz = pi(d_i.id.replace("div", "")); qp.jiaohuan(); } //E空底落下棋子 并换方 function luoxiaqz(e) { var ts = e.target; ts.appendChild(qp.tq_qz.div); qp.tq_qz.dqwz = pi(ts.id.replace("div", "")); qp.jiaohuan(); } //E提起棋子 function tiqiqz(e) { var ts = this; //if (ts.qz.fang.qp.ydf != ts.qz.fh) return; ts.qz.fang.qp.clqzclick(); ts.qz.fang.qp.tq_qz = ts.qz;//设置当前提起的棋子 ts.style.borderColor = "#00ff21"; //ts.qz.lzwz = ts.qz.luoziwz(); //ts.qz.czwz = ts.qz.chiziwz(); //空底绑定落子事件 for (var i = 0 ; i < ts.qz.lzwz.length; i++) { qp.di[ts.qz.lzwz[i]].onclick = luoxiaqz; qp.di[ts.qz.lzwz[i]].style.borderColor = "red"; } //对方子绑定被吃事件 for (var i = 0 ; i < ts.qz.czwz.length; i++) { ts.qz.czwz[i].qz.setclick_1(beichiqz); ts.qz.czwz[i].style.borderColor = "black"; } ts.qz.fang.setqzclick(qzdown); } //B棋子基类 function getqz(fang, name, wei, mox) { var qz = new Object(); qz.fang = fang;//所属的红黑方对象 qz.name = name;//棋子名 qz.fh = fang.fh;//方号 qz.mox = mox;//棋子模型编号 var d = document.createElement('div');//创建棋子的div d.className = "d3 qz qz" + fang.fh; d.id = "qz" + qz.fh + wei; d.innerHTML = qz.name; qz.div = d;//绑定棋子的div qz.div.qz = qz;//div中绑定棋子对象 fang.qp.di[wei].appendChild(qz.div);//添加到方 qz.huo = true;//棋子生死 qz.dqwz = wei;//当前位置 qz.lzwz = [];//可以移动到的位置 qz.czwz = [];//能吃到对方子的div //方法 qz.kezou = function (mox) {//F根据模式分支选择 switch (mox) { case 0: return ms0(this); case 1: return ms1(this); case 2: return ms2(this); case 3: return ms3(this); case 4: return ms4(this); case 5: return ms5(this); case 6: return ms6(this); } } qz.kechi = function (mox) {//F根据模式选择分支 } qz.luoziwz = function () {//F获取落子位置 底的编号数组 this.lzwz = []; this.czwz = []; this.kezou(qz.mox); return this.lzwz; } qz.chiziwz = function () {//F获取能吃对方子位置 对方子的div数组 var re = this.lzwz; var le = re.length; var re1 = []; for (var i = 0 ; i < re.length; i++) { re1[i] = re[i]; } var bh = 0; for (var i = 0 ; i < le; i++) { var ffh = this.fang.qp.getdizqz(re1[i]); if (ffh == undefined) { continue; } else if (ffh.qz.fh == this.fh) { re.splice(i - bh++, 1); } else { this.czwz.push(ffh); re.splice(i - bh++, 1); } } return this.czwz; } qz.getqzzdi = function () {//F棋子所在的底 return this.div.parentNode; } qz.setclick = function () {//棋子 绑定提起事件 this.setclick_1(tiqiqz); } qz.setclick_1 = function (en) {//棋子 绑定给定事件 if (this.huo) this.div.onclick = en; } qz.clclick = function () {//棋子 撤除提起事件 this.div.onclick = null; this.div.style.borderColor = "#00ffff"; } return qz; } //F获取一方16棋子对象数组 function getqzarr(fang, h) { var qzar = []; var nam = [["车", "马", "象", "士", "帅", "士", "象", "马", "车", "炮", "炮", "兵", "兵", "兵", "兵", "兵"], ["車", "馬", "相", "仕", "將", "仕", "相", "馬", "車", "炮", "炮", "卒", "卒", "卒", "卒", "卒"]]; var wei = [[81, 82, 83, 84, 85, 86, 87, 88, 89, 64, 70, 54, 56, 58, 60, 62], [0, 1, 2, 3, 4, 5, 6, 7, 8, 19, 25, 27, 29, 31, 33, 35]]; var mox = [0, 1, 2, 3, 4, 3, 2, 1, 0, 5, 5, 6, 6, 6, 6, 6]; for (var i = 0 ; i < 16; i++) { var c1 = getqz(fang, nam[h][i], wei[h][i], mox[i]); qzar.push(c1); } return qzar; } //B红方黑方对象 function getfang(qp, h) { var fang = new Object(); //if (qp == undefined) fang.qp = getqp("box"); fang.qp = qp;//所属的棋盘对象 fang.name = h == 0 ? "红方" : "黑方";//方名 fang.fh = h;//方号 fang.qzar = getqzarr(fang, h);//获取16子 //方法 fang.setqzclick = function (en) {//方中所有棋子 绑定提起事件 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].setclick_1(en); } } fang.clqzclick = function (en) {//方中所有棋子 撤除提起事件 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].clclick(); } } fang.luoziwz = function () {//F方的所有子更新落吃位置 for (var i = 0 ; i < this.qzar.length; i++) { this.qzar[i].luoziwz(); } } fang.benfwz = function () {//F本方的所有子当前位置 var re = []; for (var i = 0 ; i < this.qzar.length; i++) { re.push(this.qzar[i].dqwz); } fang.bfwz = re; return re; } fang.duifwz = function () {//F对方的所有子当前位置 var re = []; var duif = this === fang.qp.hong ? fang.qp.hei : fang.qp.hong; for (var i = 0 ; i < duif.qzar.length; i++) { re.push(duif.qzar[i].dqwz); } fang.dfwz = re; return re; } return fang; } //B棋盘对象 function getqp(box) { var qp = new Object(); qp.box = A(box);//最外div qp.box.innerHTML = ""; for (var i = 0 ; i < 90; i++) { var d = document.createElement('div'); d.className = "di"; d.id = "div" + i; d.qp = qp; //d.setAttribute("valign", "center"); qp.box.appendChild(d); } qp.di = qp.box.childNodes;//90个位置div qp.hong = getfang(qp, 0); //红方对象 qp.hei = getfang(qp, 1);//黑方对象 qp.ydf = 1;//行动方 qp.tq_qz = null;//当前提起的棋子 qp.sp_f = A("sp_f");//提示器 qp.delz0 = A("delz0");//死子区 qp.delz1 = A("delz1");//死子区 //方法 qp.clqzclick = function () {//F清除所有棋子的点击事件 this.hei.clqzclick(); this.hong.clqzclick(); } qp.getdizqz = function (i) {//F底中存在的棋子 return this.di[i].childNodes[0]; } qp.cldiclick = function () {//F清除所有底的点击事件 for (var i = 0 ; i < this.di.length; i++) { this.di[i].onclick = null; this.di[i].style.borderColor = "#ffd800"; } } qp.luoziwz = function () {//F所有子更新落吃位置 this.hong.luoziwz(); this.hei.luoziwz(); } qp.jiaohuan = function () {//F交换走棋方 this.cldiclick(); this.clqzclick(); this.ydf = this.ydf == 0 ? 1 : 0; if (this.ydf == 0) { this.sp_f.style.color = "red"; this.sp_f.innerHTML = "红方"; this.hong.setqzclick(tiqiqz); } else { this.sp_f.style.color = "black"; this.sp_f.innerHTML = "黑方"; this.hei.setqzclick(tiqiqz); } this.luoziwz(); this.tq_qz = null; } //初始化 //qp.hong.luoziwz();//hong方的所有子更新落吃位置 //qp.hei.luoziwz();//hei方的所有子更新落吃位置 return qp; } //E窗体大小改变事件 function winresize() { qp.box.style.top = (viewtblr("bg").top + 50) + "px"; qp.box.style.left = (viewtblr("bg").left + 53) + "px"; qp.delz0.style.top = (viewtblr(qp.box).top + 0) + "px"; qp.delz0.style.left = (viewtblr(qp.box).left - 90) + "px"; qp.delz1.style.top = (viewtblr(qp.box).top + 0) + "px"; qp.delz1.style.left = (viewtblr(qp.box).left + qp.box.clientWidth) + "px"; } //E初始化 function load() { qp = getqp("box"); qp.jiaohuan(); winresize(); window.onresize = winresize; document.onmouseup = function (e) { if (e.button == 2) { qzdown(e); //e.preventDefault(); } } } //测试 function aaabbb() { document.form1.submit(); } </script> </head> <body id="body1" onload="load();" oncontextmenu="return false;"> <form id="form1" name="form1"> <div align="center" style="border: 1px solid #00ff21;"> <a href="../game2/xqi.html">ie10象棋</a> <a href="../game1/she.html">贪吃蛇</a> <a href="../Default.html">返回</a> <br />ie9 </div> <div align="center" style="background-color: #c8c193;"> <div id="bgdiv"> <img id="bg" alt="aa" src="bg.jpg" /> </div> <div id="delz0" class="delz" style="float: left;"></div> <div id="delz1" class="delz" style="float: right;"></div> <div id="box"> </div> <br /> <span id="sp_f" style="color: red; font-family: 隶书; font-size: 40px;">红方</span> <br /> <input id="Submit1" type="submit" value="刷新" /> <input id="Button1" type="button" value="测试" onclick="aaabbb()" /> <br /> </div> </form> </body> </html> <script type="text/javascript"> //var qp_di = A("box").childNodes; </script>