Share a code that uses js to implement the diamond chess web game-JS Tutorial-php.cn

Share a code that uses js to implement the diamond chess web game

PHPz

Release： 2023-02-09 17:10:48

forward

1282 people have browsed it

This article brings you relevant knowledge about JavaScript. It mainly shares with you a js Diamond Chess web game code. For those who are interested, let’s take a look~

Share a code that uses js to implement the diamond chess web game

js Diamond Chess web game code

A small web game based on JavaScript and CSS, Diamond Chess, the specific gameplay is not clear yet, you are online SouSou gameplay should be more interesting, there are 32 chess pieces in total.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>钻石棋游戏</title> 
<style> 
body{text-align:center; font-size:12px;} 
td{font-size:12px;text-align:center} table 
.qz{ border:1px solid #ccc; padding:0px; margin:0px;} 
.ayc{ background:#fff; background-image:none} 
table td{width:60px; height:60px;} 
table td input,.axs{ 
height:60px; width:60px; border:0px; 
background:url(/upload/2010-3/20100303233932866.gif) no-repeat center center; 
color:#ccc; font-size:12px} #zhuangtai{ font-size:16px;} 
.axz{height:60px; width:60px; border:0px; 
background:url(/upload/2010-3/20100303233933912.gif) no-repeat center center; } 
.zhuangt{ height:30px; line-height:30px; font-size:12px;} 
.zhuangt span{ color:red; font-weight:bold;} 
</style> 
</head> <body> <h1 style="text-align:center;">独立钻石棋</h1> 
<p> <div class="zhuangt"> 剩余<span id=&#39;zhuangtai&#39;>32</span> 个棋子、共走<span id=&#39;bushu&#39;>0</span>步 </div> 
<script type="text/javascript"> 
var x,y,x1,y1,a1,a2,an=0,qzs=0,str="",bs=0;
 var xy =new Array() ; 
 xy[0]=new Array();
  xy[1]=new Array(); 
 xy[2]=new Array(); 
 xy[3]=new Array(); 
 xy[4]=new Array(); 
 xy[5]=new Array(); xy[6]=new Array(); 
 function xz(x,y) { var a1=document.getElementById("n"+x+y); 
 //alert(x+"-"+y+"-"+x1+"-"+y1+"-"+xy[x,y]); 
 if(an==0 && xy[x][y]==1){ a1.className="axz"; 
 a2=a1; an=1; x1=x; y1=y; } else if(an==1) { 
 if(ks2(x,y,x1,y1)==1){ xy[x1][y1]=0; a1.className="axs"; 
 xy[x][y]=1; a2.className="ayc"; 
 qzs=qzs-1; 
 bs=bs+1; 
 document.getElementById("zhuangtai").innerHTML=qzs; 
 document.getElementById("bushu").innerHTML=bs; 
 }else { a2.className="axs"; } an=0; } } 
 //检测棋子 function ks(x,y) {
  if(x<=1 && y<=1 || x<=1 && y>=5 || x>=5 && y<=1 || x>=5 && y>=5 || x==3 && y==3){ xs=0; 
  } else { xs=1; } 
  return xs; 
  } 
  function ks2(x,y,x1,y1) 
  { xs=0; if(x==x1 && (y-2==y1 || y+2==y1) && xy[x][y]==0) 
  { if(y-2==y1 && xy[x][y-1]==1){ xs=1; yincang(x,y-1); }
  else if(y+2==y1 && xy[x][y+1]==1)
  { xs=1; yincang(x,y+1); } }else if(y==y1 && (x-2==x1 || x+2==x1) && xy[x][y]==0) 
  { if(x-2==x1 && xy[x-1][y]==1){ xs=1; yincang(x-1,y); }
  else if(x+2==x1 && xy[x+1][y]==1){ xs=1; yincang(x+1,y); } } return xs; } 
  function yincang(x,y) 
  { xy[x][y]=0; document.getElementById("n"+x+y).className="ayc"; } 
  function zb(x,y) { for (x=0;x<=6;x++) { for (y=0;y<=6;y++) { if(ks(x,y)==1) 
  { document.getElementById("n"+x+y).className="ayc"; } } } document.getElementById("n25").className="axs"; } 
  document.write("<table>"); for (x=0;x<=6;x++) { document.write("<tr>"); 
  for (y=0;y<=6;y++) { if(ks(x,y)==1 || (x==3 && y==3)){ xy[x][y]=1; 
  //str=str+","+x+","+y+"-"+xy[x][y]+"<br>"; 
  //alert(x+"-"+y+"-"+x1+"-"+y1+"+xy[x][y]+"); document.write("<td class=&#39;qz&#39;>
  <input id=&#39;n"+x+y+"&#39; type=&#39;button&#39; value=&#39;&#39; onclick=&#39;xz("+x+","+y+")&#39;/></td>"); } else{ document.write("<td>
  </td>"); } } document.write("</tr>"); } document.write("</table>"); 
  document.getElementById("n33").className="ayc"; qzs=32; xy[3][3]=0; 
  //document.write(str); 
  </script> 
  </body> 
  </html>

Copy after login

Recommended learning: "JavaScript Video Tutorial"