我的节目中遇到了一个我无法理解的错误。基本上当我的游戏开始时,我有一个循环,迭代所有将被拖放的部分。然而,当我实际测试它时,定期(并且看起来这个bug取决于我首先尝试拖动哪个元素,然后影响后面的那个)我会去拖动一个项目,当我尝试删除它时,drop事件不会发生但是如果我转到表格的左上角元素,并从左到右拖动每个元素,最终所有的部分都可以拖放,但只能按特定的顺序。我一直试图解决这个问题但是已经没有想法了。这是一个问题的现场演示,它从我选择第一个五角大楼开始,这不会发生在每场比赛中...... https://www.youtube.com/watch?v=-izy_tuxmdg
我正在使用的循环是这样的,它是我在程序启动时调用的对象的一部分:
enablePieces: function() {
for(var i = 0; i < this.dragPieces.length; i++) {
this.dragPieces[i].ondragstart = this.dragStart;
this.targetPieces[i].ondragover = this.allowDrop;
this.targetPieces[i].ondrop = this.doDrop;
};
},
当我打电话给方法时,它是这样的:
Perfection.start = function() {
newGame();
*Perfection.view.enablePieces();*
Perfection.controls.startButton.onclick = beginGame;
Perfection.controls.newButton.onclick = newGame;
};
我还要提一下,当我从DOM中抓取元素时,它是这样的:
dragPieces : document.querySelectorAll(".piecetray td img"),
targetPieces : document.querySelectorAll(".gametray td img"),
当我在控制台中输入Perfection.view.dragPieces时,我得到:
Perfection.view.dragPieces
NodeList
[ <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, 26 more… ]
但是如果我创建一个数组var dragArray = [ ];
然后推送&#34; NodeList&#34;中的所有元素。进入这个数组,然后在控制台中键入数组,我得到:
dragArray
Array [ <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, <img>, 26 more… ]
我认为这两者之间没有任何区别,但是现在我在质疑自己,似乎在使用我创建的数组时它发生的更少,但这可能只是缺少测试而不是另外,谁能告诉我为什么会这样?
拖放功能也发布在这里:
dragStart : function(event) {
var piece = event.currentTarget;
piece.classList.add("selected");
},
allowDrop : function(event) {
event.preventDefault();
},
doDrop : function(event) {
var bestTime = 0;
event.preventDefault();
var currentPiece = document.querySelector(".selected");
var targetPiece = event.currentTarget;
var targetParent = targetPiece.parentElement;
if (getName(currentPiece) === getName(targetPiece)) {
targetParent.appendChild(currentPiece);
currentPiece.classList.remove("selected");
currentPiece.classList.add("matched");
matchedCount++;
};
if ((matchedCount === 36) && (Perfection.timeLeft !== 0))
if(Perfection.timeLeft > bestTime) {
Perfection.view.updateScore("Best time " + timer.innerHTML);
bestTime = Perfection.timeLeft;
clearInterval(Perfection.timer);
};
答案 0 :(得分:0)
问题在于:
currentPiece.classList.remove(&#34;选择&#34);
因为它被放置在条件中,所以只有在匹配的情况下才会删除该类,但是无论如何都应该删除它,无论是在每个放置事件中。