如何获得随机播放按钮以随机播放数组中的片段？

时间：2020-06-27 06:00:50

标签： javascript html css

我正在创建图块交换难题，并且在编写JavaScript后遇到了一个问题。我的拼图完全不会洗牌。我想确保在加载页面时解决了难题，以便用户可以使用按钮将其随机播放。我想知道我的初始化函数是否与问题有关，因为它应该在一开始就显示出已解决的难题。我该如何解决？

链接到jsfiddle：https://jsfiddle.net/Relativ/5fvx8meL/13/#&togetherjs=r5Em1xsJQS 

var selPieces = [];
var allPieces = document.getElementById("img-holder");

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }

}

function shuffle()
{
    for (var i = 0; i < allSlices.length; i++) 
    {
        allPieces.addEventListener('click',selectMe)
        var rand = Math.floor(Math.random()*orderArray.length)
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = allPieces[i];
        let orderSecond = allPieces[i]
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPiece[1].style.order = orderFirst;

        selPiece[0].style.border = "none";
        selPiece[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete()
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementById('.'+currentView);
    allPieces = document.getElementById("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i];
        currentOrder.push
    }
    if(currentOrder.toString() == correctOrder.toString()){
        let activeLink = document.getElementById("active");
        activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Start and Play Again");
    }

}
* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}
<!DOCTYPE html>
<html>
    <title></title>
    <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
    <script src="PicturePuzzle.js" type="text/javascript"></script>
    <head>
        <body onload = "initialize()">
          <div class="game-container">
            <div class="img-holder"><img class="card" src="char1.jpg"></div>
            <div class="img-holder"><img class="card" src="char2.jpg"></div>
            <div class="img-holder"><img class="card" src="char3.jpg"></div>
            <div class="img-holder"><img class="card" src="char4.jpg"></div>
            <div class="img-holder"><img class="card" src="char5.jpg"></div>
            <div class="img-holder"><img class="card" src="char6.jpg"></div>
            <div class="img-holder"><img class="card" src="char7.jpg"></div>
            <div class="img-holder"><img class="card" src="char8.jpg"></div>
            <div class="img-holder"><img class="card" src="char9.jpg"></div>
            <div class="img-holder"><img class="card" src="char10.jpg"></div>
            <div class="img-holder"><img class="card" src="char11.jpg"></div>
            <div class="img-holder"><img class="card" src="char12.jpg"></div>
            <div class="img-holder"><img class="card" src="char13.jpg"></div>
            <div class="img-holder"><img class="card" src="char14.jpg"></div>
            <div class="img-holder"><img class="card" src="char15.jpg"></div>
            <div class="img-holder"><img class="card" src="char16.jpg"></div>
    
        </div>  
            <button style="width: 100px; height: 50px;" onclick = "shuffle()">Shuffle</button> 
          </div> 
          
        </body>
    </head>
</html>

1 个答案:

答案 0 :(得分：2)

我发现了4个与改组有关的错误，这些错误未使代码中的片段随机化。首先，您使用getElementsById而不是getElementsByClassName，后者将仅返回一个元素（不是因为img-holder是一个类而不是id），因此长度是不确定的。其次，您没有在shuffle函数中调用initialize。第三，在for循环中，即使变量名为allSlices.length，也正在使用allPieces。第四，即使这是一个数组，也要执行allPieces.addEventListener，所以请使用allPieces[i].addEventListener。

var selPieces = [];
var allPieces = document.getElementsByClassName("img-holder"); // FIRST

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }
    shuffle() // SECOND

}

function shuffle()
{
    for (var i = 0; i < allPieces.length; i++) //THIRD
    {
        allPieces[i].addEventListener('click',selectMe) // FOURTH
        var rand = Math.floor(Math.random()*orderArray.length)
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = allPieces[i];
        let orderSecond = allPieces[i]
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPiece[1].style.order = orderFirst;

        selPiece[0].style.border = "none";
        selPiece[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete()
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementById('.'+currentView);
    allPieces = document.getElementById("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i];
        currentOrder.push
    }
    if(currentOrder.toString() == correctOrder.toString()){
        let activeLink = document.getElementById("active");
        activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Start and Play Again");
    }

}
* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}
<!DOCTYPE html>
<html>
    <title></title>
    <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
    <script src="PicturePuzzle.js" type="text/javascript"></script>
    <head>
        <body onload = "initialize()">
          <div class="game-container">
            <div class="img-holder"><img class="card" src="char1.jpg"></div>
            <div class="img-holder"><img class="card" src="char2.jpg"></div>
            <div class="img-holder"><img class="card" src="char3.jpg"></div>
            <div class="img-holder"><img class="card" src="char4.jpg"></div>
            <div class="img-holder"><img class="card" src="char5.jpg"></div>
            <div class="img-holder"><img class="card" src="char6.jpg"></div>
            <div class="img-holder"><img class="card" src="char7.jpg"></div>
            <div class="img-holder"><img class="card" src="char8.jpg"></div>
            <div class="img-holder"><img class="card" src="char9.jpg"></div>
            <div class="img-holder"><img class="card" src="char10.jpg"></div>
            <div class="img-holder"><img class="card" src="char11.jpg"></div>
            <div class="img-holder"><img class="card" src="char12.jpg"></div>
            <div class="img-holder"><img class="card" src="char13.jpg"></div>
            <div class="img-holder"><img class="card" src="char14.jpg"></div>
            <div class="img-holder"><img class="card" src="char15.jpg"></div>
            <div class="img-holder"><img class="card" src="char16.jpg"></div>
    
        </div>  
            <button style="width: 100px; height: 50px;" onclick = "shuffle()">Shuffle</button> 
          </div> 
          
        </body>
    </head>
</html>

编辑：修复所有错误后的最终代码： 

var selPieces = [];
var allPieces = document.getElementsByClassName("img-holder");

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }
      shuffle();
}

function shuffle()
{
    for (var i = 0; i < allPieces.length; i++) 
    {
        allPieces[i].addEventListener('click',selectMe);
        var rand = Math.floor(Math.random()*orderArray.length);
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = selPieces[0].style.order;
        let orderSecond = selPieces[1].style.order;
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPieces[1].style.order = orderFirst;

        selPieces[0].style.border = "none";
        selPieces[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete();
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementsByClassName("game-container")[0];
    allPieces = document.getElementsByClassName("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i].style.order;
        currentOrder.push(piece)
    }
    if(currentOrder.toString() == correctOrder.toString()){
        //let activeLink = document.getElementById("active");
        //activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Shuffle and Play Again");
    }

}
* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}
<!DOCTYPE html>
<html>
    <title></title>
    <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
    <script src="PicturePuzzle.js" type="text/javascript"></script>
    <head>
        <body onload = "initialize()">
          <div class="game-container">
            <div class="img-holder"><img class="card" src="char1.jpg"></div>
            <div class="img-holder"><img class="card" src="char2.jpg"></div>
            <div class="img-holder"><img class="card" src="char3.jpg"></div>
            <div class="img-holder"><img class="card" src="char4.jpg"></div>
            <div class="img-holder"><img class="card" src="char5.jpg"></div>
            <div class="img-holder"><img class="card" src="char6.jpg"></div>
            <div class="img-holder"><img class="card" src="char7.jpg"></div>
            <div class="img-holder"><img class="card" src="char8.jpg"></div>
            <div class="img-holder"><img class="card" src="char9.jpg"></div>
            <div class="img-holder"><img class="card" src="char10.jpg"></div>
            <div class="img-holder"><img class="card" src="char11.jpg"></div>
            <div class="img-holder"><img class="card" src="char12.jpg"></div>
            <div class="img-holder"><img class="card" src="char13.jpg"></div>
            <div class="img-holder"><img class="card" src="char14.jpg"></div>
            <div class="img-holder"><img class="card" src="char15.jpg"></div>
            <div class="img-holder"><img class="card" src="char16.jpg"></div>
    
        </div>  
            <button style="width: 100px; height: 50px;" onclick = "shuffle()">Shuffle</button> 
          </div> 
          
        </body>
    </head>
</html>

相关问题
最新问题