Инструкции по Javascript для начинающих пользователей

Я сделал игру, в которой есть 2 поля ввода, кнопка "Далее" и кнопка "Отправить". Игра ориентирована на молодую аудиторию (6-8 лет), и я думаю, что было бы полезно визуально объяснить, как использовать все различные функции в игре. Есть ли простой способ сделать изображение всплывающим прямо при открытии окна, но только для начинающих пользователей?

Источник

2 ответа

Решение

Это отличный пример использования файлов cookie. Логика вашего сайта будет такой:

  • Когда ваша страница загрузится, проверьте, существует ли ваш cookie
  • Если файл cookie существует, не показывайте инструкции
  • Если cookie не существует, покажите инструкции и создайте cookie

Ниже приведен пример, который можно адаптировать для вашей страницы: http://www.w3schools.com/js/js_cookies.asp

Используйте следующие функции для создания и чтения файлов cookie:

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

Включите функцию загрузки в тег вашего тела:

<body onload="checkCookie()">

Используйте эту функцию, чтобы проверить, существует ли cookie, и выберите, отображать ли инструкции:

function checkCookie()
{
var return_visitor=getCookie("return_visitor");
if (return_visitor!=null && return_visitor!="")
  {
  // Don't show the instructions
  }
else 
  {
    alert("Instructions: This is how you play!");
    setCookie("return_visitor",1,365);
  }
}
Источник

Я нашел один интересный способ сделать что-то похожее на то, что я хотел. Вы должны нажать на ссылку, но она может просто сказать "инструкции".

http://designm.ag/previews/jquery-dialog-box/

Источник
Другие вопросы по тегам