<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>
