三国华容道网页版来了

hzhfxian

已于 2024-03-20 10:53:09 修改

阅读量2.7k

点赞数 3

文章标签：小游戏 Javascript

于 2021-12-26 15:23:11 首次发布

本文链接：https://blog.csdn.net/hzhfxian/article/details/122155778

版权

<html>
<title>三国华容道</title>
<script type="text/javascript">
//0代表空格，1代表4个卒，2黄忠3马超4张飞5赵云，6代表关羽，7代表曹操
//move为单击相关的移动，移动1时有两个选择时，再单击空格，
//2－5上下同时有空偏向单击方向 6左右同时有空偏向单击方向
var h=[[2,7,7,3],
       [2,7,7,3],
       [4,6,6,5],
       [4,1,1,5],
       [1,0,0,1]];
//有两个0与1相邻移动其一
var r1=-1
var c1=-1
function show_coords(event)
{
  i=parseInt((event.clientY-64)/95)
  j=parseInt((event.clientX-65)/95)
  if(j<0||j>3||i<0||i>4) return;
  move(h[i][j],i,j);
}
function move(n,i,j)
{ 
  if(n==0){move0(i,j);return;}
  r1=-1;c1=-1;
  if(n==1){move1(i,j);return;}
  if(n>=2&&n<=5){move25(n,i,j);return;}
  if(n==6){move6(i,j);return;}
  if(n==7){move7(i,j);return;}
}
function move7(i,j)
{//确认左上坐标，分情况0在上下左右移动
   i=-1;n=7; 
   for(i1=0;i==-1&&i1<5;i1++)
     for(j1=0;i==-1&&j1<4;j1++)
     {if(h[i1][j1]==n){i=i1;j=j1;}}
   //上有两个0左右相连
     if(i-1>=0&&h[i-1][j]==0&&h[i-1][j+1]==0)
     {h[i-1][j]=n;h[i-1][j+1]=n;h[i+1][j]=0;h[i+1][j+1]=0;}
   //下有两个0左右相连
     if(i+2<5&&h[i+2][j]==0&&h[i+2][j+1]==0)
     {h[i+2][j]=n;h[i+2][j+1]=n;h[i][j]=0;h[i][j+1]=0;}
   //左有两个0上下相连
     if(j-1>=0&&h[i][j-1]==0&h[i+1][j-1]==0)
     {h[i][j-1]=n;h[i+1][j-1]=n;h[i][j+1]=0;h[i+1][j+1]=0;}  
   //右有两个0上下相连
     if(j+2<4&&h[i][j+2]==0&h[i+1][j+2]==0)
     {h[i][j+2]=n;h[i+1][j+2]=n;h[i][j]=0;h[i+1][j]=0;}
     init(); 
}
function move6(i,j)
{//确认左上坐标，分情况0在上下左右移动
   i=-1;n=6; j0=j;
   for(i1=0;i==-1&&i1<5;i1++)
     for(j1=0;i==-1&&j1<4;j1++)
     {if(h[i1][j1]==n){i=i1;j=j1;}}
  //左有一个0
  if(j-1>=0&&h[i][j-1]==0&&j==j0)
  {h[i][j-1]=n;h[i][j+1]=0;}
  //右有一个0
  if(j+2<4&&h[i][j+2]==0&&j<j0)
  {h[i][j+2]=n;h[i][j]=0;}
  //上有两个0左右相连
  if(i-1>=0&&h[i-1][j]==0&&h[i-1][j+1]==0)
  {h[i-1][j]=n;h[i-1][j+1]=n;h[i][j]=0;h[i][j+1]=0;}
  //下有两个0左右相连
  if(i+1<5&&h[i+1][j]==0&&h[i+1][j+1]==0)
  {h[i+1][j]=n;h[i+1][j+1]=n;h[i][j]=0;h[i][j+1]=0;}
  init(); 
}
function move25(n,i,j)
{//确认左上坐标，分情况0在上下左右移动
   i0=i;i=-1; 
   for(i1=0;i==-1&&i1<5;i1++)
     for(j1=0;i==-1&&j1<4;j1++)
     {if(h[i1][j1]==n){i=i1;j=j1;}}
   //上有一个0
   if(i-1>=0&&h[i-1][j]==0&&i==i0)
   { h[i-1][j]=n;h[i+1][j]=0; }
   //下有一个0
   if(i+2<5&&h[i+2][j]==0&&i<i0)
   { h[i+2][j]=n;h[i][j]=0; }
   //左有两个0上下相连
   if(j-1>=0&&h[i][j-1]==0&h[i+1][j-1]==0)
   {
     h[i][j-1]=n
     h[i+1][j-1]=n
     h[i][j]=0
     h[i+1][j]=0
   }  
   //右有两个0上下相连
    if(j+1<4&&h[i][j+1]==0&h[i+1][j+1]==0)
   {
     h[i][j+1]=n
     h[i+1][j+1]=n
     h[i][j]=0
     h[i+1][j]=0
   }  
   init();
}
function move1(i,j)
{//4个方向上行列偏移量 上、下、左、右 
  di4=[[-1,0],[1,0], [0,-1],[0,1]]
  count0=0;
  for (x=0;x<4;x++)
    {
       i1=i+di4[x][0];
       j1=j+di4[x][1];
       if(i1>=0&&i1<5&&j1>=0&&j1<4&&h[i1][j1]==0)
          {i0=i1;j0=j1;count0=count0+1;}
    }
  //1上下左右有一个0就可以
  if(count0==1){h[i][j]=0;h[i0][j0]=1;init();}
  else {r1=i;c1=j;} 
  //2个0时置标记，鼠标二次选0位置移动
}
function move0(i,j)
{//有两个0与1相邻移动其一
  if(r1>=0&&c1>=0)
    {
      h[r1][c1]=0;
      h[i][j]=1;
      r1=-1;c1=-1
      init()
     } 
}
function init()
{//显示背景
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  imgb = document.createElement("img")
  imgb.src="b.png"
  ctx.drawImage(imgb,0,0);
  init1()
}
function init1()
{//显示成员time为相应成员显示次数，占两个以上格的显示1次
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  imgb = document.createElement("img")
  time=[2,4,1,1,1,1,1,1]
  for(i=0;i<5;i++)
     for(j=0;j<4;j++)
     {
       n=h[i][j]
       if(time[n]>0)
       {
         time[n]=time[n]-1
         imgb.src=n+".png"
         ctx.drawImage(imgb,63+97*j,64+97*i);
        }
     }
}

function begin()
{
 init()
}
function begin1()
{
     h=[[2,7,7,3],
       [2,7,7,3],
       [1,6,6,1],
       [4,1,1,5],
       [4,0,0,5]];
 init()
}
function begin2()
{
    h=[[0,7,7,0],
       [2,7,7,3],
       [2,4,5,3],
       [1,4,5,1],
       [6,6,1,1]];
 init()
}
function begin3()
{
    h=[[2,7,7,3],
       [2,7,7,3],
       [1,1,1,1],
       [4,6,6,5],
       [4,0,0,5]];
 init()
}
function begin4()
{
    h=[[1,7,7,1],
       [2,7,7,3],
       [2,6,6,3],
       [4,1,1,5],
       [4,0,0,5]];
 init()
}
</script>
<body>
 <canvas id="canvas" width="500" height="600" onmousedown="show_coords(event)" style="border:1px solid #d3d3d3;">抱歉，您的浏览器不支持canvas元素</canvas>
 <p><input type="button" value="横刀立马" onClick="begin()">
    <input type="button" value="指挥若定" onClick="begin1()"> 
    <input type="button" value="将拥曹营" onClick="begin2()"> 
    <input type="button" value="齐头并进" onClick="begin3()"> 
    <input type="button" value="兵分三路" onClick="begin4()"> 
</body>
</html>