JavaScript - скрипт не работает - PullRequest
Новая
       6

JavaScript - скрипт не работает

0 голосов
/ 02 июля 2018

Я пытаюсь создать игру «Hit the image», в которой на странице отображается несколько изображений, а «скрыто», а одно изображение (изображение меняется) «открыто». Моя идея состояла в том, чтобы запустить цикл while по выбору пользователя, который создаст случайный идентификатор (у каждой карты есть идентификатор) и отправит его в другую функцию. Эта часть отлично работает, я думаю. Функция № 2 должна «перевернуть» карты на 1 секунду, а затем снова накрыть их. В консоли видно, что класс «flip» добавляется, но не удаляется, но на странице все карты «закрыты». Я думаю, проблема в том, что первая функция отправляет случайные числа слишком быстро, в то время как функция переворота имеет установленное время ожидания. Кто-нибудь может это подтвердить? Есть идеи как решить?

Код: Пожалуйста, не против уродливой кнопки 

var currentCard;
var audioWin = new Audio('sound/win.mp3');
var idNum="a"


//gets string id and removes "flipped" class from it
function flip(idNum){
  console.log("in flip");
  currentCard=document.getElementById(idNum);
  currentCard.classList.add('flipped');

  setTimeout(function () {
    currentCard.classList.remove('flipped');
  }, 1000)


}
//plays sounds if users hits img while card is "open"
function ifClicked(currentCard){
  if(currentCard.classList.contains('flipped')){
    audioWin.play();
  }
  else{
    //put another short sound
  }
  
}
//creates random nums in range 1-4
function randCard(){
  while(true){
    var secretNum=Math.floor((Math.random()*4)+1);
    idNum=secretNum.toString();
    console.log(idNum);
    flip(idNum);
    //document.getElementById(idNum);
  }
  
  
}
.card{
    background-color: pink;
    height: 165px;
    width: 165px;    
    float: left;
    margin: 5px;
}
.card img {
    position: absolute;
}

.flipped .back {
    display: none;
}

.button{
    width: 60px;
    height: 60px;
    background-color: green;
    float: left;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="t.css" />
</head>
<body>
<div id="container">
  <div id ="1" class="card" onclick="ifClicked(this);">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div id="2"class="card" onclick="ifClicked(this);">
    <img src="img/cards/2.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div id="3" class="card"  onclick="ifClicked(this);">
    <img src="img/cards/3.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div id="4" class="card"  onclick="ifClicked(this);">
    <img src="img/cards/4.png">
    <img class="back" src="img/cards/back.png">
  </div>
</div>    
<div class="button" onclick="randCard();">here</div>
</body>
<script src="j.js"></script>
</html>

1 Ответ

0 голосов
/ 02 июля 2018

да, я думаю, что вы на нем, я бы удалил цикл из этой функции: 

function randCard(){
    var secretNum=Math.floor((Math.random()*4)+1);
    idNum=secretNum.toString();
    console.log(idNum);
    flip(idNum);
  }

Затем снова вызовите randCard (), как только показанная карта перестанет работать и снова перевернется: 

function flip(idNum){
  console.log("in flip");
  currentCard=document.getElementById(idNum);
  currentCard.classList.add('flipped');

  setTimeout(function () {
    currentCard.classList.remove('flipped');
    randCard();
  }, 1000)


}

И после загрузки DOM вызовите randCard (), чтобы запустить цикл: 

//PLace this right after your global variable declarations
document.addEventListener("DOMContentLoaded", function(){
    //Initial call of randCard()
    randCard();
}
...