象棋对战js代码实现
思路：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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
