Создаём простую мини игру – угадай знаменитого актёра по фотографии, на PHP и JavaScript и выводим её на своём сайте.

Это простая игра, из серии на экране показывается изображение с ответами и нужно выбрать правильный вариант. Есть много подобных игр с разными вариациями, можно угадывать страны, города, животных или предметы. В моей игре на экране показывается фотография и три варианта ответа в виде кнопок с ФИО актёра, из которых один правильный.

Посмотреть пример игры угадай знаменитость >>>

ugaday-znamenitost
Опишу несколько основных модулей создания данной игры.

  • Логику я реализовываю на PHP и немного JavaScript где данные передаю формой POST с использование Cookie.
  • Сравниваю POST и Cookie если совпали то добавляем +1 в куку Ugadali иначе в +1 в куку NeUgadali.
  • Если счётчик Ugadali набираем 3 тогда созданием куки (вы угадали), редирект на этот же сайт где пободаем в блок c подготовленным нами сценарием.
  • Если счётчик NeUgadali набираем 3 тогда созданием куки (вы Не угадали) , редирект на этот же сайт где попадаем в блок с подготовленным к этому случаю сценарием.

Угадай знаменитость Первым делом я создаю два массива:
с фотками и массив с значениями (фамилия и имя актёра).
Оба массива должны соответствовать по ключу – значение array-фотки с значением array-ФИО.
Далее идёт функция которая выбирает случайно три фотки из массива при помощи стандартной функции array_rand().
Из трёх выбранных случайно выбираем одну, которую и выводим.

Схема вывода на экран которая зависит от куки и поста
выглядит так:

Для того чтобы не отправлялась форму, при Обновлении страницы ( F5 или Ctrl + F5 ), я после каждой операции делаю редирект на этот фал(перезапускаю его снова).
Можно через PHP

или через JavaScript.

Если игрок не угадывает 3 раза я затемняю экран, блокирую возможность играть и включаю обратный таймер ну скажем на 30 секунд, и чтобы человек не смог схитрить (выйти из браузера, а потом снова зайти)я ставлю срок жизни куки на 10 минут.
Эту штуку я сделал на JS вот так:

Ещё у меня есть функция вывода на экран значения 5-попыток и угадал или нет ( маленькие иконки кружочки) я его сделал тоже на PHP и принцип его работы, как и всё гениальное тоже прост:
По умолчанию значение пустое – класс (пустой кружочек), если угадал то кука Marker + цифра счётчика(тоже кука) выводит класс угадал и если иначе то (картинку не угадал).

Попыток:

Функция для обнуления всех кук – если Угадываем 3 раза или не угадываем 3 раза то запускаем:

Скачать исходники угадай знаменитость

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

Добавить комментарий