Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 19.12.2018, 19:06   #1
ArtemWEB
Новичок
Джуниор
 
Регистрация: 19.12.2018
Сообщений: 1
Вопрос Немного переделать игру

Здравствуйте, друзья.
Прошу вас помочь мне, недопрограммисту с простой задачей.
Нужно просто переделать игру на тренировку памяти.
Суть игры:
Выводится игровое поле, состоящее из 16 клеток. При нажатии на клетку она открывается и показывается картинка, потом нужно нажать на любую другую клетку, если картинки не совпадают, они скрываются, если совпадают - остаются.
Так вот, нужно сделать так, чтобы количество угадываемых картинок было не 2, а 3.
Код:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Игра "Память"</title>
<style>
body{
	font-family:verdana;
	color:#444;
}
.button{
    text-decoration: none;
    font-size: 20px;
    margin-right: 20px;
    color: #fff;
    background: #3C8FB7;
    padding: 4px 8px;
	border: 0;
	cursor: pointer;
}
.igra_pamyat{
    width: 408px;
    margin: 0 auto;
}
.igra_pamyat div{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    cursor: pointer;
    float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

	//функция, которая перемешивает массив
	function mix(mixArray) {
	  var index, valueIndex; 
	  for (var i=0; i<=mixArray.length-1; i++) {
		index = Math.floor(Math.random()*i);
		valueIndex = mixArray[index];
		mixArray[index] = mixArray[i];
		mixArray[i] = valueIndex;
	  }
	  return mixArray;
	}

	var last_img; //Последняя показанная картинка
	var img_root = 'images/'; //Путь к папке с картинками
	var click_flag = 1;
	var count_click = 0; //Кол-во кликов
	var game_array = [1,3,4,5,6,1,7,8,2,6,7,3,4,5,8,2]; //Массив расположения картинок

	mix(game_array); //перемешиваем массив (картинки)
	
	$('.igra_pamyat div').each(function(){
		$(this).attr({'class':'num'+game_array[count_click],'data-state':'0'});
		count_click++;
	});
	
	count_click = 0;
	
	$('.igra_pamyat div').click(function(){ //Клик на игровом поле
	
		if( $(this).data('state') == 0 && click_flag == 1 ){ //Если ячейка закрыта
		
			if( count_click == 0 ){ //Если первый клик по закрытому полю
				count_click++;
				last_img = $(this).attr('class');
				$(this).data('state',1).attr('data-state',1).css('backgroundImage', 'url(' + img_root + last_img.substr(3,1) + '.jpg)');
			}else{
			
				//Если картинки совпадают
				if( last_img == $(this).attr('class')  ){
					$('.' + last_img).data('state',2).attr('data-state',2).css('backgroundImage', 'url(' + img_root + last_img.substr(3,1) + '.jpg)');
				}else{
				
					$(this).data('state', 1).attr('data-state',1).css('backgroundImage', 'url(' + img_root + $(this).attr('class').substr(3,1) + '.jpg)');

					 click_flag = 0;
					
					function hide_img() { //Делаем задержку
						$('.igra_pamyat div').each(function(){
							if( $(this).data('state') == 1 ){
								$(this).data('state',0).attr('data-state',0).css('backgroundImage', 'none');
							}
						});
						 click_flag = 1;
					}
					setTimeout(hide_img, 1000);
				}
				count_click = 0;
			}
		}
	});
});
</script>
</head>
<body>

	<div class="igra_pamyat">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<center>
		<script type="text/javascript"> var curent_url = document.URL; document.write("<a class='button' href='" + curent_url + "'>Начать сначала</a>"); </script>	
	</center><br><br>
	<center style="clear:both;"><br>
	</center>
</body>
</html>
Заранее спасибо!
ArtemWEB вне форума Ответить с цитированием
Старый 19.12.2018, 21:29   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от ArtemWEB Посмотреть сообщение
Немного переделать игру

Прошу вас помочь мне, недопрограммисту с простой задачей.
Тёма, а кто Вам сказал, что это "немного" переделать и что это "простая" задача?
Тут нужно много чего переделать.
Главное, нужно начать с расстановки картинок на карте - ведь там не по три картинки, а по две.
Потом, очевидно, что поле 4*4 никогда не удасться заполнить полностью по три картинки. Ну и логику надо немного усложнить. Закрывать не две картинки, а две или три (смотря где пошло не совпадение).
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переделать немного программу kisiy Помощь студентам 5 28.10.2015 00:21
Немного переделать *AmiDaMaRu C++ Builder 0 02.11.2011 13:29
немного переделать (Делфи7) Joxter Помощь студентам 7 30.11.2008 22:16
немного переделать задание braza Паскаль, Turbo Pascal, PascalABC.NET 1 09.05.2008 21:23