Question

我的代码存在一个关于一款名为15益智游戏的游戏的问题。

我试图找到一种方法将图像调用到一个对图像进行随机播放的功能，但是一旦我点击按钮随机播放，图像就会因为不明原因而消失！

在我点击按钮之前：

Before I click the button

点击按钮后：

After I click the button

＆＃13;

var piece, x, y;

function ReorderPuzzle() {
  piece=new Array();

  piece[piece.length]=new Array("pic/number1.jpg","pic/number2.jpg","pic/number3.jpg","pic/number4.jpg");
  piece[piece.length]=new Array("pic/number5.jpg","pic/number6.jpg","pic/number7.jpg","pic/number8.jpg");
  piece[piece.length]=new Array("pic/number9.jpg","pic/number10.jpg","pic/number11.jpg","pic/number12.jpg");
  piece[piece.length]=new Array("pic/number13.jpg","pic/number14.jpg","pic/number15.jpg","pic/blank.jpg");
  swap();
}

function check(imgnum) {
  x=parseInt(imgnum.substring(4,5));				// Retrieves the x co-ordinate of the image from it's ID.
  y=parseInt(imgnum.substring(3,4));				// Retrieves the y co-ordinate of the image from it's ID.
// alert(y+':'+x);  // for testing purposes
  var ylow=(y-1<0)?0:y-1;							// This makes sure that the lower bound of y does not drop below 0.
  var yhigh=(y+1>3)?0:y+1;							// This makes sure that the upper bound of y does not drop go above 3.
  var xlow=(x-1<0)?0:x-1;							// This makes sure that the lower bound of x does not drop below 0.
  var xhigh=(x+1>3)?0:x+1;							// This makes sure that the upper bound of x does not drop go above 3.

  if(document.getElementById(imgnum).src!="pic/blank.jpg") {

    if(piece[ylow][x]=="pic/blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="pic/blank.jpg";}		// Checks above y for a blank image and if it finds one a swap is made.
    else if(piece[yhigh][x]=="pic/blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="pic/blank.jpg";}	// Checks below y for a blank image and if it finds one a swap is made.
    else if(piece[y][xlow]=="pic/blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="pic/blank.jpg";}	// Checks above x for a blank image and if it finds one a swap is made.
    else if(piece[y][xhigh]=="pic/blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="pic/blank.jpg";}	// Checks below x for a blank image and if it finds one a swap is made.
    else{alert("Invalid move!!!");}					// If there is no blank image around the clicked image then the user is notified.
  } else{alert("Invalid move!!!");}					// If the user clicks on the blank image then they are notified.
  swap();
}

function swap() {
  for(var m=0;m<4;m++) {
    for(var n=0;n<4;n++) {
      document.getElementById("pic"+m+n).src=piece[m][n];		// swaps all the image sources for the ones in the array.
      document.getElementById("pic"+m+n).alt=piece[m][n];
    }
  }
}

function randOrd() { return (Math.round(Math.random())-0.5); }

function RandomizePuzzle() {
  var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
  RndArr.sort(randOrd);
  RndArr.sort(randOrd);  // do it again just for kicks if desired
// alert(RndArr.join(' '));	// for testing purposes
  var i = 0;
  for(var m=0;m<4;m++) {
    for(var n=0;n<4;n++) {
	  var pix = 'pic'+RndArr[i];  // alert(pix);
	  	  if (pix == 'pic33') { piece[m][n] = 'pic/blank.jpg'; }
	                     else { piece[m][n] =pix+ '.jpg'; }
      document.getElementById(pix).src=piece[m][n];
      document.getElementById(pix).alt=piece[m][n];
      i++;
    }
  }
  swap();
}

＆＃13;

<html>


	<head>
		
	
		<title>Javascript Puzzle</title>
<script src="puzzle.js" type="text/javascript"></script>



</head>

<body onload="ReorderPuzzle()">
<div id="game">
  <img src="pic/number1.jpg" id="pic00" onclick="check(this.id);" alt="pic00" />
  <img src="pic/number2.jpg" id="pic01" onclick="check(this.id);" alt="pic01" />
  <img src="pic/number3.jpg" id="pic02" onclick="check(this.id);" alt="pic02" />
  <img src="pic/number4.jpg" id="pic03" onclick="check(this.id);" alt="pic03" /><br />
  <img src="pic/number5.jpg" id="pic10" onclick="check(this.id);" alt="pic04" />
  <img src="pic/number6.jpg" id="pic11" onclick="check(this.id);" alt="pic05" />
  <img src="pic/number7.jpg" id="pic12" onclick="check(this.id);" alt="pic06" />
  <img src="pic/number8.jpg" id="pic13" onclick="check(this.id);" alt="pic07" /><br />
  <img src="pic/number9.jpg" id="pic20" onclick="check(this.id);" alt="pic08" />
  <img src="pic/number10.jpg" id="pic21" onclick="check(this.id);" alt="pic09" />
  <img src="pic/number11.jpg" id="pic22" onclick="check(this.id);" alt="pic10" />
  <img src="pic/number12.jpg" id="pic23" onclick="check(this.id);" alt="pic11" /><br />
  <img src="pic/number13.jpg" id="pic30" onclick="check(this.id);" alt="pic12" />
  <img src="pic/number14.jpg" id="pic31" onclick="check(this.id);" alt="pic13" />
  <img src="pic/number15.jpg" id="pic32" onclick="check(this.id);" alt="pic14" />
  <img src="pic/blank.jpg" id="pic33" onclick="check(this.id);" alt="pic15" />
</div>
<button onclick="RandomizePuzzle()">Shuffle</button>
<button onclick="ReorderPuzzle()">Reorder</button>
</body>

</html>

＆＃13;

我的JavaScript代码问题

0 个答案: