search

Home >Web Front-end >JS Tutorial >Share a code that uses js to implement the diamond chess web game

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

PHPz
PHPzforward
2016-05-16 18:33:211275browse

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>

Recommended learning: "JavaScript Video Tutorial"

Statement：
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete
Previous article：Laoyu briefly talks about javascript object-oriented programming_js object-orientedNext article：Laoyu briefly talks about javascript object-oriented programming_js object-oriented

Related articles

See more