拼图游戏_ghcol-CSDN博客

本文链接：https://blog.csdn.net/liudefan/article/details/741766

效果如下： <script> var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling; function toggleHelp() { if (butHelp.value == "Hide Help") { help.style.display = "none"; butHelp.value = "Show Help"; } else { help.style.display = ""; butHelp.value = "Hide Help"; } } //random number between low and hi function r(low,hi) { return Math.floor((hi-low)*Math.random()+low); } //random number between 1 and hi function r1(hi) { return Math.floor((hi-1)*Math.random()+1); } //random number between 0 and hi function r0(hi) { return Math.floor((hi)*Math.random()); } function startGame() { shuffle(); gtime = 0; gmoves = 0; tickTime(); gintervalid = setInterval("tickTime()",1000); } function stopGame() { if (gintervalid==-1) return; clearInterval(gintervalid); fldStatus.innerHTML = ""; gintervalid=-1; } function tickTime() { showStatus(); gtime++; } function checkWin() { var i, j, s; if (gintervalid==-1) return; //game not started! if (!isHole(gsize-1,gsize-1)) return; for (i=0;i "; s += "Your speed is " + Math.round(1000*gmoves/gtime)/1000 + " moves/sec"; s += ""; fldStatus.innerHTML = s; // shuffle(); } function showStatus() { fldStatus.innerHTML = "Time: " + gtime + " secs Moves: " + gmoves } function showTable() { var i, j, s; stopGame(); s = "

"; s = s + " " + (i*gsize+j+1) + ""; } s = s + ""; } s = s + "

"; for (i=0; i

"; s = s + " "; return s; } function getCell(row, col) { return eval("a_" + row + "_" + col); } function setValue(row,col,val) { var v = getCell(row, col); v.innerHTML = val; v.className = "cell"; } function getValue(row,col) { // alert(row + "," + col); var v = getCell(row, col); return v.innerHTML; } function setHole(row,col) { var v = getCell(row, col); v.innerHTML = ""; v.className = "hole"; ghrow = row; ghcol = col; } function getRow(obj) { var a = obj.id.split("_"); return a[1]; } function getCol(obj) { var a = obj.id.split("_"); return a[2]; } function isHole(row, col) { return (row==ghrow && col==ghcol) ? true : false; } function getHoleInRow(row) { var i; return (row==ghrow) ? ghcol : -1; } function getHoleInCol(col) { var i; return (col==ghcol) ? ghrow : -1; } function shiftHoleRow(src,dest,row) { var i; //conversion to integer needed in some cases! src = parseInt(src); dest = parseInt(dest); if (src < dest) { for (i=src;i dest;i--) { setValue(row,i,getValue(row,i-1)); setHole(row,i-1); } } } function shiftHoleCol(src,dest,col) { var i; //conversion to integer needed in some cases! src = parseInt(src); dest = parseInt(dest); if (src < dest) {//alert("src=" + src +" dest=" + dest + " col=" + col); for (i=src;i dest;i--) { setValue(i,col,getValue(i-1,col)); setHole(i-1,col); } } } function move(obj) { var r, c, hr, hc; if (gintervalid==-1 && !gshuffling) { alert('请点击"开始游戏"按钮') return; } r = getRow(obj); c = getCol(obj); if (isHole(r,c)) return; hc = getHoleInRow(r); if (hc != -1) { shiftHoleRow(hc,c,r); gmoves++; checkWin(); return; } hr = getHoleInCol(c); if (hr != -1) { shiftHoleCol(hr,r,c); gmoves++; checkWin(); return; } } function shuffle() { var t,i,j,s,frac; gshuffling = true; frac = 100.0/(gsize*(gsize+10)); s = "% "; for (i=0;i

请选择难度:

把如下代码加入<body>区域中
<style>
.bigcell {
background-color:#aa9966;
border:4px solid #aa9966;
text-align:center;
}
.cell {
width:40px;
height:40px;
font-family:Verdana, Arial;
font-size:10pt;
font-weight:bold;
background-color:#996633;
color:#ffff33;
border-top:2px solid #aa9966;
border-left:2px solid #aa9966;
border-right:2px solid #663300;
border-bottom:2px solid #663300;
text-align:center;
}
.hole {
width:40px;
height:40px;
background-color:#aa9966;
text-align:center;
}
body,h1,h2,h3,.msg,capt1,capt2 {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2 {font-size:16pt; margin:0px; font-weight:bold;}
h3 {font-size:8pt; margin:0px; font-weight:bold;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.capt1 {font-size:10pt; font-weight:bold;}
.capt2 {font-size:9pt; font-weight:bold;}
.capt3 {font-size:14pt; font-weight:bold; color:yellow;}
.capt4 {font-size:10pt; font-weight:bold; color:yellow;}
.but {font-size:9pt; font-weight:bold; height:30px;background-color:#aaaa99;}
</style>
<BODY onLoad="loadBoard(4)">
<script>

var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling;

function toggleHelp()

{

if (butHelp.value == "Hide Help")

{

help.style.display = "none";

butHelp.value = "Show Help";

}

else

{

help.style.display = "";

butHelp.value = "Hide Help";

}

//random number between low and hi

function r(low,hi)

{

return Math.floor((hi-low)*Math.random()+low);

}

//random number between 1 and hi

function r1(hi)

{

return Math.floor((hi-1)*Math.random()+1);

}

//random number between 0 and hi

function r0(hi)

{

return Math.floor((hi)*Math.random());

}

function startGame()

{

shuffle();

gtime = 0;

gmoves = 0;

tickTime();

gintervalid = setInterval("tickTime()",1000);

}

function stopGame()

{

if (gintervalid==-1) return;

clearInterval(gintervalid);

fldStatus.innerHTML = "";

gintervalid=-1;

}

function tickTime()

{

showStatus();

gtime++;

}

function checkWin()

{

var i, j, s;

if (gintervalid==-1) return; //game not started!

if (!isHole(gsize-1,gsize-1)) return;

for (i=0;i<gsize;i++)

for (j=0;j<gsize;j++)

{

if (!(i==gsize-1 && j==gsize-1)) //ignore last block (ideally a hole)

{

if (getValue(i,j)!=(i*gsize+j+1).toString()) return;

}

stopGame();

s = "<table cellpadding=4>";

s += "<tr><td align=center class=capt3>!! CONGRATS !!</td></tr>";

s += "<tr class=capt4><td align=center>You have done it in " + gtime + " secs ";

s += "with " + gmoves + " moves!</td></tr>";

s += "<tr><td align=center class=capt4>Your speed is " + Math.round(1000*gmoves/gtime)/1000 + " moves/sec</td></tr>";

s += "</table>";

fldStatus.innerHTML = s;

//  shuffle();

}

function showStatus()

{

fldStatus.innerHTML = "Time: " + gtime + " secs   Moves: " + gmoves

}

function showTable()

{

var i, j, s;

stopGame();

s = "<table border=3 cellpadding=0 cellspacing=0 bgcolor='#666655'><tr><td class=bigcell>";

s = s + "<table border=0 cellpadding=0 cellspacing=0>";

for (i=0; i<gsize; i++)

{

s = s + "<tr>";

for (j=0; j<gsize; j++)

{

s = s + "<td id=a_" + i + "_" + j + " οnclick='move(this)' class=cell>" + (i*gsize+j+1) + "</td>";

}

s = s + "</tr>";

}

s = s + "</table>";

s = s + "</td></tr></table>";

return s;

}

function getCell(row, col)

{

return eval("a_" + row + "_" + col);

}

function setValue(row,col,val)

{

var v = getCell(row, col);

v.innerHTML = val;

v.className = "cell";

}

function getValue(row,col)

{

//  alert(row + "," + col);

var v = getCell(row, col);

return v.innerHTML;

}

function setHole(row,col)

{

var v = getCell(row, col);

v.innerHTML = "";

v.className = "hole";

ghrow = row;

ghcol = col;

}

function getRow(obj)

{

var a = obj.id.split("_");

return a[1];

}

function getCol(obj)

{

var a = obj.id.split("_");

return a[2];

}

function isHole(row, col)

{

return (row==ghrow && col==ghcol) ? true : false;

}

function getHoleInRow(row)

{

var i;

return (row==ghrow) ? ghcol : -1;

}

function getHoleInCol(col)

{

var i;

return (col==ghcol) ? ghrow : -1;

}

function shiftHoleRow(src,dest,row)

{

var i;

//conversion to integer needed in some cases!

src = parseInt(src);

dest = parseInt(dest);

if (src < dest)

{

for (i=src;i<dest;i++)

{

setValue(row,i,getValue(row,i+1));

setHole(row,i+1);

}

if (dest < src)

{

for (i=src;i>dest;i--)

{

setValue(row,i,getValue(row,i-1));

setHole(row,i-1);

}

function shiftHoleCol(src,dest,col)

{

var i;

//conversion to integer needed in some cases!

src = parseInt(src);

dest = parseInt(dest);

if (src < dest)

{//alert("src=" + src +" dest=" + dest + " col=" + col);

for (i=src;i<dest;i++)

{//alert(parseInt(i)+1);

setValue(i,col,getValue(i+1,col));

setHole(i+1,col);

}

if (dest < src)

{

for (i=src;i>dest;i--)

{

setValue(i,col,getValue(i-1,col));

setHole(i-1,col);

}

function move(obj)

{

var r, c, hr, hc;

if (gintervalid==-1 && !gshuffling)

{

alert('请点击"开始游戏"按钮')

return;

}

r = getRow(obj);

c = getCol(obj);

if (isHole(r,c)) return;

hc = getHoleInRow(r);

if (hc != -1)

{

shiftHoleRow(hc,c,r);

gmoves++;

checkWin();

return;

}

hr = getHoleInCol(c);

if (hr != -1)

{

shiftHoleCol(hr,r,c);

gmoves++;

checkWin();

return;

}

function shuffle()

{

var t,i,j,s,frac;

gshuffling =  true;

frac = 100.0/(gsize*(gsize+10));

s = "% ";

for (i=0;i<gsize;i++)

{

s += "|";

for (j=0;j<gsize+10;j++)

{

window.status = "Loading " + Math.round((i*(gsize+10) + j)*frac) + s

if (j%2==0)

{

t = r0(gsize);

while (t == ghrow) t = r0(gsize); //skip holes

getCell(t,ghcol).click();

}

else

{

t = r0(gsize);

while (t == ghcol) t = r0(gsize); //skip holes

getCell(ghrow,t).click();

}

window.status = "";

gshuffling = false;

}

function loadBoard(size)

{

gsize = size;

board.innerHTML = showTable(gsize);

setHole(gsize-1,gsize-1);

//shuffle();

}

</script>
<div id=test></div>
<table cellpadding=4>
<tr><td align=center>
<b>请选择难度: </B>
<select id=level οnchange="loadBoard(parseInt(level.value))">
<option value='3'>3</option>
<option value='4' selected>4</option>
<script>

for (var i=5;i<=10;i++)

{

document.write("<option value='" + i + "'>" + i + "</option>");

}

</script>
</select>
</td></tr>
<tr><td align=center>
<input type=button class=but value="开始游戏" οnclick="startGame();">
<tr><td align=center id=fldStatus class=capt2>
</td></tr>
</table>
<div id=board></div>