我正在为我的主要元素制作一组小游戏，对于这个小游戏，我一直在遵循我之前构建的之前小游戏的相同方法。
在我之前的迷你游戏中，我只有一个 PuzzleContainer，但在我制作的这个迷你游戏中，现在有四个。自从我又添加了三个 PuzzleContainer 以来，代码似乎无法正常工作。我在我的scipting中做错了什么吗？谁能告诉我哪里出错了？
这是我目前正在开发的迷你游戏的代码。
$(document).ready(function() {
//speech
var progress = 0;
var txt;
$('#complete, #speech').hide();
function eventHandler() {
switch (progress) {
case 0:
txt = "Complete";
break;
case 1:
txt = "Move on to the next minigame";
$('#speech').click(function(){
window.location.href="minigame8.html";
});
break;
}
progress++;
$('#speech').html(txt);
}
$('#speech').click(eventHandler);
// Sortable //
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').sortable({
update: function() {
var userPieces = '';
$('#puzzleContainer1 li', '#puzzleContainer2 li', '#puzzleContainer3 li', '#puzzleContainer4 li').each(function() {
userPieces += $(this).attr('data');
})
checkResult(userPieces);
}
});
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').disableSelection();
//shows the "Enterpassword once pieces are all correctly aligned
function checkResult(userPieces) {
if (userPieces == '1234' && '12345' && '123456') {
$("#complete").show(0,function() {
eventHandler()
$('#speech').show();
});
}
}
});#puzzleContainer1 {
position: absolute;
z-index: 5;
top: 10px;
left: 130px;
list-style-type: none;
}
#puzzleContainer2 {
position: absolute;
z-index: 5;
top: 75px;
left: 130px;
list-style-type: none;
}
#puzzleContainer3 {
position: absolute;
z-index: 5;
top: 140px;
left: 130px;
list-style-type: none;
}
#puzzleContainer4 {
position: absolute;
z-index: 5;
top: 205px;
left: 130px;
list-style-type: none;
}
ul, menu, dir {
display: block;
}
.piece{
z-index: 5;
float: left;
margin: 0 10px 0 0;
padding: 0;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
#complete {
position: absolute;
width: 105px;
height: 25px;
top: 240px;
left: 289px;
background-color: black;
color: white;
font-size: 20px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index:5;
}
#speech {
position: absolute;
width: 655px;
height: 100px;
top: 330px;
left: 15px;
background-color: black;
color: white;
font-size: 25px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index: 99;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
//javascript goes here
</script>
</head>
<body>
<div id="stage">
<ul id="puzzleContainer1" class="ui-sortable">
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer1/L.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer1/redF.png">1</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer1/A.png">2</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer1/E.png">5</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer1/B.png">3</li>
</ul>
<ul id="puzzleContainer2" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer2/S.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer2/U.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer2/T.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer2/redR.png">1</li>
</ul>
<ul id="puzzleContainer3" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer3/A.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer3/N.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer3/B.png">4</li>
<li class="piece" data="6"><img src="images/puzzle6/puzzleContainer3/E.png">6</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer3/redE.png">1</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer3/L.png">5</li>
</ul>
<ul id="puzzleContainer4" class="ui-sortable">
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer4/redE.png">1</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer4/O.png">4</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer4/H.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer4/C.png">2</li>
</ul>
<input id="password" type="text" style="display: block;">
<button id="submit" style="display: block;">Enter Password</button>
<div id="complete">ACCEPTED</div>
<div id="speech"></div>
</div>
</body>
</html>最佳答案
我认为您的选择器有问题。尝试像这样选择拼图容器:
$('#puzzleContainer1, #puzzleContainer2, #puzzleContainer3, #puzzleContainer4')
关于javascript - 在 JQuery (Javascript) 中构建迷你游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44388151/