Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2019, 18:06
Новичок на форуме
Отправить личное сообщение для TrollenFoxy Посмотреть профиль Найти все сообщения от TrollenFoxy
 
Регистрация: 24.05.2019
Сообщений: 2

Прошедшее время по окончанию игры
Добрый день.
Уважаемые форумчане, прошу подсказать, как по завершению игры в alert() отображалось прошедшее время с начало игры в формате 00.00.00
Спасибо.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<html>
	<head>
		<title>Найди пару</title>
        <style>
        	#pole {width: 280px;}

			#pole a {width: 60px;
 				height: 60px;
 				float: left;
  				display: block;
  				cursor: pointer;
  				margin: 1px;
  				border: 1px solid #6e6d70;
                }
			#pole .color1 {background-color: #ff0000;}
			#pole .color2 {background-color: #aaff00;}
			#pole .color3 {background-color: #00e9ff;}
			#pole .color4 {background-color: #002aff;}
			#pole .color5 {background-color: #ff38c6;}
			#pole .color6 {background-color: #bf0000;}
			#pole .color7 {background-color: #706f6b;}
            #pole .color8 {background-color: #000000;}
            #pole .hidden {background-color: #ffffff;}

        </style>
 		<script>
              
            $(function()
        {var codes = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8], i, j, x, y;
    for(y = codes.length; y;){j = Math.floor(Math.random() * y);x = codes[--y];codes[y] = codes[j];codes[j] = x;}
    for(j = 0; j < 16; j++) document.getElementById('pole').innerHTML += '<a color="' + codes[j] + '" class="color' + codes[j] + ' hidden">&nbsp;</a>';
    var check = false, selcolor = 0, sela, open = 0, timer, a = document.getElementsByTagName('a');
  	for(var i = 0; i < a.length; i++){
        a[i].addEventListener('click', function(e){
            var el = e.target;
            if(el.className.indexOf('hidden') > -1){
                el.className = el.className.replace('hidden', '');
                setTimeout(function(){
                    if(check){
                        check = false;
                        if(el.getAttribute('color') == selcolor){
                            open++;
                            
                            if(open == 8) alert('You win!' );
                        }
                        else{
                            sela.className += ' hidden'; el.className += ' hidden';
                        }
                    }
                    else{
                        selcolor = el.getAttribute('color'); sela = el; check = true;
                    }
                }, 100);
            }
        });
    }
})();
		</script>
	</head>
	<body>
    <div id="pole"></div>
		<form>
		</form>
	</body>
</html>

Последний раз редактировалось TrollenFoxy, 24.05.2019 в 18:17.
Ответить с цитированием
  #2 (permalink)  
Старый 24.05.2019, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TrollenFoxy,
<html>
    <head>
        <title>Найди пару</title>
                <style>
                	#pole {width: 280px;}

            #pole a {width: 60px;
 				height: 60px;
 				float: left;
    				display: block;
    				cursor: pointer;
    				margin: 1px;
    				border: 1px solid #6e6d70;
                                }
            #pole .color1 {background-color: #ff0000;}
            #pole .color2 {background-color: #aaff00;}
            #pole .color3 {background-color: #00e9ff;}
            #pole .color4 {background-color: #002aff;}
            #pole .color5 {background-color: #ff38c6;}
            #pole .color6 {background-color: #bf0000;}
            #pole .color7 {background-color: #706f6b;}
                        #pole .color8 {background-color: #000000;}
                        #pole .hidden {background-color: #ffffff;}

                </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

 		<script>
         $(function()
                {var codes = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8], i, j, x, y;
        for(y = codes.length; y;){j = Math.floor(Math.random() * y);x = codes[--y];codes[y] = codes[j];codes[j] = x;}
        for(j = 0; j < 16; j++) document.getElementById('pole').innerHTML += '<a color="' + codes[j] + '" class="color' + codes[j] + ' hidden">&nbsp;</a>';
        var check = false, selcolor = 0, sela, open = 0, timer, a = document.getElementsByTagName('a');
        var time;
        for(var i = 0; i < a.length; i++){
                a[i].addEventListener('click', function(e){
                        var el = e.target;
                        if(el.className.indexOf('hidden') > -1){
                                time || (time = moment());
                                el.className = el.className.replace('hidden', '');
                                setTimeout(function(){
                                        if(check){
                                                check = false;
                                                if(el.getAttribute('color') == selcolor){
                                                        open++;

                                                        if(open == 8) {
                                                        time = moment() - time;
                                                        time = moment(time).utc().format('HH:mm:ss');
                                                        alert('You win! ' + time);
                                                        }
                                                }
                                                else{
                                                        sela.className += ' hidden'; el.className += ' hidden';
                                                }
                                        }
                                        else{
                                                selcolor = el.getAttribute('color'); sela = el; check = true;
                                        }
                                }, 100);
                        }
                });
        }
});
        </script>
    </head>
    <body>
        <div id="pole"></div>
        <form>
        </form>
    </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.05.2019, 19:50
Новичок на форуме
Отправить личное сообщение для TrollenFoxy Посмотреть профиль Найти все сообщения от TrollenFoxy
 
Регистрация: 24.05.2019
Сообщений: 2

рони, Большое спасибо.

Последний раз редактировалось TrollenFoxy, 24.05.2019 в 19:53.
Ответить с цитированием
  #4 (permalink)  
Старый 25.05.2019, 00:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TrollenFoxy,
игра открыть пару
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Игры на JavaScript Вовантуз Ваши сайты и скрипты 8 06.03.2018 20:39
Помогите определить момент завершения игры на сайте Freebitco.in wgoganet Opera, Safari и др. 0 01.08.2017 13:55
new Date - Неверное время SunYang Node.JS 5 27.01.2017 22:18
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39
время время время .... dozer Оффтопик 21 21.08.2012 15:18