Ретро кодирование
Сделать игру на HTML5, но сейчас 2011 год
Часть 1. Узнайте, какие приемы нам приходилось использовать в свое время, чтобы заставить Javascript выполнять наши требования.
Я получил свою первую книгу по Javascript в 2012–2013 годах, и она взорвала мой мозг. Я возился с Javascript год или два, поэтому, когда у меня была книга, она не была чем-то новым. Тем не менее, было несколько удивительных вещей, которые я узнал из него.
Когда отключилось электричество и мои игры не запустились, я решил зайти в свои виджеты и узнать, из чего они сделаны. Да, виджеты. Те мелочи, которые когда-то появлялись на компьютерах Mac.
В течение недели или около того я составлял диаграмму, которая измеряла мою среднюю производительность по сравнению с рандомом, где я переворачивал орел или решку и смотрел, сможет ли человек победить рандом. (Спойлер: у меня не получилось, но, по крайней мере, мне было весело.)
К тому времени, когда я получил свою первую книгу, я уже имел дело с холстом HTML5. Я научился делать
https://www.oreilly.com/library/view/foundation-html5-animation/9781430236658/
Жизнь без стрелочных функций
"Функция даже не принадлежит объекту!"
В то время не было стрелочных функций, и я не предпочитаю их для некоторых вещей.
Стрелочные функции не берут «это» у ближайшего родителя объекта.
Я этого не знал.
Это означает, что если вы сделаете это:
function Vec(x,y) {
this.x = x;
this.y = y;
}
Vec.prototype.move = function(a,v) {
this.x += Math.sin(a) * v;
this.y += Math.cos(a) * v;
}
let v = new Vec(0,0);
let move = v.move;
move(Math.PI / 2,4);
… не получится!
Увидев это, у меня возникли проблемы с доверием, ТБХ. Как будто вы можете взять свою руку, отдать ее другому человеку, и он начнет использовать вашу руку, как будто это ничего. Мол, ты не должен уметь этого делать. Предполагается, что они продолжают работать, а не только в контексте объекта.
Я имею в виду, это означает, что вы можете просто сделать:
v2 = {
x: 0,
y: 0,
move: v.move
}
v2.move(2,3);
И это работает! Функция даже не принадлежит объекту! Какая афера!
Тут я подумал, что если поместить функцию в объект, то она будет принадлежать объекту навсегда, и не сможет ничего сделать ни с какими другими функциями или объектами, а сможет сделать это только с одной единственной объект.
Это душераздирающе.
Но это означает несколько вещей. Теперь мы можем иметь общий реестр функций и просто извлекать их из него для определения объектов.
const FN = {
move : function move() {...},
moveBy : function moveBy(x,y) {},
hit : function hit(dmg) { this.health -= dmg; }
}
function Vec(x,y) {
this.x = x;
this.y = y;
}
Vec.prototype.move = FN.move;
Vec.prototype.moveBy = FN.moveBy;
function Mob(x,y) {
Vec.call(this,x,y); // the old way of writing 'super'
this.health = 10;
}
Mob.prototype = Object.create(Vec.prototype); // the old way of extending functions
Mob.prototype.hit = FN.hit;
function Player(x,y) {
Vec.call(this,x,y); // the old way of writing 'super'
this.health = 15;
}
Player.prototype = Object.create(Vec.prototype); // the old way of extending functions
Player.prototype.hit = FN.hit;
Но так какой, черт возьми, смысл во всех этих прототипах? Кажется, он нам не нужен? Или что?
Есть цель; наследование. Как видите, прототип позволяет передавать прототип и ничего больше от объекта. Но почему? Я имею в виду, что вы могли бы просто написать действительно раздутые классы и передать все через главный объект. Но тогда у вас действительно раздутый код.
Итак, жизнь без стрелочных функций была не так уж и плоха. На самом деле было немного прохладно.
Чтобы узнать больше о душераздирающих различиях между стрелочными функциями и обычными функциями, прочитайте их здесь:
Меньше острот и плохих приемов
Стрелочные функции — не единственное, чего не хватало в Javascript. Недостаток знаний и внедрения оставил многие из общих функций, которые мы используем сегодня, не учитывались.
.карта()
Несмотря на то, что они могли быть доступны, большинство разработчиков придерживались циклов for вместо Array.prototype.map и forEach. Мне никогда не нравился forEach, и я тоже использовал циклы for, поскольку они давали мне большой контроль над кодом внутри. Вы не можете вырваться из .map(), потому что у него нет break, а return просто возвращает значение в массив. Если у вас есть бесполезно длинный массив, и вы хотите остановиться в определенной точке, он продолжит операцию.
На самом деле, в свое время я помню, как писал функцию с именем loop(a,fn), где она принимала массив и функцию в качестве аргумента, а затем перебирала массив с каждым элементом массива с помощью массива
Нет BigInt
Если вы помните, в то время была выпущена одна из первых крупных игр в режиме бездействия, набравшая популярность в 2013 году. Я, вероятно, сжег свой компьютер, когда эта игра работала всю ночь, но у нее были числа, значительно превышающие целочисленный лимит. Как? Я до сих пор не знаю. Но, возможно, они могли бы сделать что-то немного по-другому с BigInt.
Наборы
Хотя теория множеств не укладывается у некоторых людей в голове, для тех, кто изучал SQL, это самый быстрый способ управлять конечными значениями. Если бы вы хотели использовать теорию множеств, вам пришлось бы создавать каждое из множеств самостоятельно.
jQuery, Moment.js, но без CDN
В то время, если вам нужен был код, вам нужно было скачать его и поместить в тег скрипта.
Начальная загрузка? Что это такое?
Забудьте о Material UI, React, Bootstrap — даже слова не было в устах людей. Хотите использовать шаблоны? Скачайте Backbone.js, Angular. Хотите CSS? У нас есть некоторые JQueryUI.css, Blueprint, BlueTrip, который теперь является веб-сайтом для поиска заключенных, Boilerplate, который последний раз обновлялся в 2007 году, Elasticss, который теперь является тайским спортивным веб-сайтом, Elements, который не больше не существует, и множество других, и Пользовательский интерфейс Yahoo.
В то время было много людей, которые спрашивали: «Где я могу найти библиотеку css, в которой есть все, что мне нужно?» но я, однако, не любил библиотеки и даже не прикасался к ним примерно до 2017 года.
Подождите, вы хотите сказать, что теперь я могу хранить данные локально?
localStorage был только что выпущен с «современными» браузерами, что позволило людям, наконец, хранить хороший объем данных во внешнем интерфейсе и сохранять их между сеансами.
Зачем использовать HTML, если я могу сделать то же самое во Flash?
У меня был клиент, мой первый клиент, у которого был флеш-сайт. Да, это было дело. Веб-страница с заголовком в формате HTML и большой флэш-рамкой посередине, где она была заполнена анимацией, изображениями, интерактивными элементами, и все это:
<object type="application/x-shockwave-flash" ...></object>
Ей не нравилось, как медленно загружается приложение, и она хотела, чтобы оно работало на ее телефоне. Flash никогда не поставлялся с телефонами, и это к лучшему, поэтому возникла необходимость перенести ее сайт с flash, чтобы люди могли просматривать ее сайт со своих телефонов.
И нет, я не закончил сайт. Я не знал, о чем этот Wordpress-материал, о котором она говорила.
Так как же вы могли сделать игру в 2011 году с помощью HTML5?
Узнайте в следующей части этой серии. Я буду двигаться в направлении функционала/ООП. Ради сокращения кода мне придется перейти на ООП, но для генерации и рендеринга я буду использовать функциональное программирование, которое также сократит код.
Не пропустите последние уроки!
Я потратил много времени на написание этих руководств, потому что я заинтересован в успехе Svelte. Если вы хотите следить за моими уроками, подпишитесь на меня, и вам будут доставлены самые свежие уроки!
Ждем новых идей для контента!
Есть ли что-то, что вы хотите знать, как сделать в SvelteKit? Дайте мне знать в комментариях, и я приму во внимание ваше предложение и, вероятно, претворю его в жизнь с помощью учебника и Git.
Обо мне
Я Корббин Голдсмит, разработчик из маленького городка, и я увлечен созданием решений для малого бизнеса и в равной степени увлечен преподаванием.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
