jQuery - Получение кнопки сброса для работы

Я пишу основную игру памяти, в которой вы переворачиваете 2 карты, и если они не совпадают, они перевернуты, но если они соответствуют их изменениям цвета фона. То, что я хотел бы, это кнопка, которая может вернуть игру обратно на все пустые карты в любое время, будь то в середине игры или в самом конце, когда все закончится.jQuery - Получение кнопки сброса для работы

Вот код:

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title>Matching Game</title> 
<!-- <link href="style.css" rel="stylesheet"> --> 
<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: futura; 
} 
h2 { 
    text-align: center; 
} 
ul { 
    width: 428px; 
    margin: 0 auto; 
    padding: 0; 
} 
ul li { 
    float: left; 
    width: 100px; 
    border: 1px solid #444; 
    list-style: none; 
    padding: 70px 0; 
    margin: 0 5px 5px 0; 
    text-align: center; 
    color: #fff; 
    font-weight: bold; 
    border-radius: 1em; 
} 
ul li:hover { 
    border: 1px solid red; 
} 
ul li.flipped { 
    color: #444; 
} 
.clearfix { 
clear: both; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 

<h2>Click two different cards to see if they match!</h2> 
<ul> 
    <li>salmon</li> 
    <li>swordfish</li> 
    <li>swordfish</li> 
    <li>shrimp</li> 
    <li>lobster</li> 
    <li>scallops</li> 
    <li>lobster</li> 
    <li>salmon</li> 
    <li>tuna</li> 
    <li>scallops</li> 
    <li>tuna</li> 
    <li>shrimp</li> 
</ul> 

<div class="clearfix"></div> 
<p><button type="reset" value="Reset">Reset</button></p> 

<script type="text/javascript"> 

$(function() { 
    var firstCard = null; 

    $('li').on('click', function(e) { 
     e.preventDefault(); 

     $(this).addClass('flipped'); 

     if (firstCard === null) { 
      firstCard = $(this); 
     } else { 
      if (firstCard.text() === $(this).text()) { 
       firstCard = null; 
      } else { 
       var secondCard = this; 

       setTimeout(function() { 
        firstCard.removeClass('flipped'); 
        $(secondCard).removeClass('flipped'); 

        firstCard = null; 
       }, 1000); 
      } 
     } 
    }); 
}); 
</script> 
</body> 
</html>

источник

2014-02-07 bealstreetmedia

Какой вопрос? –

Я потерял титул; вопрос заключается в том, как получить кнопку для сброса карт. Извини за это. – bealstreetmedia

Основываясь на ваш вопрос, это звучит, как вам нужно просто удалить все flipped классы:

$('.flipped').removeClass('flipped');

источник

2014-02-07 20:20:06 helion3

добавить это к вашей функции подтверждающим:

firstCard.css({backgroundColor: 'green'}); 
$(this).css({backgroundColor: 'green'});

и для вашего сброса:

$('#reset').on('click', function(){ 
     $('li').removeClass('flipped').removeAttr('style'); 
    });

видеть мой fiddle

источник

2014-02-07 20:23:11 kingkode

jQuery - Получение кнопки сброса для работы

ответ

Смежные вопросы