Я воссоздал виртуальный сафари Джип Тимона и Пумба.

Ссылка на проект здесь

Как отказ от ответственности, я все еще студент и ни в коем случае не профессионал. Этот проект всегда был чем -то, чем я хотел сделать, когда стал знаком с дизайном пользовательского опыта и веб -разработке. Тем не менее, вместо того, чтобы прыгать и сразу же начинать этот проект, я хотел изучить все инструменты как можно больше, чтобы я создал конечный продукт, которым я гордился. Это то, чем я делюсь идеальным, нет. Вопрос, который я задал себе перед написанием этого поста, однако, заключается в том, вызывает ли мой проект те же эмоции, которые я испытал, сидящие скрещенными ногами на ковре перед телевизором Tube. Ответ на этот вопрос был бы неоспоримым Да Анкет

Это игра, найденная со второго DVD в DVD -наборе Lion King (изображенный синий диск). Игра очень простая выбирайте свой собственный приключение, где Тимон Мероркат и Пумбаа, вархог, останавливаются вдоль своего путешествия на сафари по Crossroads, где пользователь должен выбрать свое следующее направление для путешествий, влево или вправо. Каждый выбор будет иметь разные результаты, такие как попадание в пещеру, полную летучих мышей (OOF) или путешествовать через кладбище слона (очи). Поскольку это был DVD, пультом для DVD -плеер был то, как пользователь взаимодействовал и повлиял на то, что произойдет с Тимоном и Пумбаа.

Но Александр, что такое король льва?

Заверните свой компьютер, перейдите к предпочтительному потоковому сервису и посмотрите фильм. Шутки в сторону. Теперь иди.

Почему я воссоздал эту игру всех вещей?

Помимо ностальгии, так что игра может существовать на платформе, на которой каждый может взаимодействовать с ней, поскольку она должна была быть опытной, а не смотреть видео на YouTube о том, как кто -то другой играет на нем.

Вот общий порядок шагов, которые я предпринял для достижения конечного продукта.

Загружено и отредактировано видео на YouTube всей игры в несколько меньших клипов ( исходный клип ). Для этого я использовал Davinci Resolve, бесплатное программное обеспечение для редактирования, которое я использовал в прошлом для снятия коротких фильмов и других видео.
Создайте отзывчивый экран с HTML и CSS, в которых пользователь будет взаимодействовать с игрой. Я хотел, чтобы игра работала как в портретном, так и в режиме ландшафта на мобильном Итак, я использовал @media Queries и Ориентация: пейзаж так что игра будет работать правильно.
Выясните логику игры с JavaScript (это была самая сложная часть процесса, конечно). Я знал, что не было только одного пути, который мне нужно было пойти, чтобы добраться до рабочей версии, как и путь с решением проблем.

Сначала я поместил источники каждого из видеоклипов, которые я внес в массив, где функция захватит желаемое видео.

const videoList = [
  "./Videos/Safari_Intro.mp4",
  "./Videos/Safari_Food_Left.mp4",
  "./Videos/Safari_Food_Right.mp4",
  "./Videos/Safari_Stampede.mp4",
  "./Videos/Safari_Stampede_Left.mp4",
  "./Videos/Safari_Stampede_Right.mp4",
  "./Videos/Safari_Cave.mp4",
  "./Videos/Safari_Cave_Left.mp4",
  "./Videos/Safari_Cave_Right.mp4",
  "./Videos/Safari_End.mp4",
];

Я решил использовать Переключение утверждение как мозг, стоящий за выбором ( документация по операции переключения ). В программе есть три оператора общего коммутатора: одно для того, когда видео заканчивается, одна для левой кнопки, одна для правой кнопки.

 rightBtn.addEventListener("click", function () {
  switch (state) {
    case 0:
      hideButtons();
      showVideo(2);
      openFullscreen();
      state++;
      break;
    case 2:
      hideButtons();
      showVideo(5);
      openFullscreen();
      state++;
      break;
    case 4:
      hideButtons();
      showVideo(8);
      openFullscreen();
      state++;
      break;
    default:
      alert("Now how did you get here?");
  }
});

Последняя часть JavaScript, который мне нужен был, было открытие и закрытие полноэкранного. Я чувствовал, что игра гарантировала, что она будет автоматически полноэкранным, однако я предоставляю управления видео, если пользователь хочет просмотреть игру из полноэкранного.

function openFullscreen() {
  if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
  } else if (videoElement.mozRequestFullScreen) {
    /* Firefox */
    videoElement.mozRequestFullScreen();
  } else if (videoElement.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    videoElement.webkitRequestFullscreen();
  } else if (videoElement.msRequestFullscreen) {
    /* IE/Edge */
    videoElement.msRequestFullscreen();
  }
}

Поздравляю! Вы добрались до конца этого поста! Теперь иди и проверь проект здесь ! Не бойтесь поделиться своим мнением в обсуждении ниже, я бы хотел некоторую конструктивную критику. Теперь это абсолютное Окончательный версия? Неа. Я продолжаю планировать и повторять. Я могу даже добавить поездку на лодке Тимона и Пумба, которая также на DVD однажды.

Оригинал: “https://dev.to/gamedog9988/i-recreated-timon-and-pumbaa-s-virtual-safari-jeep-tour-for-the-web-3204”

Но Александр, что такое король льва?

Почему я воссоздал эту игру всех вещей?

Читайте ещё по теме: