Учебник Математики

Игра

by Станислав Некрасов

HTML

<div class="bar">
  <div title="Есть ли у Вас Учебник по Математике" class="bar-math-book">Нет</div>
  <div title="Уровень знания Математики" class="bar-math-learn">0</div>
</div>

<div class='frame' id="intro">
  <a href="http://metlik.ru/" target="_blank">
    <img width="64" height="64" src="http://metlik.ru/logo.svg" alt="Логотип Метлика">
    <div class="metlik-name">
      Метлик
    </div>
  </a>
  Представляет
</div>

<div class="frame" id="intro2">
  Учебник<br>
  Математики
</div>

<div class="game" id="start">
  Вы внезапно очутились на необитаемом острове. 
  Вы не помните, что произошло и как Вы там очутились, но Вам нужно выжить.
  На земле рядом с Вами Вы видите записку.<br>
  Что вы хотите сделать?
  <div class="actions">
    <a class="action" href="#frame2">
      Взять и прочитать записку.
    </a>
    <a class="action" href="#frame3">
      Не читать записку и продолжить осматривать остров.
    </a>
  </div>
</div>

<div class="game" id="frame2">
  Вы берёте записку и читаете:<br>
  """<br>
  Привет, дорогой друг! 
  Я написал эту записку, чтобы помочь тебе выжить здесь.
  Знай, на этом острове и в жизни в целом очень важна такая наука, как 
  <span class='math-word'>Математика</span>.
  Она поможет тебе выжить на этом острове. 
  Надеюсь ты очень хорошо знаешь 
  <span class='math-word'>Математику</span>.<br>
  Рядом с этой запиской лежит 
  <span class='math-word'>Учебник по Математике</span>. 
  Он поможет тебе с выживанием. 
  Удачного выживания! 
  Ни за что не уничтожай этот учебник.<br>
  <br>
  Анонимно<br>
  """<br>
  <br>
  Вы смотрите на землю и видите там 
  <span class='math-word'>Учебник по Математике</span>,
  странно, что Вы его раньше не заметили. 
  Что будете делать?
  <div class="actions">
    <a class="action" href="#frame4">
      Взять Учебник по Математике.
    </a>
    <a class="action" href="#frame5">
      Не брать Учебник по Математике.
    </a>
  </div>
</div>

<div class="game" id="frame3">
  Вы решили не читать...

CSS

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #fff;
}

body {
  background: #2c3e50;
  color: #fff;
  font-family: Ubuntu, sans-serif;
}

.frame {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}

.game {
  position: fixed;
  left: 0;
  top: 48px;
  width: 100vw;
  height: calc(100vh - 48px);
  display: none;
  padding: 15px;
  color: #fff;
  text-align: justify;
  font-family: monospace;
  font-size: 18px;
}

.actions {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 15px;
}

.action {
  display: block;
  color: #f1c40f;
  font-family: Ubuntu, sans-serif;
  font-size: 16px;
}

.math-word {
  color: #27ae60;
}

.action:hover {
  text-decoration: underline;
}

.bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 48px;
  background: #34495e;
  display: none;
  font-family: monospace;
  font-size: 18px;
  padding: 2px 5px;
}

.bar > div {
  margin-left: 5px;
  display: inline-block;
}

.bar > div:after {
  content: ";";
}

.bar-math-book:before {
  content: "УпМ: ";
}
.bar-math-learn:before {
  content: "УзМ: ";
}

:target {
  display: block;
}

#intro {
  opacity: 0;
  padding: calc(50vh - 50px) calc(50vw - 125px);
  transition: opacity 2s;
}
#intro {
  text-align: center;
}
#intro .metlik-name {
  font-size: 48px;
  font-weight: bold;
  line-height: 64px;
  float: right;
}

#intro2 {
  opacity: 0;
  text-align: center;
  padding: calc(50vh - 50px) 10px;
  font-size: 40px;
  line-height: 50px;
  transition: opacity 2s;
  font-weight: bold;
  font-family: monospace;
}

JavaScript

/* 
intro - Заставка "Метлик представляет"
intro2 - Заставка "Учебник Математики"
start - Начальная сцена
frame2 - Взять и прочитать записку
frame3 - Не читать записку и продолжить осматривать остров
frame4 - Взять Учебник по Математике
frame5 - Не брать Учебник по Математике
frame6 - Прочитать Учебник по Математике
frame7 - Начать выживать
*/

goTo('intro2');

let mathBook = 0;
let mathLearn = 0;

function goTo (hash='intro') {
	window.location.hash = '#' + hash;
}

let $ = s => document.querySelectorAll(s);

(window.onhashchange = function () {
	let hash = window.location.hash.substr(1);
  console.log(hash);
  if (hash == '') return goTo('intro');
  
  if (hash == 'intro') {
  
  	$('#intro')[0].style.opacity = 1;
    setTimeout(_=>{
    	$('#intro')[0].style.opacity = 0;
      setTimeout(_=>{
      	goTo('intro2');
      }, 2000);
    }, 3000);
    
  } else if (hash == 'intro2') {
  
  	$('#intro2')[0].style.opacity = 1;
    setTimeout(_=>{
    	$('#intro2')[0].style.opacity = 0;
      setTimeout(_=>{
      	goTo('start');
        $('.bar')[0].style.display = 'block';
      }, 2000);
    }, 3000);
    
  } else if (hash == 'frame4') {
  
  	mathBook = 1;
  	$('.bar-math-book')[0].innerHTML = 'Есть';
  
  } else if (hash == 'frame6') {
  
  	mathLearn += 1;	
    $('.bar-math-learn')[0].innerHTML = mathLearn;
    
  }
})();