思路：1.将棋盘设置为背景图片，对背景图片进行分割，分为9行10列的div块。每一块都是棋子的一个位置。
2.对每一个div块设置onclick点击事件，每次点击div块都会调用判断棋子的走法是否合理的函数。
panduan_way(x1,y1,x2,y2) ，其中x1,y1为棋子的起始坐标，x2,y2为棋子的落子坐标，如果走法合理，则返回
true，否则返回false。
3.设置二维数组或一维数组（我用的是一维数组），用来保存棋盘的各棋子所在位置。初始时，棋盘如下：
var qipan=[ 1,2,3,4,5,6,7,8,9, 0,0,0,0,0,0,0,0,0, 0,10,0,0,0,0,0,11,0, 12,0,13,0,14,0,15,0,16, 0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0, 17,0,18,0,19,0,20,0,21, 0,22,0,0,0,0,0,23,0, 0,0,0,0,0,0,0,0,0, 24,25,26,27,28,29,30,31,32 ];
其中0代表没有棋子，1代表黑方的车，2代表黑方的马，依次类推。
4.建立棋盘数字和图片的对应关系，构造函数panduan_qizhi(qizhi_id)。qizhi_id为棋子对应的棋盘数字。
function panduan_qizhi(qizhi_id){ if(qizhi_id==0){return ""} if(qizhi_id==1){return "img/BC.png"} if(qizhi_id==2){return "img/BM.png"} if(qizhi_id==3){return "img/BX.png"} if(qizhi_id==4){return "img/BS.png"} if(qizhi_id==5){return "img/BJ.png"} if(qizhi_id==6){return "img/BS.png"} if(qizhi_id==7){return "img/BX.png"} if(qizhi_id==8){return "img/BM.png"} if(qizhi_id==9){return "img/BC.png"} if(qizhi_id==10){return "img/BP.png"} if(qizhi_id==11){return "img/BP.png"} if(qizhi_id==12){return "img/BZ.png"} if(qizhi_id==13){return "img/BZ.png"} if(qizhi_id==14){return "img/BZ.png"} if(qizhi_id==15){return "img/BZ.png"} if(qizhi_id==16){return "img/BZ.png"} if(qizhi_id==17){return "img/RZ.png"} if(qizhi_id==18){return "img/RZ.png"} if(qizhi_id==19){return "img/RZ.png"} if(qizhi_id==20){return "img/RZ.png"} if(qizhi_id==21){return "img/RZ.png"} if(qizhi_id==22){return "img/RP.png"} if(qizhi_id==23){return "img/RP.png"} if(qizhi_id==24){return "img/RC.png"} if(qizhi_id==25){return "img/RM.png"} if(qizhi_id==26){return "img/RX.png"} if(qizhi_id==27){return "img/RS.png"} if(qizhi_id==28){return "img/RJ.png"} if(qizhi_id==29){return "img/RS.png"} if(qizhi_id==30){return "img/RX.png"} if(qizhi_id==31){return "img/RM.png"} if(qizhi_id==32){return "img/RC.png"} }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>象棋</title> <style> .all{ position: absolute; width: 100%; height: 100%; text-align: center; } .center{ position: absolute; left:31.5%; top: 8%; width:560px; height:620px; background-image: url(img/CP.jpg); background-size: 100% 100%; } .qipan{ position: absolute; width:60px; height:61px; } </style> <script> window.x2;window.y2;window.x1;window.y1; window.b=true; window.q; window.z; var qipan=[ 1,2,3,4,5,6,7,8,9, 0,0,0,0,0,0,0,0,0, 0,10,0,0,0,0,0,11,0, 12,0,13,0,14,0,15,0,16, 0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0, 17,0,18,0,19,0,20,0,21, 0,22,0,0,0,0,0,23,0, 0,0,0,0,0,0,0,0,0, 24,25,26,27,28,29,30,31,32 ]; function panduan_qizhi(qizhi_id){ if(qizhi_id==0){return ""} if(qizhi_id==1){return "img/BC.png"} if(qizhi_id==2){return "img/BM.png"} if(qizhi_id==3){return "img/BX.png"} if(qizhi_id==4){return "img/BS.png"} if(qizhi_id==5){return "img/BJ.png"} if(qizhi_id==6){return "img/BS.png"} if(qizhi_id==7){return "img/BX.png"} if(qizhi_id==8){return "img/BM.png"} if(qizhi_id==9){return "img/BC.png"} if(qizhi_id==10){return "img/BP.png"} if(qizhi_id==11){return "img/BP.png"} if(qizhi_id==12){return "img/BZ.png"} if(qizhi_id==13){return "img/BZ.png"} if(qizhi_id==14){return "img/BZ.png"} if(qizhi_id==15){return "img/BZ.png"} if(qizhi_id==16){return "img/BZ.png"} if(qizhi_id==17){return "img/RZ.png"} if(qizhi_id==18){return "img/RZ.png"} if(qizhi_id==19){return "img/RZ.png"} if(qizhi_id==20){return "img/RZ.png"} if(qizhi_id==21){return "img/RZ.png"} if(qizhi_id==22){return "img/RP.png"} if(qizhi_id==23){return "img/RP.png"} if(qizhi_id==24){return "img/RC.png"} if(qizhi_id==25){return "img/RM.png"} if(qizhi_id==26){return "img/RX.png"} if(qizhi_id==27){return "img/RS.png"} if(qizhi_id==28){return "img/RJ.png"} if(qizhi_id==29){return "img/RS.png"} if(qizhi_id==30){return "img/RX.png"} if(qizhi_id==31){return "img/RM.png"} if(qizhi_id==32){return "img/RC.png"} } function panduan_way(x1,y1,x2,y2){ if(qipan[q]<=16&&qipan[q]>=1&&qipan[z]<=16&&qipan[z]>=1) return false;//己方不能互吃 if(qipan[q]<=32&&qipan[q]>=17&&qipan[z]<=32&&qipan[z]>=17) return false;//己方不能互吃 if( (qipan[q]==1||qipan[q]==9||qipan[q]==24||qipan[q]==32) && (x1==x2||y1==y2)) {//车 if(x1==x2 && y2>y1){//车右横跳，判断中间有无棋子 for(var i=y1+1;i<y2;i++){ if(qipan[x1*9+i]!=0) return false; } return true; } if(x1==x2 && y2<y1){//车左横跳，判断中间有无棋子 for(var i=y1-1;i>y2;i--){ if(qipan[x1*9+i]!=0) return false; } return true; } if(y1==y2 && x2<x1){//车上竖跳，判断中间有无棋子 for(var i=x1-1;i>x2;i--){ if(qipan[i*9+y1]!=0) return false; } return true; } if(y1==y2 && x2>x1){//车下竖跳，判断中间有无棋子 for(var i=x1+1;i<x2;i++){ if(qipan[i*9+y1]!=0) return false; } return true; } } if( (qipan[q]==2||qipan[q]==8||qipan[q]==25||qipan[q]==31) &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==5)){//马 if(qipan[(x1+1)*9+y1]==0 && x2==x1+2){//跳马，判断有无挡脚 return true; } if(x1-1>=0 && qipan[(x1-1)*9+y1]==0 && x2==x1-2){//跳马，判断有无挡脚 return true; } if(qipan[x1*9+y1+1]==0 && y2==y1+2){//跳马，判断有无挡脚 return true; } if(y1-1>=0 && qipan[x1*9+y1-1]==0 && y2==y1-2){//跳马，判断有无挡脚 return true; } } if( (qipan[q]==3||qipan[q]==7) && x2<=4 &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==8)){//黑象 if(y1-1>=0 && qipan[(x1+1)*9+y1-1]==0 && x2==x1+2 && y2==y1-2){//跳象，判断有无挡脚 return true; } if(qipan[(x1+1)*9+y1+1]==0 && x2==x1+2 && y2==y1+2){//跳象，判断有无挡脚 return true; } if(y1-1>=0 && x1-1>=0 && qipan[(x1-1)*9+y1-1]==0 && x2==x1-2 && y2==y1-2){//跳象，判断有无挡脚 return true; } if(x1-1>=0 && qipan[(x1-1)*9+y1+1]==0 && x2==x1-2 && y2==y1+2){//跳象，判断有无挡脚 return true; } } if( (qipan[q]==26||qipan[q]==30) && x2>=5 &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==8)) {//红象 if(y1-1>=0 && qipan[(x1+1)*9+y1-1]==0 && x2==x1+2 && y2==y1-2){//跳象，判断有无挡脚 return true; } if(qipan[(x1+1)*9+y1+1]==0 && x2==x1+2 && y2==y1+2){//跳象，判断有无挡脚 return true; } if(y1-1>=0 && x1-1>=0 && qipan[(x1-1)*9+y1-1]==0 && x2==x1-2 && y2==y1-2){//跳象，判断有无挡脚 return true; } if(x1-1>=0 && qipan[(x1-1)*9+y1+1]==0 && x2==x1-2 && y2==y1+2){//跳象，判断有无挡脚 return true; } } if( (qipan[q]==4||qipan[q]==6||qipan[q]==27||qipan[q]==29) && (y2>=3&&y2<=5)&& (x2<=2||x2>=7) &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==2)) return true;//士 if( (qipan[q]==5||qipan[q]==28) && (y2>=3&&y2<=5)&& (x2<=2||x2>=7) &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==1)) return true;//将 if( (qipan[q]==10||qipan[q]==11||qipan[q]==22||qipan[q]==23) &&(x1==x2||y1==y2)) {//炮 var tu=false; if(x1==x2 && y2>y1){//炮右横跳，判断中间有无棋子 for(var i=y1+1;i<y2;i++){ if(qipan[x1*9+i]!=0) tu=true; } if(tu&&qipan[z]!=0) return true;//中间有棋子，终点有棋子 if(!tu&&qipan[z]==0) return true;//中间无棋子，终点无棋子 } if(x1==x2 && y2<y1){//炮左横跳，判断中间有无棋子 for(var i=y1-1;i>y2;i--){ if(qipan[x1*9+i]!=0 ) tu=true; } if(tu&&qipan[z]!=0) return true; if(!tu&&qipan[z]==0) return true; } if(y1==y2 && x2<x1){//炮上竖跳，判断中间有无棋子 for(var i=x1-1;i>x2;i--){ if(qipan[i*9+y1]!=0 ) tu=true; } if(tu&&qipan[z]!=0) return true; if(!tu&&qipan[z]==0) return true; } if(y1==y2 && x2>x1){//炮下竖跳，判断中间有无棋子 for(var i=x1+1;i<x2;i++){ if(qipan[i*9+y1]!=0 ) tu=true; } if(tu&&qipan[z]!=0) return true; if(!tu&&qipan[z]==0) return true; } } if( (qipan[q]==12||qipan[q]==13||qipan[q]==14||qipan[q]==15||qipan[q]==16) &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==1)) {//黑兵 if(x2<=4&&x2-x1==1) return true; if(x2>4&&(x2-x1==1||y2-y1==1||y2-y1==-1)) return true; } if( (qipan[q]==17||qipan[q]==18||qipan[q]==19||qipan[q]==20||qipan[q]==21) &&((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)==1)) {//红兵 if(x2>=5&&x2-x1==-1) return true; if(x2<=4&&(x2-x1==-1||y2-y1==1||y2-y1==-1)) return true; } return false; } function get_xy(x,y){ if(b==true) {x1=x;y1=y;q=x1*9+y1;}//起点 if(b==false) {x2=x;y2=y;z=x2*9+y2;}//终点 } function xiugai_qipan(q,z){ qipan[z]=qipan[q];//修改终点棋子为起点棋子 qipan[q]=0;//起点位置图片修为空 } function over(x2,y2){//判断是否被将军 if(qipan[x2*9+y2]==5) alert("红方获胜！"); if(qipan[x2*9+y2]==28) alert("黑方获胜！"); } function auto_play(){//随机播放音乐 var x=Math.floor(Math.random()*6+1); var video=document.getElementById("video") if(x==1) video.setAttribute("src","audio/何真真 - 彩蝶舞夏.mp3"); if(x==2) video.setAttribute("src","audio/大琴师音乐游戏 - 仙境.mp3"); if(x==3) video.setAttribute("src","audio/小旭音乐 - 临安初雨(纯音乐).mp3"); if(x==4) video.setAttribute("src","audio/月之门 - 七秀坊.mp3"); if(x==5) video.setAttribute("src","audio/月之门 - 情深义重.mp3"); if(x==6) video.setAttribute("src","audio/群星 - 墨香.mp3"); video.play(); } window.onload=auto_play;//页面加载时就播放音乐 var audio = document.getElementById("video"); audio.addEventListener('ended', function () { alert('over');}, false); function move(x,y){ if(b==false) { //终点 get_xy(x,y); b=true; //alert(panduan_way(x1,y1,x2,y2)); if(panduan_way(x1,y1,x2,y2)) { var s2=''+x2+''+y2;//终点被点击图片的id var s1=''+x1+''+y1;//起点被点击图片的id //window.alert(x1+" "+y1+" "+x2+" "+y2+" "+b); document.getElementById(s1).setAttribute("src",""); document.getElementById(s2).setAttribute("src",panduan_qizhi(qipan[q]));//用起点图片替换终点图片 over(x2,y2);//判断是否被将军 xiugai_qipan(q,z); } return 0; } if(b==true) { //起点 get_xy(x,y); b=false; //window.alert(x1+" "+y1+" "+b); } } </script> </head> <body > <p></p> <!-- 作者：offline 时间：2020-09-29 描述： --> <div class="all"> <audio controls="controls" autoplay="autoplay" id="video" loop="loop"></audio> <img src="img/back_img.jpg" height="100%" width="100%" align="center" /> <div class="center" id="center" > <div class="qipan" style="left:10px;top:5px;" onclick="move(0,0)"> <img src="img/BC.png" height="60" width="60" align="center" id="00"/> </div> <div class="qipan" style="left:70px;top:5px;" onclick="move(0,1)"> <img src="img/BM.png" height="60" width="60" align="center" id="01"/> </div> <div class="qipan" style=" left:130px;top:5px;" onclick="move(0,2)"> <img src="img/BX.png" height="60" width="60" align="center" id="02"/> </div> <div class="qipan" style="left:190px;top:5px;" onclick="move(0,3)"> <img src="img/BS.png" height="60" width="60" align="center" id="03" /> </div> <div class="qipan" style="left:250px;top:5px;" onclick="move(0,4)"> <img src="img/BJ.png" height="60" width="60" align="center" id="04" /> </div> <div class="qipan" style="left:310px;top:5px;" onclick="move(0,5)"> <img src="img/BS.png" height="60" width="60" align="center" id="05"/> </div> <div class="qipan" style="left:370px;top:5px;" onclick="move(0,6)"> <img src="img/BX.png" height="60" width="60" align="center" id="06" /> </div> <div class="qipan" style="left:430px;top:5px;" onclick="move(0,7)"> <img src="img/BM.png" height="60" width="60" align="center" id="07"/> </div> <div class="qipan" style="left:490px;top:5px;" onclick="move(0,8)"> <img src="img/BC.png" height="60" width="60" align="center" id="08" /> </div> <div class="qipan" style="left:10px;top:66px;" onclick="move(1,0)"> <img src="" height="60" width="60" align="center" id="10" /> </div> <div class="qipan" style="left:70px;top:66px;" onclick="move(1,1)"> <img src="" height="60" width="60" align="center" id="11" /> </div> <div class="qipan" style=" left:130px;top:66px;" onclick="move(1,2)"> <img src="" height="60" width="60" align="center" id="12" /> </div> <div class="qipan" style="left:190px;top:66px;" onclick="move(1,3)"> <img src="" height="60" width="60" align="center" id="13"/> </div> <div class="qipan" style="left:250px;top:66px;" onclick="move(1,4)"> <img src="" height="60" width="60" align="center" id="14"/> </div> <div class="qipan" style="left:310px;top:66px;" onclick="move(1,5)"> <img src="" height="60" width="60" align="center" id="15"/> </div> <div class="qipan" style="left:370px;top:66px;" onclick="move(1,6)"> <img src="" height="60" width="60" align="center" id="16" /> </div> <div class="qipan" style="left:430px;top:66px;" onclick="move(1,7)"> <img src="" height="60" width="60" align="center" id="17"/> </div> <div class="qipan" style="left:490px;top:66px;" onclick="move(1,8)"> <img src="" height="60" width="60" align="center" id="18" /> </div> <div class="qipan" style="left:10px;top:127px;" onclick="move(2,0)"> <img src="" height="60" width="60" align="center" id="20"/> </div> <div class="qipan" style="left:70px;top:127px;" onclick="move(2,1)"> <img src="img/BP.png" height="60" width="60" align="center" id="21" /> </div> <div class="qipan" style=" left:130px;top:127px;" onclick="move(2,2)"> <img src="" height="60" width="60" align="center" id="22"/> </div> <div class="qipan" style="left:190px;top:127px;" onclick="move(2,3)"> <img src="" height="60" width="60" align="center" id="23"/> </div> <div class="qipan" style="left:250px;top:127px;" onclick="move(2,4)"> <img src="" height="60" width="60" align="center" id="24"/> </div> <div class="qipan" style="left:310px;top:127px;" onclick="move(2,5)"> <img src="" height="60" width="60" align="center" id="25"/> </div> <div class="qipan" style="left:370px;top:127px;" onclick="move(2,6)"> <img src="" height="60" width="60" align="center" id="26"/> </div> <div class="qipan" style="left:430px;top:127px;" onclick="move(2,7)"> <img src="img/BP.png" height="60" width="60" align="center" id="27" /> </div> <div class="qipan" style="left:490px;top:127px;" onclick="move(2,8)"> <img src="" height="60" width="60" align="center" id="28"/> </div> <div class="qipan" style=" left:10px;top:188px;" onclick="move(3,0)"> <img src="img/BZ.png" height="60" width="60" align="center" id="30"/> </div> <div class="qipan" style="left:70px;top:188px;" onclick="move(3,1)"> <img src="" height="60" width="60" align="center" id="31"/> </div> <div class="qipan" style=" left:130px;top:188px;" onclick="move(3,2)"> <img src="img/BZ.png" height="60" width="60" align="center" id="32"/> </div> <div class="qipan" style="left:190px;top:188px;" onclick="move(3,3)"> <img src="" height="60" width="60" align="center" id="33"/> </div> <div class="qipan" style="left:250px;top:188px;" onclick="move(3,4)"> <img src="img/BZ.png" height="60" width="60" align="center" id="34"/> </div> <div class="qipan" style="left:310px;top:188px;" onclick="move(3,5)"> <img src="" height="60" width="60" align="center" id="35"/> </div> <div class="qipan" style="left:370px;top:188px;" onclick="move(3,6)"> <img src="img/BZ.png" height="60" width="60" align="center" id="36" /> </div> <div class="qipan" style="left:430px;top:188px;" onclick="move(3,7)"> <img src="" height="60" width="60" align="center" id="37"/> </div> <div class="qipan" style="left:490px;top:188px;" onclick="move(3,8)"> <img src="img/BZ.png" height="60" width="60" align="center" id="38"/> </div> <div class="qipan" style="left:10px;top:249px;" onclick="move(4,0)"> <img src="" height="60" width="60" align="center" id="40"/> </div> <div class="qipan" style="left:70px;top:249px;" onclick="move(4,1)"> <img src="" height="60" width="60" align="center" id="41"/> </div> <div class="qipan" style=" left:130px;top:249px;" onclick="move(4,2)"> <img src="" height="60" width="60" align="center" id="42"/> </div> <div class="qipan" style="left:190px;top:249px;" onclick="move(4,3)"> <img src="" height="60" width="60" align="center" id="43"/> </div> <div class="qipan" style="left:250px;top:249px;" onclick="move(4,4)"> <img src="" height="60" width="60" align="center" id="44"/> </div> <div class="qipan" style="left:310px;top:249px;" onclick="move(4,5)"> <img src="" height="60" width="60" align="center" id="45"/> </div> <div class="qipan" style="left:370px;top:249px;" onclick="move(4,6)"> <img src="" height="60" width="60" align="center" id="46"/> </div> <div class="qipan" style="left:430px;top:249px;" onclick="move(4,7)"> <img src="" height="60" width="60" align="center" id="47" /> </div> <div class="qipan" style="left:490px;top:249px;" onclick="move(4,8)"> <img src="" height="60" width="60" align="center" id="48"/> </div> <div class="qipan" style=" left:10px;top:310px;" onclick="move(5,0)"> <img src="" height="60" width="60" align="center" id="50"/> </div> <div class="qipan" style="left:70px;top:310px;" onclick="move(5,1)"> <img src="" height="60" width="60" align="center" id="51"/> </div> <div class="qipan" style=" left:130px;top:310px;" onclick="move(5,2)"> <img src="" height="60" width="60" align="center" id="52"/> </div> <div class="qipan" style="left:190px;top:310px;" onclick="move(5,3)"> <img src="" height="60" width="60" align="center" id="53"/> </div> <div class="qipan" style="left:250px;top:310px;" onclick="move(5,4)"> <img src="" height="60" width="60" align="center" id="54"/> </div> <div class="qipan" style="left:310px;top:310px;" onclick="move(5,5)"> <img src="" height="60" width="60" align="center" id="55"/> </div> <div class="qipan" style="left:370px;top:310px;" onclick="move(5,6)"> <img src="" height="60" width="60" align="center" id="56"/> </div> <div class="qipan" style="left:430px;top:310px;" onclick="move(5,7)"> <img src="" height="60" width="60" align="center" id="57"/> </div> <div class="qipan" style="left:490px;top:310px;" onclick="move(5,8)"> <img src="" height="60" width="60" align="center" id="58"/> </div> <div class="qipan" style="left:10px;top:371px;" onclick="move(6,0)"> <img src="img/RZ.png" height="60" width="60" align="center" id="60"/> </div> <div class="qipan" style="left:70px;top:371px;" onclick="move(6,1)"> <img src="" height="60" width="60" align="center" id="61"/> </div> <div class="qipan" style=" left:130px;top:371px;" onclick="move(6,2)"> <img src="img/RZ.png" height="60" width="60" align="center" id="62"/> </div> <div class="qipan" style="left:190px;top:371px;" onclick="move(6,3)"> <img src="" height="60" width="60" align="center" id="63"/> </div> <div class="qipan" style="left:250px;top:371px;" onclick="move(6,4)"> <img src="img/RZ.png" height="60" width="60" align="center" id="64"/> </div> <div class="qipan" style="left:310px;top:371px;" onclick="move(6,5)"> <img src="" height="60" width="60" align="center" id="65"/> </div> <div class="qipan" style="left:370px;top:371px;" onclick="move(6,6)"> <img src="img/RZ.png" height="60" width="60" align="center" id="66"/> </div> <div class="qipan" style="left:430px;top:371px;" onclick="move(6,7)"> <img src="" height="60" width="60" align="center" id="67"/> </div> <div class="qipan" style="left:490px;top:371px;" onclick="move(6,8)"> <img src="img/RZ.png" height="60" width="60" align="center" id="68"/> </div> <div class="qipan" style="left:10px;top:432px;" onclick="move(7,0)"> <img src="" height="60" width="60" align="center" id="70" /> </div> <div class="qipan" style="left:70px;top:432px;" onclick="move(7,1)"> <img src="img/RP.png" height="60" width="60" align="center" id="71" /> </div> <div class="qipan" style=" left:130px;top:432px;" onclick="move(7,2)"> <img src="" height="60" width="60" align="center" id="72"/> </div> <div class="qipan" style="left:190px;top:432px;" onclick="move(7,3)"> <img src="" height="60" width="60" align="center" id="73"/> </div> <div class="qipan" style="left:250px;top:432px;" onclick="move(7,4)"> <img src="" height="60" width="60" align="center" id="74"/> </div> <div class="qipan" style="left:310px;top:432px;" onclick="move(7,5)"> <img src="" height="60" width="60" align="center" id="75"/> </div> <div class="qipan" style="left:370px;top:432px;" onclick="move(7,6)"> <img src="" height="60" width="60" align="center" id="76"/> </div> <div class="qipan" style="left:430px;top:432px;" onclick="move(7,7)"> <img src="img/RP.png" height="60" width="60" align="center" id="77"/> </div> <div class="qipan" style="left:490px;top:432px;" onclick="move(7,8)"> <img src="" height="60" width="60" align="center" id="78" /> </div> <div class="qipan" style="left:10px;top:493px;" onclick="move(8,0)"> <img src="" height="60" width="60" align="center" id="80"/> </div> <div class="qipan" style="left:70px;top:493px;" onclick="move(8,1)"> <img src="" height="60" width="60" align="center" id="81"/> </div> <div class="qipan" style=" left:130px;top:493px;" onclick="move(8,2)"> <img src="" height="60" width="60" align="center" id="82"/> </div> <div class="qipan" style="left:190px;top:493px;" onclick="move(8,3)"> <img src="" height="60" width="60" align="center" id="83"/> </div> <div class="qipan" style="left:250px;top:493px;" onclick="move(8,4)"> <img src="" height="60" width="60" align="center" id="84"/> </div> <div class="qipan" style="left:310px;top:493px;" onclick="move(8,5)"> <img src="" height="60" width="60" align="center" id="85"/> </div> <div class="qipan" style="left:370px;top:493px;" onclick="move(8,6)"> <img src="" height="60" width="60" align="center" id="86"/> </div> <div class="qipan" style="left:430px;top:493px;" onclick="move(8,7)"> <img src="" height="60" width="60" align="center" id="87"/> </div> <div class="qipan" style="left:490px;top:493px;" onclick="move(8,8)"> <img src="" height="60" width="60" align="center" id="88"/> </div> <div class="qipan" style="left:10px;top:554px;" onclick="move(9,0)"> <img src="img/RC.png" height="60" width="60" align="center" id="90"/> </div> <div class="qipan" style="left:70px;top:554px;" onclick="move(9,1)"> <img src="img/RM.png" height="60" width="60" align="center" id="91"/> </div> <div class="qipan" style=" left:130px;top:554px;" onclick="move(9,2)"> <img src="img/RX.png" height="60" width="60" align="center" id="92"/> </div> <div class="qipan" style="left:190px;top:554px;" onclick="move(9,3)"> <img src="img/RS.png" height="60" width="60" align="center" id="93" /> </div> <div class="qipan" style="left:250px;top:554px;" onclick="move(9,4)"> <img src="img/RJ.png" height="60" width="60" align="center" id="94"/> </div> <div class="qipan" style="left:310px;top:554px;" onclick="move(9,5)"> <img src="img/RS.png" height="60" width="60" align="center" id="95"/> </div> <div class="qipan" style="left:370px;top:554px;" onclick="move(9,6)"> <img src="img/RX.png" height="60" width="60" align="center" id="96"/> </div> <div class="qipan" style="left:430px;top:554px;" onclick="move(9,7)"> <img src="img/RM.png" height="60" width="60" align="center" id="97"/> </div> <div class="qipan" style="left:490px;top:554px;" onclick="move(9,8)"> <img src="img/RC.png" height="60" width="60" align="center" id="98"/> </div> </div> </div> </body> </html>
