按正确的顺序单击div

Question

如何做到这一点，以便当您按正确的顺序按下div时会发生某些事情。

到目前为止，这是我的代码。 现在，只有单击所有蓝绿色的div才会发生某些事情。

var one = false;
var two = false;
var three = false;
var four = false;
function mm(x) {
  var y = x.id;
  switch (y) {
    case "one":
      one = true;
      break;
    case "two":
      two = true;
      break;
    case "three":
      three = true;
      break;
    case "four":
      four = true;
  }
  x.style.background = "aqua";
  if (one == true && two == true && three == true && four == true) {
    alert("WOW");
    one = false;
    two = false;
    three = false;
    four = false;
    var x = document.getElementsByClassName("dev");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.backgroundColor = "teal";
    }
  }
}

body,
html {
  height: 100%;
  background: #333;
}
* {
  margin: 0;
  padding: 0;
}
.dev {
  background-color: teal;
  width: 20%;
  height: 100vh;
  position: absolute;
  top: 0;
  cursor: pointer;
}
.one {
  left: 1%;
}
.two {
  left: 27%;
}
.three {
  right: 27%;
}
.four {
  right: 1%;
}

<div onclick="mm(this);" id="one" class="dev one"></div>
<div onclick="mm(this);" id="two" class="dev two"></div>
<div onclick="mm(this);" id="three" class="dev three"></div>
<div onclick="mm(this);" id="four" class="dev four"></div>

如果有比做很多变量和ifs和switch更简单的方法，那就太好了。

请不要使用jQuery。 谢谢。

Answer 1

首先想到的是将顺序保持在数组中，并将其与div上的data属性匹配。最终情况是下一个索引与数组长度相同。

这是一个例子：

let divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; i++) {
  divs[i].addEventListener("click", checkOrder);
}

// the contents match the data-index for the divs
// this means the div with the data-index 2 will be the first in
// the correct order
let orderArray = [2, 3, 0, 1];
let nextIndex = 0;

function checkOrder() {
  divIndex = parseInt(this.dataset.index);
  
  // if the user did not choose the correct next item then restart
  if (divIndex !== orderArray[nextIndex]) {
    console.log("Incorrect- restarting");
    resetDivs();
    nextIndex = 0;
    return;
  }

  // user got the right next div. Color the selected div
  this.style.backgroundColor = "aqua";
  
  // check end case
  if(nextIndex === divs.length - 1){
    console.log("congratulations you won, you guessed the order " + orderArray);
  }
  
  // Set the next index in the order the user needs to match
  nextIndex++;
}

function resetDivs() {
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.backgroundColor = "teal";
  }
}

body,
html {
  height: 100%;
  background: #333;
}

* {
  margin: 0;
  padding: 0;
}

.dev {
  background-color: teal;
  width: 20%;
  height: 100vh;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.one {
  left: 1%;
}

.two {
  left: 27%;
}

.three {
  right: 27%;
}

.four {
  right: 1%;
}

<div data-index="0" class="dev one"></div>
<div data-index="1" class="dev two"></div>
<div data-index="2" class="dev three"></div>
<div data-index="3" class="dev four"></div>

Answer 2

每次您都需要这么多的变量，例如。 var one, two, three, four;，请考虑其他数据类型，例如数组。我在下面为您提供一个解决方案，该解决方案将正确的顺序存储在correctOrder数组中，并将实际的顺序存储在order数组中。每次单击一个块时，order数组中的第一项都会被Array.prototype.shift删除，而新的项会被Array.prototype.push添加。这样，您总是在order数组中拥有最后单击的4个块的名称，因此可以将其与correctOrder进行比较：

order.join("") === correctOrder.join("")

请注意，直接数组比较在这里不起作用。

这只是正确方向的提示；代码仍然需要改进，但是请注意如何避免很多不必要的代码。

var correctOrder = ["two", "three", "one", "four"];
var order = ["", "", "", ""];
var blocks = document.querySelectorAll(".dev");
blocks.forEach(block => block.addEventListener("click", mm));
function mm() {
  order.shift();
  order.push(this.id);
  this.style.background = "aqua";
  if (order.join("") === correctOrder.join("")) {
    alert("WOW");
    var x = document.getElementsByClassName("dev");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.backgroundColor = "teal";
    }
  }
}

body,
html {
  height: 100%;
  background: #333;
}
* {
  margin: 0;
  padding: 0;
}
.dev {
  background-color: teal;
  width: 20%;
  height: 100vh;
  position: absolute;
  top: 0;
  cursor: pointer;
}
.one {
  left: 1%;
}
.two {
  left: 27%;
}
.three {
  right: 27%;
}
.four {
  right: 1%;
}

<div id="one" class="dev one"></div>
<div id="two" class="dev two"></div>
<div id="three" class="dev three"></div>
<div id="four" class="dev four"></div>

Answer 3

尝试一下：

document.addEventListener('DOMContentLoaded', function(){
  var columns = document.querySelectorAll('.dev'),
      sequence = '1234',
      order = [],
      reset = function(){
        order = [];
        columns.forEach(function(column){
          column.style.backgroundColor = 'teal';
        });
      };

  columns.forEach(function(column){
    column.addEventListener('click', function(){
      var data = this.dataset,
          index = order.indexOf(data.index),
          bgColor = index > -1 ? 'teal' : 'aqua';

      if(index > -1){
        order.splice(index, 1);
      }else{
        order.push(data.index);
      }

      this.style.backgroundColor = bgColor;

      if(order.length === sequence.length){          
        if(order.join('') === sequence){
          alert('You guessed the correct order!');
        }else{
          alert('Please try again!')
        }

        reset();
      }
    });
  });
});

body,
html {
  height: 100%;
  background: #333;
}

* {
  margin: 0;
  padding: 0;
}

.dev {
  background-color: teal;
  cursor: pointer;
  height: 100vh;
  position: absolute;
  top: 0;
  width: 20%;
}

.one {
  left: 1%;
}

.two {
  left: 27%;
}

.three {
  right: 27%;
}

.four {
  right: 1%;
}

<div class="dev one" data-index="1"></div>
<div class="dev two" data-index="2"></div>
<div class="dev three" data-index="3"></div>
<div class="dev four" data-index="4"></div>

Answer 4

您可以尝试以下操作：

var sequence = [], //to store the current pressed sequence
    code = ['one', 'two', 'three', 'four']; //the expected sequence for something to happen

//function that given a step, will return true or false if the sequence is correct
function checkStep (item, sequence, code) {
    sequence.push(item);
    if (sequence.length > code.length) {
        sequence.shift();
    }

    return sequence.join() === code.join();
}

仅这段代码就是单独检查序列，使用上面代码的示例：（预期序列为['one', 'two', 'three', 'four']）

checkStep('three'); //false, current sequence is ['three']
checkStep('one'); //false, current sequence is ['three', 'one']
checkStep('two'); //false, current sequence is ['three', 'one', 'two']
checkStep('three'); //false, current sequence is ['three', 'one', 'two', 'three']
checkStep('four'); //true, current sequence is ['one', 'two', 'three', 'four']

您的js可能看起来像这样：

var sequence = [], //to store the current pressed sequence
    code = ['one', 'two', 'three', 'four']; //the expected sequence for something to happen

//function that given a step, will return true or false if the sequence is correct
function checkStep (item, sequence, code) {
    sequence.push(item);
    if (sequence.length > code.length) {
        sequence.shift();
    }

    return sequence.join() === code.join();
}

function mm(x) {
    var y = x.id;

    x.style.background = "aqua";
    if (checkStep(y, sequence, code)) {
        alert("WOW");
        sequence = []; //reset the current sequence
        var x = document.getElementsByClassName("dev");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.backgroundColor = "teal";
        }
    }
}

body,
html {
    height: 100%;
    background: #333;
}

* {
    margin: 0;
    padding: 0;
}

.dev {
    background-color: teal;
    width: 20%;
    height: 100vh;
    position: absolute;
    top: 0;
    cursor: pointer;
}

.one {
    left: 1%;
}

.two {
    left: 27%;
}

.three {
    right: 27%;
}

.four {
    right: 1%;
}

<div onclick="mm(this);" id="one" class="dev one"></div>
<div onclick="mm(this);" id="two" class="dev two"></div>
<div onclick="mm(this);" id="three" class="dev three"></div>
<div onclick="mm(this);" id="four" class="dev four"></div>