使用Javascript实现幻灯片拼图
使用Javascript实现幻灯片拼图
提问于 2018-09-22 18:21:14
首先，感谢你阅读这个问题。使用这段javascript代码，我正在尝试实现一个4x4幻灯片编号拼图，完成后看起来就像这样。：
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15空白
每个数字都由.gif数字文件表示，这些文件位于与此HTML文件相同的文件夹中。当用户点击拼图下方的“开始”按钮时，它通过重复交换随机选择的两个棋子来洗牌。(随机播放功能)
当用户单击与空白部分相邻的部分时，它会交换这两个部分。(movePiece函数)
但问题是，当我单击START按钮和与空白部分相邻的部分时，没有任何反应。即使除了这段代码的逻辑和算法与我的讲师给出的答案没有什么不同，我也找不到是哪里导致了这个问题。
有人能帮我找出这段代码的错误所在吗？
任何建议都将不胜感激。
<html>
<head>
<title>15 Puzzle Game</title>
<meta name="generator" content="Microsoft FrontPage 4.0" charset="UTF-8">
<script language="JavaScript">
var completed=true;
function tokenize(sep,str){
tokens = new Array();
i=0;
while(1)
{
idx=str.indexOf(sep);
if(idx == -1)
{
if(str.length>0)
{
tokens[i]=str;
}
break;
}
tokens[i++]=str.substring(0,idx);
str=str.substr(idx+1);
}
return tokens;
}
function getX(idx)
{
var rest=idx-Math.floor(idx/4)*4;
return (rest==0)?4:rest;
}
function getY(idx)
{
return Math.floor((idx-1)/4)+1;
}
function getIndex(x,y)
{
return x+(y-1)*4;
}
function newDirection(pos)
{
var dir;
if ((pos==2)||(pos==3)) dir=(Math.floor(Math.random()+0.5)==0)?-1:1;
else dir=(pos==1)?1:-1;
return (pos+dir);
}
function newIndex(idx)
{
var x,y;
x=getX(idx);
y=getY(idx);
if (Math.floor(Math.random()+0.5)==0) x=newDirection(x);
else y=newDirection(y);
return getIndex(x,y);
}
function isComplete()
{
if(completed) return 0;
for(var i = 1; i <= document.images.length; i++){
if(document.images[i-1].src != i+".gif") return 0;
}
return 1;
}
function getNum(idx){
var index = idx - 1;
var token[] = tokenize("/",document.images[index].src);
var numOfTokens = tokenize("/",document.images[index].src).length;
var num = tokenize(".", token[numOfTokens-1])[0];
return Number(num);
}
function shuffle()
{
var puzzles=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
iter=Math.floor(Math.random()*200+0.5)+100;
for (i=0;i<iter;i++)
{
var ranNum = Math.floor(Math.random()*16)+1;
var newNum = newIndex(ranNum);
var temp = puzzles[ranNum-1];
puzzles[ranNum-1] = puzzles[newNum-1];
puzzles[newNum-1] = temp;
}
}
for(i=1;i<document.images.length+1;i++){
document.images[i-1].src = ""+puzzles[i-1]+".gif";
}
completed = false;
}
function movePiece(idx)
{
x = getX(idx);
y = getY(idx);
var flag = 0;
var tempIdx;
for(i=-1; i<=1 ; i=i+2){
if ((x==2)||(x==3)) dir=i;
else dir=(x==1)?1:-1;
var tmpx= (x+dir);
tempIdx = getIndex(tmpx,y);
if(getNum(tempIdx) == 16){ flag = 1; midx=tempIdx; }
}
for(i=-1; i<=1 ; i=i+2){
if ((y==2)||(y==3)) dir=i;
else dir=(y==1)?1:-1;
var tmpy= (y+dir);
tempIdx = getIndex(x,y);
if(getNum(tempIdx) == 16){ flag = 1; midx=tempIdx; }
}
if (flag == 1){
document.images[midx-1].src = document.images[idx-1].src;
document.images[idx-1].src = "16.gif";
}
if(isComplete()) alert('Congratulation!');
completed = true;
}
</script>
</head>
<body bgcolor="silver" text="black" link="#0000EE" vlink="#551A8B" alink="red">
<h2 align="center">
15 Puzzle</h2>
<div align="center">
<table border>
<tr>
<td width="50%" align="center">
<script language="JavaScript">
with(window.document)
{
open();
writeln('<table border=1 cellpadding=0 cellspacing=1>');
for(var i=1;i<17;i++)
{
if(i==1 || i==5 || i==9 || i==13 )
{
writeln('<tr>');
}
writeln(' <td width=49 height=49>');
writeln(' <a href=JavaScript:movePiece('+i+');>');
writeln(' <img src=',i,'.gif border=0 width=49 height=49 name=i',i,'></a>');
writeln(' </td>');
if(i==4 || i==8 || i==12 || i==16 )
{
writeln('</tr>');
}
}
writeln('</table>');
close();
}
</script>
</td>
</tr>
</table>
</div>
<p align="center">
<br>
</p>
<form method="get">
<p align="center">
<input type="button" value="START" onClick="shuffle()"></p>
</form>
</body>
</html>
javascript这是可用的代码
<html>
<head>
<title>15 Puzzle Game</title>
<meta charset="UTF-8">
<script language="JavaScript">
var completed=true;
function tokenize(sep,str)
{
tokens = new Array();
i=0;
while(1)
{
idx=str.indexOf(sep);
if(idx == -1)
{
if(str.length>0)
{
tokens[i]=str;
}
break;
}
tokens[i++]=str.substring(0,idx);
str=str.substr(idx+1);
}
return tokens;
}
function getX(idx)
{
var rest=idx-Math.floor(idx/4)*4;
return (rest==0)?4:rest;
}
function getY(idx)
{
return Math.floor((idx-1)/4)+1;
}
function getIndex(x,y)
{
return x+(y-1)*4;
}
function newDirection(pos)
{
var dir;
if ((pos==2)||(pos==3)) dir=(Math.floor(Math.random()+0.5)==0)?-1:1;
else dir=(pos==1)?1:-1;
return (pos+dir);
}
function newIndex(idx)
{
var x,y;
x=getX(idx);
y=getY(idx);
if (Math.floor(Math.random()+0.5)==0) x=newDirection(x);
else y=newDirection(y);
return getIndex(x,y);
}
function isComplete() {
if(completed)
return false;
var prev = getPiece(1);
for(var i = 2; i < 17; i++) {
var current = getPiece(i);
if(current != prev+1)
return false;
prev = current;
}
return true;
}
function shuffle()
{
var puzzles=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
iter=Math.floor(Math.random()*200+0.5)+100;
var blank = 15;
for (i=0; i<iter; i++)
{
var move = newIndex(blank+1)-1;
var t = puzzles[blank];
puzzles[blank] = puzzles[move];
puzzles[move] = t;
blank = move;
}
for(i = 0; i < 16; i++)
document.images[i].src = ""+puzzles[i]+".gif";
completed = false;
}
function movePiece(idx)
{
var current = getPiece(idx);
if(current == 16)
return;
var x = getX(idx);
var y = getY(idx);
var flag=false, midx=idx;
var dx = [0, 0, -1, 1], dy = [-1, 1, 0, 0];
for(var i = 0; i < 4; i++) {
if(1 <= x+dx[i] && x+dx[i] <= 4 && 1 <= y+dy[i] && y+dy[i] <= 4) {
if(getPiece(getIndex(x+dx[i], y+dy[i])) == 16) {
flag = true;
midx = getIndex(x+dx[i], y+dy[i]);
break;
}
}
}
if(flag) {
var t = document.images[idx-1].src;
document.images[idx-1].src = document.images[midx-1].src;
document.images[midx-1].src = t;
}
if(isComplete()) {
alert("Congratulation!");
completed = true;
}
}
function getPiece(idx) {
idx--;
var len = tokenize("/", document.images[idx].src).length;
return Number(tokenize(".", tokenize("/", document.images[idx].src)[len-1])[0]);
}
</script>
</head>
<body bgcolor="silver" text="black" link="#0000EE" vlink="#551A8B" alink="red">
<h2 align="center">
15 Puzzle</h2>
<div align="center">
<table border>
<tr>
<td width="50%" align="center">
<script language="JavaScript">
with(window.document)
{
open();
writeln('<table border=1 cellpadding=0 cellspacing=1>');
for(var i=1;i<17;i++)
{
if(i==1 || i==5 || i==9 || i==13 )
{
writeln('<tr>');
}
writeln(' <td width=49 height=49>');
writeln(' <a href=JavaScript:movePiece('+i+');>');
writeln(' <img src=',i,'.gif border=0 width=49 height=49 name=i',i,'></a>');
writeln(' </td>');
if(i==4 || i==8 || i==12 || i==16 )
{
writeln('</tr>');
}
}
writeln('</table>');
close();
}
</script>
</td>
</tr>
</table>
</div>
<p align="center">
<br>
</p>
<form method="get">
<p align="center">
<input type="button" value="START" onClick="shuffle()"></p>
</form>
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-09-23 01:34:49
您提供的代码不是很好读，所以我在React中创建了我自己的版本。我希望它能帮助你把事情弄清楚，或者至少能激励你学习React。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52455714
复制相关文章
相似问题