javascript - 西蒙游戏在第 2 级中执行 3 个序列

Question

我正在开发一个 simon 游戏，并在第 2 级进行一系列 3，而不是在第 2 级只进行 2 个。我已经查看了所有内容。我正在尝试输出到控制台，但我想我已经盯着它看太久了。如果有人能找到错误，请分享。谢谢您的帮助。这是笔 https://codepen.io/zentech/pen/XaYygR

//variables
userSeq = [];
simonSeq = [];
const NUM_OF_LEVELS = 5;
var id, color, level = 0;
var strict = false;
var error = false;
var boardSound = [
  "http://www.soundjay.com/button/sounds/button-4.mp3", //green
  "http://www.soundjay.com/button/sounds/button-09.mp3", //red
  "http://www.soundjay.com/button/sounds/button-10.mp3", //yellow 
  "http://www.soundjay.com/button/sounds/button-7.mp3" //blue   
];

//1- start board sequence
$(document).ready(function() {
  $(".start").click(function() {
    strict = false;
    error = false;
    level++;
    simonSeq = userSeq = [];
    simonSequence();
  })

  //user pad listener
  $(".pad").click(function() {
    id = $(this).attr("id");
    color = $(this).attr("class").split(" ")[1];
    userSequence();
  });

  //strict mode listener
  $(".strict").click(function() {
    level = 0;
    level++;
    simonSeq = userSeq = [];
    strict = true;    
    simonSequence();
  })
})

//user sequence
function userSequence() {
  userSeq.push(id);
    console.log(id+" "+color);
    addClassSound(id, color);
    //check user sequence
    if(!checkUserSeq()) {
      //if playing strict mode reset everything lol
      if(strict) {
        console.log("strict");
        simonSeq = [];
        level = 1;
      }   
      displayError();
      userSeq = [];
      error = true;   
      console.log("start simon error")
      simonSequence();
    }
    //checking end of sequence
    else if(userSeq.length == simonSeq.length && userSeq.length < NUM_OF_LEVELS) {
      level++;
      userSeq = [];
      error = false;
      console.log("start simon")
      simonSequence();
    }
    //checking for winners
    if(userSeq.length == NUM_OF_LEVELS) {
      displayWinner();
      resetGame();
    }     

}

/* simon sequence */
function simonSequence() {
  console.log("level "+level);
  $(".display").text(level);
  if(!error) {
    getRandomNum();
  }  
  var i = 0;
  var myInterval = setInterval(function() {
    id = simonSeq[i];
    color = $("#"+id).attr("class");
    color = color.split(" ")[1];
    console.log(id+" "+color);
    addClassSound(id, color);
    i++;
    if(i == simonSeq.length) {
      clearInterval(myInterval);
    } 
  }, 1000);  
}

//generate random number
function getRandomNum() {
  var random = Math.floor(Math.random() * 4);
  simonSeq.push(random);
}

/* add temporary class and sound  */
function addClassSound(id, color) {
  $("#"+id).addClass(color+"-active");
  playSound(id)
  setTimeout(function(){
    $("#"+id).removeClass(color+"-active");
  }, 500);
}

/* checking user seq against simon's */
function checkUserSeq() {
  for(var i = 0; i < userSeq.length; i++) {
    if(userSeq[i] != simonSeq[i]) {      
      return false;
    }
  }
  return true;
}

/* display error  */
function displayError() {
  console.log("error");  
  var counter = 0;
  var myError = setInterval(function() {
    $(".display").text("Err");
    counter++;
    if(counter == 3) {
      $(".display").text(level);
      clearInterval(myError);
      userSeq = [];
      counter = 0;
    }
  }, 500);
}

//display winner 
function displayWinner() {
  var count = 0;
  var winInterval = setInterval(function() { 
    count++;
    $(".display").text("Win");
    if(count == 5) {
      clearInterval(winInterval);
      $(".display").text("00");
      count = 0;
    }
  }, 500);
}

/* play board sound */
function playSound(id) {
  var sound = new Audio(boardSound[id]);
  sound.play();
}

/* reset game */
function resetGame() {
  userSeq = [];
  simonSeq = [];
  level = 0;
  strict = false;
  $(".display").text("00");
}

Answer 1

问题

您的初始化代码中存在引用 与复制 问题。

$(document).ready(function() {
  $(".start").click(function() {
    strict = false;
    error = false;
    level++;
    simonSeq = userSeq = []; //PROBLEM !!!!
    simonSequence();
  })

数组通过引用而不是值传递。

simonSeq = userSeq = [];
/* Any changes to 'userSeq' will affect 'simonSeq'.
 'simonSeq' is referencing 'userSeq' */

解决方案

更改所有实例

simonSeq = userSeq = [];

到

simonSeq = [];
userSeq = [];

解释

JavaScript 中的值可以通过两种方式引用；按引用和按值。

当您通过值引用某物时，您就是在复制它。

var numA = 5;
var numB = numA; //COPY numA over to numB
numA = 12; // Changes to numA will not affect numB because it was copied
console.log(numA); // 12
console.log(numB); // 5

当您通过reference 引用某物时，您是在引用/引用它，而不是复制它。对原始文件所做的任何更改都会影响引用它的所有内容。

var original = [1,2,3];
var ref = original; //Any changes made to 'original' will affect 'ref'

original.push('APPLES');
console.log(original); // [1,2,3,'APPLES']
console.log(ref); // [1,2,3,'APPLES']

在上面的代码中，ref 实际上不包含任何值。 ref包含original的内存位置。

ref is referencing original.

Arrays and Objects are always passed/refereed to by reference.

Everything else is passed/refereed to by value (they are copied).