javascript - QuerySelectorAll 无法打乱该列表的顺序-6ren

javascript - QuerySelectorAll 无法打乱该列表的顺序

转载作者：行者123 更新时间：2023-11-27 23:19:48

我正在构建一个翻牌配对游戏。我想要键盘控制，而不是通过单击鼠标来翻转卡片。

我在洗牌时遇到问题。如果我使用 DOM 中的“选择器”类，卡片会很好地洗牌，但我计划在用户切换卡片时将它们用作荧光笔/选择器图标。所以我需要卡片本身来洗牌。

请不要介意大部分代码是为鼠标点击而设计的。我仍在修改它，我需要首先能够洗牌并离开选择器类。

这是我的 HTML 代码片段:

    <section class='gameContainer'>
     <div class='game'>
        <div class='row'>
          <div class='selector'>
            <div class='card' data-framework='star'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='mushroom'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='flower'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='coinTen'>
              <img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='chest'>
              <img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
              <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='mushroom'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
              <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
        </div>
    </div>
    </section>

这是我的 CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #000;
}

#titleContainer {
  border: solid 0px red;
  width: 50%;
  margin: auto;
  background-color: #ffe400;
  padding: 20px;
}
#title1 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  color: #1f57b8;
  text-align: center;
  text-shadow: 1px 2px 0px #ff0000;
}
#title2 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #ff0000;
  text-shadow: 1px 2px 0px #000;
}

.gameContainer {
  border: solid 1px black;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 10px,
    #b30000 10px,
    #b30000 20px
  );
  width: 640px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game {
  background-color: #000;
  width: 90%;
  height: 90%;
}
.row {
  border: solid 0px red;
  width: 100%;
  height: 33.333%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  perspective: 1000px;
}
.selector, .selectorActive {
  box-sizing: content-box;
  border: solid 8px black;
  border-radius: 6px;
  position: relative;
  width: 15%;
  height: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectorActive {
  border: solid 8px orange;
}

.card {
  border: solid 0px aqua;
  position: absolute;
  display: flex;
  width: 90%;
  height: 89%;
  transform-style: preserve-3d;
  transition: transform .5s;
}

.card.flip {
  transform: rotateY(180deg);
}

.frontSide, .backSide{
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 24px 9px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
}
.frontSide {
  transform: rotateY(180deg);
}

.imageWithNum {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 29px 14px 0px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.backSide {
  background-color: #fff;
}

.cardSelector {
  border: solid 8px #ff7b00;
}

这是我的 JavaScript。我在脚本的开头获取卡片类，然后在末尾有随机播放功能。另外，不要介意 For 循环从 1 而不是 0 开始。这是有意的:

const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard(){
  // This will disable any clicks that occur before the non-matched cards reset
  if(lockBoard)
    return;
  // This will prevent a double click on the same card to obtain a match
  if(this === firstCard)
    return;

  this.classList.add('flip');

  if(!hasFlippedCard){
    // First card is clicked
    hasFlippedCard = true;
    firstCard = this;

    return;
  } 

// Second card is clicked
secondCard = this;

// Check if cards match
checkForMatch();    
}


//This function will check if the two cards chosen match
function checkForMatch(){
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
  isMatch ? disableCards() : unflipCards();
}

//This function will disable the chosen cards whenever there's a match
function disableCards(){
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

//This function will reset the cards if they don't match
function unflipCards(){
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

function resetBoard(){
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

(function shuffle(){

  for(let x = 1; x < cards.length; x++){
    let randomPos = Math.floor(Math.random() * 17);
    cards[x].style.order = randomPos;
  }

})();

cards.forEach(card => card.addEventListener('click', flipCard));

还有，我正在尝试重新制作《 super 马里奥兄弟 3》中的纸牌翻转游戏。:D

最佳答案

当您指定顺序时，它适用于 flex 容器的子容器。根据the specification :

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item.

您的 .card 元素似乎不是 flex 容器的子元素。它们是它的后代，但它们是 .selector 元素的子元素。如果您使用 selector 类将排序应用于元素，我认为它应该有效。

请注意，您的第一张卡片将始终是星星，因为您是在 x = 1 处开始您的 for 循环。这可能是故意的，但我只是想指出这一点。

const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
  // This will disable any clicks that occur before the non-matched cards reset
  if (lockBoard)
    return;
  // This will prevent a double click on the same card to obtain a match
  if (this === firstCard)
    return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    // First card is clicked
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  // Second card is clicked
  secondCard = this;

  // Check if cards match
  checkForMatch();
}


//This function will check if the two cards chosen match
function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
  isMatch ? disableCards() : unflipCards();
}

//This function will disable the chosen cards whenever there's a match
function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

//This function will reset the cards if they don't match
function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

(function shuffle() {
  let s = document.querySelectorAll(".selector");
  for (let x = 1; x < s.length; x++) {
    let randomPos = Math.floor(Math.random() * 17);
    s[x].style.order = randomPos;
  }

})();

cards.forEach(card => card.addEventListener('click', flipCard));

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #000;
}

#titleContainer {
  border: solid 0px red;
  width: 50%;
  margin: auto;
  background-color: #ffe400;
  padding: 20px;
}

#title1 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  color: #1f57b8;
  text-align: center;
  text-shadow: 1px 2px 0px #ff0000;
}

#title2 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #ff0000;
  text-shadow: 1px 2px 0px #000;
}

.gameContainer {
  border: solid 1px black;
  background: repeating-linear-gradient( -45deg, #fff, #fff 10px, #b30000 10px, #b30000 20px);
  width: 640px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game {
  background-color: #000;
  width: 90%;
  height: 90%;
}

.row {
  border: solid 0px red;
  width: 100%;
  height: 33.333%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  perspective: 1000px;
}

.selector,
.selectorActive {
  box-sizing: content-box;
  border: solid 8px black;
  border-radius: 6px;
  position: relative;
  width: 15%;
  height: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectorActive {
  border: solid 8px orange;
}

.card {
  border: solid 0px aqua;
  position: absolute;
  display: flex;
  width: 90%;
  height: 89%;
  transform-style: preserve-3d;
  transition: transform .5s;
}

.card.flip {
  transform: rotateY(180deg);
}

.frontSide,
.backSide {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 24px 9px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
}

.frontSide {
  transform: rotateY(180deg);
}

.imageWithNum {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 29px 14px 0px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.backSide {
  background-color: #fff;
}

.cardSelector {
  border: solid 8px #ff7b00;
}

<section class='gameContainer'>
  <div class='game'>
    <div class='row'>
      <div class='selector'>
        <div class='card' data-framework='star'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='mushroom'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='flower'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='coinTen'>
          <img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='chest'>
          <img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='mushroom'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
    </div>
  </div>
</section>

关于javascript - QuerySelectorAll 无法打乱该列表的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58071245/

文章推荐： c++ - 无法执行 Netbeans 创建的 .o 文件

文章推荐： html - 在 Safari 中循环播放 html5 mp4 视频时如何防止延迟？

文章推荐： c++ - 我的 header 和 .cpp 文件出错

jquery - 打乱 DOM
我正在使用下面的随机播放脚本来随机化网站上某些 div 的顺序。 http://james.padolsey.com/javascript/shuffling-the-dom/ 该脚本有效，但仅随机化
java - 打乱 HashMap 中的值
我想打乱 HashMap 中的值。我有以下类型的 HashMap Map > trainDataSet = new HashMap>(); 我想打乱 map 中的值。我该怎么做呢？以下是我的尝试:
java - 打乱 Java 流对象列表
这个问题已经有答案了: Shuffle a list of integers with Java 8 Streams API (8 个回答) 已关闭 3 年前。我有一个单词列表:List words
mysql - # 打乱 SQL 查询的符号
我必须使用 SQL SELECT 语句返回一些结果。我需要返回两条关于员工的信息，Employee# 和 EmployeeName。我试过了 SELECT Employee#, EmployeeNa
html - 打印被 bootstrap 打乱
我有一个网页，我正在尝试打印它。我正在使用引导导航栏。问题是，当我使用 bootstarp 导航栏时，打印预览没有任何意义。我在页面中看到了代码行而不是实际内容。只有当我将引用添加到 bootstra
c - 打乱 SSE 寄存器中的偶数和奇数值
我用 16 位值加载两个 SSE 128 位寄存器。这些值按以下顺序排列: src[0] = [E_3, O_3, E_2, O_2, E_1, O_1, E_0, O_0] src[1] = [E_
javascript - 将所有具有相同类别的 DIVS 打乱
我需要做的是:原始状态: 洗牌后: 第一个 div 中的 Divs 留在那里但会被打乱，同样的情况也会发生在具有相同类的第二个 div 中。要在特定的 div
javascript - 打乱 HTML 列表元素的顺序
我有一个列表: milk butter eggs orange juice bananas 如何使用 javascript 随机重新排序列表项？最佳答案
objective-c - 打乱 N 个数字的数组并转换回整数
我有一个大小为 n 的 NSMutableArray urlArray，我想从数组中的元素总数中随机选择其中的 4 个 URL。但是我不想直接打乱 urlArray，我更喜欢制作一个“indexAr
c - 打乱 5 元素数组以每次获得单独的顺序 C
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
java - 打乱 ArrayList 直到满足条件 (Java)
首先，我的母语不是英语，所以请原谅我的一些错误。我想对 ArrayList 进行洗牌(没问题)，但是洗牌后列表必须满足某些条件。我的第一个方法是创建 if 语句，并在每次为 true 时进行洗牌。但
c++ - 打乱 __m256i vector 的元素
我想打乱 __m256i vector 的元素。并且有一个内在的 _mm256_shuffle_epi8 做类似的事情，但它不执行跨车道洗牌。如何使用 AVX2 指令来实现？最佳答案有一种方法可
objective-c - 打乱 NSString 顺序的快速方法？
有谁知道改变现有 NSString 或 NSMutableString 字符顺序的现有方法吗？无论如何，我有一个解决方法，但如果有一个现有的方法，那就太好了。例如，给定字符串@"HORSE"，一个方
objective-c - 打乱 NSMutableArray : calling the method
我是 Objective-C 新手，通过反复试验来学习!如果这个问题有点幼稚，请原谅我。我创建了一组图像，需要对它们进行随机播放。我已经使用了这里给出的建议: What's the Best Way
sql-server - 打乱 SQL Server 中的列？
我们有一个网络应用程序，希望向潜在客户演示，但我们最好的方法是使用现有数据，以获得完整的体验。当然，我们不想使用应用程序中可见的实际客户名称或地址等来执行此操作。 SQL Server 中有没有一种简
javascript - 缩小/打乱 Django js 的简单方法
有一个简单的方法来缩小和/或混淆 JS，它存在于我的 django 模板中？我还在js中使用模板变量和模板标签，因此，标准的uglifyjs或类似的不符合我最初的要求。有什么事情要做吗？最佳答案
java - 使用 ArrayList 打乱 xml 布局时出错
我是新用户 ArrayList 。我不明白。如果我使用int[]作为ArrayList项目有错误: The method put(int) is undefined for the type Arr
excel - 在 Excel 中对行/列中的值重新排序/打乱
是否可以随机打乱 Excel 工作表中行或列中的值。有没有相关的函数/宏？我该怎么做？ -广告。最佳答案嗯...就像简单的解决方案一样，无需编程。例如，您有一列数据 (A): 23 78 12 7
ruby - 如何在 Ruby 中随机排序(打乱)数组？
我想打乱我的数组项。像这样: [1,2,3,4].scramble => [2,1,3,4] [1,2,3,4].scramble => [3,1,2,4] [1,2,3,4].scramble =>
android - 自定义 ArrayAdapter 使用 NullPointerException 打乱 View
我目前正在为 Android 开发内容创建应用程序。它的主要目的是让用户生成一个包含文本和图像条目的列表(最后由 EditText 和 ImageView 表示)。我通过使用 ViewHolder

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - QuerySelectorAll 无法打乱该列表的顺序