0
私の主要プロジェクトのミニゲームのセットを作っています。このミニゲームでは、これまでのミニゲームと同じ方法を使っています。JQueryでミニゲームを作成する（JavaScript）
私の以前のミニゲームでは、PuzzleContainerは1つしかありませんでしたが、今回は4つあります。 3つ以上のPuzzleContainerを追加して以来、コードは機能していないようです。私はsciptingで何か間違ったことをしましたか？私がどこに間違っているのか誰にでも教えてくれますか？
これは私が現在取り組んでいるミニゲームのコードです。
$(document).ready(function() {
\t //speech
\t var progress = 0;
\t var txt;
\t $('#complete, #speech').hide();
\t
\t function eventHandler() {
\t \t switch (progress) {
\t \t \t case 0:
\t \t \t \t txt = "Complete";
\t \t \t \t break;
\t \t \t case 1:
\t \t \t \t txt = "Move on to the next minigame";
\t \t \t \t $('#speech').click(function(){
\t \t \t \t \t window.location.href="minigame8.html";
\t \t \t \t });
\t \t \t \t break;
\t \t \t }
\t \t \t progress++;
\t \t \t $('#speech').html(txt);
\t \t }
\t \t
\t \t $('#speech').click(eventHandler);
\t
\t // Sortable //
\t $('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').sortable({
\t \t update: function() {
\t \t \t var userPieces = '';
\t \t \t $('#puzzleContainer1 li', '#puzzleContainer2 li', '#puzzleContainer3 li', '#puzzleContainer4 li').each(function() {
\t \t \t \t userPieces += $(this).attr('data');
\t \t \t })
\t \t \t checkResult(userPieces);
\t \t }
\t });
\t $('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').disableSelection();
\t
\t //shows the "Enterpassword once pieces are all correctly aligned
\t function checkResult(userPieces) {
\t \t if (userPieces == '1234' && '12345' && '123456') {
\t \t \t $("#complete").show(0,function() {
\t \t \t \t eventHandler()
\t \t \t \t $('#speech').show();
\t \t \t });
\t \t }
\t }
\t
});#puzzleContainer1 {
\t position: absolute;
\t z-index: 5;
\t top: 10px;
\t left: 130px;
\t list-style-type: none;
}
#puzzleContainer2 {
\t position: absolute;
\t z-index: 5;
\t top: 75px;
\t left: 130px;
\t list-style-type: none;
}
#puzzleContainer3 {
\t position: absolute;
\t z-index: 5;
\t top: 140px;
\t left: 130px;
\t list-style-type: none;
}
#puzzleContainer4 {
\t position: absolute;
\t z-index: 5;
\t top: 205px;
\t left: 130px;
\t list-style-type: none;
}
ul, menu, dir {
\t display: block;
}
.piece{
\t z-index: 5;
\t float: left;
\t margin: 0 10px 0 0;
\t padding: 0;
}
li {
\t display: list-item;
\t text-align: -webkit-match-parent;
}
#complete {
\t position: absolute;
\t width: 105px;
\t height: 25px;
\t top: 240px;
\t left: 289px;
\t background-color: black;
\t color: white;
\t font-size: 20px;
\t padding: 10px;
\t border-style: solid;
\t border-width: 5px;
\t border-color: white;
\t z-index:5;
}
#speech {
\t position: absolute;
\t width: 655px;
\t height: 100px; \t
\t top: 330px;
\t left: 15px;
\t background-color: black;
\t color: white;
\t font-size: 25px;
\t padding: 10px;
\t border-style: solid;
\t border-width: 5px;
\t border-color: white;
\t 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>
\t <div id="stage">
\t \t <ul id="puzzleContainer1" class="ui-sortable">
\t \t \t <li class="piece" data="4"><img src="images/puzzle6/puzzleContainer1/L.png">4</li>
\t \t \t <li class="piece" data="1"><img src="images/puzzle6/puzzleContainer1/redF.png">1</li>
\t \t \t <li class="piece" data="2"><img src="images/puzzle6/puzzleContainer1/A.png">2</li>
\t \t \t <li class="piece" data="5"><img src="images/puzzle6/puzzleContainer1/E.png">5</li>
\t \t \t <li class="piece" data="3"><img src="images/puzzle6/puzzleContainer1/B.png">3</li>
\t \t </ul>
\t \t <ul id="puzzleContainer2" class="ui-sortable">
\t \t \t <li class="piece" data="3"><img src="images/puzzle6/puzzleContainer2/S.png">3</li>
\t \t \t <li class="piece" data="2"><img src="images/puzzle6/puzzleContainer2/U.png">2</li>
\t \t \t <li class="piece" data="4"><img src="images/puzzle6/puzzleContainer2/T.png">4</li>
\t \t \t <li class="piece" data="1"><img src="images/puzzle6/puzzleContainer2/redR.png">1</li>
\t \t </ul>
\t \t <ul id="puzzleContainer3" class="ui-sortable">
\t \t \t <li class="piece" data="3"><img src="images/puzzle6/puzzleContainer3/A.png">3</li>
\t \t \t <li class="piece" data="2"><img src="images/puzzle6/puzzleContainer3/N.png">2</li>
\t \t \t <li class="piece" data="4"><img src="images/puzzle6/puzzleContainer3/B.png">4</li>
\t \t \t <li class="piece" data="6"><img src="images/puzzle6/puzzleContainer3/E.png">6</li>
\t \t \t <li class="piece" data="1"><img src="images/puzzle6/puzzleContainer3/redE.png">1</li>
\t \t \t <li class="piece" data="5"><img src="images/puzzle6/puzzleContainer3/L.png">5</li>
\t \t </ul>
\t \t <ul id="puzzleContainer4" class="ui-sortable">
\t \t \t <li class="piece" data="1"><img src="images/puzzle6/puzzleContainer4/redE.png">1</li>
\t \t \t <li class="piece" data="4"><img src="images/puzzle6/puzzleContainer4/O.png">4</li>
\t \t \t <li class="piece" data="3"><img src="images/puzzle6/puzzleContainer4/H.png">3</li>
\t \t \t <li class="piece" data="2"><img src="images/puzzle6/puzzleContainer4/C.png">2</li>
\t \t </ul>
\t \t <input id="password" type="text" style="display: block;">
\t \t <button id="submit" style="display: block;">Enter Password</button>
\t \t <div id="complete">ACCEPTED</div>
\t \t <div id="speech"></div>
\t </div>
\t
</body>
</html>
のthnxを、今私はまた#passwordと#submitを隠したために思い出し、そして#passwordと#submitを持つように実装しようと、周りのブロックをドラッグすることができます私は正しくブロックを順番に持っていることを示すとき、私はそれが（userPieces === '1234' && '12345' && '123456'） – Ovaflow
と関係があると感じています。 Javascriptで複数の条件を持つif文。 とにかく、実際にuserPiecesが '1234'か '12345'か '12345'かどうかをチェックしたいと思うようです。これを行うには次のようにします：if（userPieces == '1234' || userPieces == '12345' || userPieces == '123456'）。 –