象棋对战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;//终点被点击图片的idvar 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>

象棋对战js代码实现相关推荐

  1. 用html和js编写人机象棋对战

    内容: 成员: 学号:2015035107221 姓名:刘泽宇 成员: 学号:2015035107212 姓名:周建伟 结对编程项目作业名称:用html和js编写人机象棋对战 选择该结对编程项目原因: ...

  2. 网页简体转繁体的JS代码

    网页简体转繁体的JS代码    两者之间的位置一定不能搞错 <body> <a href="#" id="StranLink">繁体版& ...

  3. 超nb的网页标签弹窗js代码！

    首先说一下业务需求: 需要在当前各主流浏览器上从tab标签形式弹出一个页面,尽量不要以单独窗口弹出. 下面是网上搜集并修改.验证后的js代码,以备以后参阅. function getUnionCook ...

  4. 一行js代码识别Selenium+Webdriver及其应对方案

    有不少朋友在开发爬虫的过程中喜欢使用Selenium + Chromedriver,以为这样就能做到不被网站的反爬虫机制发现. 先不说淘宝这种基于用户行为的反爬虫策略,仅仅是一个普通的小网站,使用一行 ...

  5. 判断是否移动端设备的JS代码，超短，百度都用它

    为什么80%的码农都做不了架构师?>>>    大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码 ...

  6. 爬虫之selenium控制浏览器执行js代码

    爬虫之selenium控制浏览器执行js代码 selenium可以让浏览器执行我们规定的js代码,运行下列代码查看运行效果 import time from selenium import webdr ...

  7. 浮层java_通过遮罩层实现浮层DIV登录的js代码

    摘要:这篇JavaScript栏目下的"通过遮罩层实现浮层DIV登录的js代码",介绍的技术点是"浮层DIV.JS代码.div.遮罩层.登录.代码",希望对大家 ...

  8. 用鼠标拖动图片的JS代码

    代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...

  9. html实体编码遇上js代码

    单双引号 在js代码中 在js中单.双引号引起来的是字符串,如果我们要在字符串中使用单.双引号,需要反斜杠进行转义 let str='user\'s name'; // or let str=&quo ...

最新文章

  1. 大数据教程（13.6）sqoop使用教程
  2. AGC 022 B - GCD Sequence
  3. php获取数组中的全部可以吗,php获取数组中所有值的方法
  4. windows安装zabbix客户端
  5. MySQL索引类型详解，让MySQL高效运行起来
  6. 项目经理的第二手准备-坚强的挺着（4）
  7. Webservice更新时出错。下载”。。。”时出错。请求失败，错误信息为:
  8. 一文教你如何摆脱应用商店下载微软应用
  9. 桌面云之深信服VMP平台搭建
  10. Paraview源码解析2：vtkArrowGlyphFilter类
  11. linux系统 安装主板驱动,I810 Graphics LINUX Driver的安装
  12. 仿微信在线聊天源码 DuckChat聊天系统PHP采用 PHP 编写的聊天软件，简直就是一个完整的迷你版微信
  13. comsol服务器的性能如何,COMSOL Server
  14. 深度思考比勤奋更重要
  15. SEO的道与术，因果关系的选择
  16. [TOG2020](综述)3D Morphable Face Models—Past, Present, and Future
  17. SpringTask的入门使用
  18. Xmind 无法保存文件
  19. ubuntu 安装Apache2
  20. c++ybt 1702：异或运算

热门文章

  1. 设计师：裸眼 3D 效果，你们客户端实现很难吗？
  2. 大一c语言论文700字,我的拿手好戏小学作文700字优质作文5篇
  3. 智解京东618——购物狂欢背后的安全暗战
  4. 微信电脑版如何修改聊天记录等文件存放位置 电脑版微信在哪里修改存储地址
  5. 区块链到底能干什么？
  6. socket.io前后端实践及转发、多服务问题
  7. font-face 自定义字体
  8. 【手绘漫画】图解LeetCode之旋转链表（LeetCode 61题）
  9. 我的读书笔记 -《人性的弱点》
  10. 我和Double Lift的故事（五）——升华篇​