[Разработка веб-сайтов, CSS, Программирование, HTML] Книга-игра Гарри Гаррисона на HTML
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Привет всем! Еще со школьных времен очень люблю фантастику. В те далекие времена мне больше всего нравился цикл романов Гарри Гаррисона о Стальной Крысе. Как-то решил я на выходные взять домой из школьной библиотеки подшивку журнала "Если". Просматривая журналы, обнаружил в одном из них книгу-игру вышеупомянутого фантаста. Называется произведение "Стань Стальной Крысой" и является текстовым квестом, в котором читатель по ходу сюжета должен выбирать варианты действий из предложенных. Особенно интересно было бродить в лабиринте. Туда без блокнота и карандаша не стоило и соваться!Не так давно мне стало интересно, а есть ли в Интернете варианты реализации этой игры на каких-либо языках программирования. Покопавшись в Сети, нашел вот этот сайт. На сайте можно увидеть скрипт, который генерирует готовый html-файл с книгой. Ссылка на исходник в скрипте никуда не ведет. Ресурс заблокирован. Меня интересовал не скрипт, а его продукт и что в этом продукте можно улучшить. Ниже под скриптом, в комментариях, есть две ссылки. По ним открывается уже готовая игра. Средствами браузера можно посмотреть исходный код.Внешний видВыглядит оригинальная версия следующим образом:
Довольно скучновато. Я решил добавить фоновое изображение, поменять цвет текстового фона, размер шрифта и внести некоторые другие изменения. Подробности будут ниже. Получилось вот это:
Согласитесь, что выглядит уже немного интереснее. Теперь подробнее об изменениях.ИзмененияМоя версия находится здесь. Оригинальная разработка состоит из одного файла, я же решил разнести код по разным файлам. Разметка в одном файле, а скрипты и стили в двух других.Появилась папка с изображениями. Там находятся фоновое изображение и изображение для монеты. Для тех кто не в курсе приведу пример первого появления этого элемента в книге:
Читатель нажимает на монетку и случайным образом перебрасывается в один из указанных разделов книги. В оригинале код этой монетки располагался прямо в css-файле:
i {
cursor: pointer;
background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQECAQECAgMCAgICAgQDAwIDBQQFBQUEB QUFBggHBQYHBgUFBwkHBwgICQkJBQcKCgoICggJCQj/wgALCAAtACwBAREA/8QAGwAAAgMBAQEAAAAAAAAAAAAABgcEBQgCAwn/2gAIAQEAAAAB+zdD Wxyy5FAAc4AtfBIfe0adbXjDJ+UuXGa9nRF1ti8ReInBsko//8QAHhAAAgMBAQADAQAAAAAAAAAABAUBAgMABhESExT/2gAIAQEAAQUC23rhXT9LxNx46Cv ykUyhMdGn2s2IYV6qi9uJ0MBHqwNDJGIzLHpMQOyy23J5nWJFMr9aeTcUoBiw/lC1YyTAZND7mD5cbNddfEAVaLfTLZwpnlr8w0/DPW55FSxt22y1eMqA5340I mWXp26ojyqc/wBNZSmXJBu//8QANRAAAgECAwQFCgcAAAAAAAAAAQIDAAQRITEFEhNBEBRRYaEiJDJSU3GBkbHhBkJDcsHC0f/aAAgBAQAGPwLFgWY5Ko1Y 1vXU5iX2cRw8dayt9/vbWsUZ4+4tvCsNJBqOiW7bPMpEOwff/KgjsVXiyEgyyejF8OdFrnat3PMeYmKD5LSx8TrGeAkbWo7tZmYqccCcjUNzFnG67wq0jGixL9K2 YqjzdZDLIfcMAPHw6Ix+YvRq4tZv0Z9we4qrf2q2jnUvcRebS9zrl4jA0E4W7HiDrnkcanS3Q70Z3W54HCg7XflgeguYrhKcF1Y9g5mr7ahUxxz3bsgPYFVfqpq/2r aw8VpFTirjpun0vkT8qZYCt2VALKh8oD3ULYR8FPUAwxP81iIuqwevJ5K/eoPw/sKUvdSk9bm9ggOp9XuGpyq02bZpuW0KCNR0SX1lOdnXAXQDeTly5acjTWnX 7iXBeHiLhlGOWeHw8a6xcbae1XcCtw48ZGH7mJw05Cuq7Ot+ChO87E4tI3ax5no//8QAIxABAAEDBAICAwAAAAAAAAAAAREAITFBUWGBEHGRobHh8P/aAAgB AQABPyEqxIGdgVfUsJ+Ru6gr73E/JlqZ5yH4hx1FNLcYbJueByIk0WF7E+qLSPukAzuOhxQ2XA7eIgpxNKh4mzFl5qU2VaGpHNMPBcE6UzklnNtQPJc6r2mfg/LyD0 H78Qb26cP5Kq0e745LoKYNx4vQZaYpG8I4IGJ9NXxDiMb26dNGYrOxr/B4cCmRDpTYK7Qdh4c0owRRcCOuIS+KSNRXOjKpqXev7Yaz9CWrIs9hBjaZWuCSLV6n FkGfbmvunXUnUitIcWA4oVjEQY3zu1o9mPoOicwXIG9RPIIHstu274//2gAIAQEAAAAQ2dRilY//xAAhEAEBAAICAgMAAwAAAAAAAAABEQAhMUFRYRBxgZGhwf/ aAAgBAQABPxCWwNoyhKHSqoAKoFyNtZF/Ggp5TeHJYaOLr3/oYqGcsVdn0/b3llDWp5X2cUdi76XCLvgQuH7VnJHWMFrCpmiO1uCq5PGT7rUN6R+3ASpkpRBA DZpsNi1wp72Lwl4AKM6c5+K8UCqnY0fY5YWk9kv6TGNaoB9kOE+G/lT8LF/k4NnJgUQ3s0thUGxBwMpLQDQaLlWnddQSJsOnKgTTCGICgXiXGrMihvNBj7PI4Kk PKg1HoC/1zjTHn2P0ezQTkwAlegiHQE2iKtFDBaAq17SIHaW6x4rugOBoqKtKub+vSsjRplWzSnRjAnKRqMeUdR0AB+C0A61Tsq9riCIgEiJRMMifRjYvlnAnk5eelvIr ZUqRz3rYO3LAmNdBkFRMXKK4ZalhVTlfj//Z');
display: block;
width: 44px; height: 45px;
margin-top: 10px;
}
В разметке это выглядело так:
<i onclick="Coin([32,118])" title="ДОСП"></i>
Ну и, собственно, в браузере:
Функция Coin у меня осталась практически без изменений:
function coin(n) {
location.hash = '#a' + n[Math.floor(Math.random() * n.length)];
}
Только имя функции написал с маленькой буквы. Отображение монетки я переписал, используя тег img:
<img src="images/coin.png" onclick="coin([190,277])" title="ДОСП"></img>
В файле стилей немного увеличил изображение монетки:
img {
cursor: pointer;
display: block;
width: 55px; height: 55px;
margin-top: 10px;
}
Внес изменения в фон и текстовую область:
html {
background: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
body {
background: #EDDDB5;
color: black;
font: 20px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif;
padding: 20px;
margin: 100px;
}
header {
font-size: 25px;
margin: 0 0 20px;
padding: 0 0 5px;
border-bottom: 2px solid #ccc;
color: #DD5F5F;
}
В оригинале вышеприведенный фрагмент имел такой вид:
html {
background: white;
}
body {
background: #eee;
color: black;
font: 14px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif;
padding: 20px;
margin: 100px;
}
header {
font-size: 25px;
margin: 0 0 20px;
padding: 0 0 5px;
border-bottom: 2px solid #ccc;
color: #ccc;
}
Также были исправлены несколько ошибок связанных с появлением монеты в разделах, где она не нужна. Видимо, создающий скрипт по ошибке запихивал монетку не туда куда надо. Вот пример:
<i onclick="Coin([80])" title="ДОСП"></i>
Вместо этого должно быть:
Идём дальше? [<a href="#a80">80</a>]
В конце html-файла был удален подвал и другие элементы, чтобы не портить внешний вид.Пожалуй, мне больше нечего рассказать об этой разработке. До встречи в следующих постах!
===========
Источник:
habr.com
===========
Похожие новости:
- [Open source, Программирование, Геоинформационные сервисы, Визуализация данных, Научно-популярное] Google Earth Engine (GEE) как общедоступный каталог больших геоданных
- [Ненормальное программирование, SQL, PowerShell, Microsoft SQL Server, Администрирование баз данных] Email Chart — это вам не ASCII Art
- [Ненормальное программирование, Программирование, Компиляторы, C] Один бинарник, любое окружение. Магия чистого C
- [Open source, Учебный процесс в IT, Управление персоналом, Карьера в IT-индустрии] Ваша любовь к разработке в первую очередь выгодна работодателю (перевод)
- [Разработка веб-сайтов, JavaScript, Angular, TypeScript] Семилетними шагами: миграция с JSP + Angular JS на Angular 2+
- [Программирование, C++, C, Разработка под Linux] Приёмы неблокирующего программирования: полные барьеры памяти (перевод)
- [Научно-популярное, Энергия и элементы питания, Нанотехнологии, Физика] Наногенераторы: путь к автономности электронных устройств
- [.NET, C#, Программирование микроконтроллеров, Интернет вещей, DIY или Сделай сам] .NET nanoFramework — платформа для разработки приложений на C# для микроконтроллеров
- [Старое железо, Сотовая связь] Ericsson A1018s: твой первый мобильник
- [Научно-популярное] Не все мы вышли из воды или еще одно предположение, почему до сих пор не нашли инопланетян
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_programmirovanie (Программирование), #_html, #_programmirovanie (программирование), #_kniga (книга), #_knigaigra (книга-игра), #_vebrazrabotka (вебразработка), #_html, #_css, #_blog_kompanii_itsoft (
Блог компании ITSOFT
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_programmirovanie (
Программирование
), #_html
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:20
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Привет всем! Еще со школьных времен очень люблю фантастику. В те далекие времена мне больше всего нравился цикл романов Гарри Гаррисона о Стальной Крысе. Как-то решил я на выходные взять домой из школьной библиотеки подшивку журнала "Если". Просматривая журналы, обнаружил в одном из них книгу-игру вышеупомянутого фантаста. Называется произведение "Стань Стальной Крысой" и является текстовым квестом, в котором читатель по ходу сюжета должен выбирать варианты действий из предложенных. Особенно интересно было бродить в лабиринте. Туда без блокнота и карандаша не стоило и соваться!Не так давно мне стало интересно, а есть ли в Интернете варианты реализации этой игры на каких-либо языках программирования. Покопавшись в Сети, нашел вот этот сайт. На сайте можно увидеть скрипт, который генерирует готовый html-файл с книгой. Ссылка на исходник в скрипте никуда не ведет. Ресурс заблокирован. Меня интересовал не скрипт, а его продукт и что в этом продукте можно улучшить. Ниже под скриптом, в комментариях, есть две ссылки. По ним открывается уже готовая игра. Средствами браузера можно посмотреть исходный код.Внешний видВыглядит оригинальная версия следующим образом:  Довольно скучновато. Я решил добавить фоновое изображение, поменять цвет текстового фона, размер шрифта и внести некоторые другие изменения. Подробности будут ниже. Получилось вот это:  Согласитесь, что выглядит уже немного интереснее. Теперь подробнее об изменениях.ИзмененияМоя версия находится здесь. Оригинальная разработка состоит из одного файла, я же решил разнести код по разным файлам. Разметка в одном файле, а скрипты и стили в двух других.Появилась папка с изображениями. Там находятся фоновое изображение и изображение для монеты. Для тех кто не в курсе приведу пример первого появления этого элемента в книге:  Читатель нажимает на монетку и случайным образом перебрасывается в один из указанных разделов книги. В оригинале код этой монетки располагался прямо в css-файле: i {
cursor: pointer; background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQECAQECAgMCAgICAgQDAwIDBQQFBQUEB QUFBggHBQYHBgUFBwkHBwgICQkJBQcKCgoICggJCQj/wgALCAAtACwBAREA/8QAGwAAAgMBAQEAAAAAAAAAAAAABgcEBQgCAwn/2gAIAQEAAAAB+zdD Wxyy5FAAc4AtfBIfe0adbXjDJ+UuXGa9nRF1ti8ReInBsko//8QAHhAAAgMBAQADAQAAAAAAAAAABAUBAgMABhESExT/2gAIAQEAAQUC23rhXT9LxNx46Cv ykUyhMdGn2s2IYV6qi9uJ0MBHqwNDJGIzLHpMQOyy23J5nWJFMr9aeTcUoBiw/lC1YyTAZND7mD5cbNddfEAVaLfTLZwpnlr8w0/DPW55FSxt22y1eMqA5340I mWXp26ojyqc/wBNZSmXJBu//8QANRAAAgECAwQFCgcAAAAAAAAAAQIDAAQRITEFEhNBEBRRYaEiJDJSU3GBkbHhBkJDcsHC0f/aAAgBAQAGPwLFgWY5Ko1Y 1vXU5iX2cRw8dayt9/vbWsUZ4+4tvCsNJBqOiW7bPMpEOwff/KgjsVXiyEgyyejF8OdFrnat3PMeYmKD5LSx8TrGeAkbWo7tZmYqccCcjUNzFnG67wq0jGixL9K2 YqjzdZDLIfcMAPHw6Ix+YvRq4tZv0Z9we4qrf2q2jnUvcRebS9zrl4jA0E4W7HiDrnkcanS3Q70Z3W54HCg7XflgeguYrhKcF1Y9g5mr7ahUxxz3bsgPYFVfqpq/2r aw8VpFTirjpun0vkT8qZYCt2VALKh8oD3ULYR8FPUAwxP81iIuqwevJ5K/eoPw/sKUvdSk9bm9ggOp9XuGpyq02bZpuW0KCNR0SX1lOdnXAXQDeTly5acjTWnX 7iXBeHiLhlGOWeHw8a6xcbae1XcCtw48ZGH7mJw05Cuq7Ot+ChO87E4tI3ax5no//8QAIxABAAEDBAICAwAAAAAAAAAAAREAITFBUWGBEHGRobHh8P/aAAgB AQABPyEqxIGdgVfUsJ+Ru6gr73E/JlqZ5yH4hx1FNLcYbJueByIk0WF7E+qLSPukAzuOhxQ2XA7eIgpxNKh4mzFl5qU2VaGpHNMPBcE6UzklnNtQPJc6r2mfg/LyD0 H78Qb26cP5Kq0e745LoKYNx4vQZaYpG8I4IGJ9NXxDiMb26dNGYrOxr/B4cCmRDpTYK7Qdh4c0owRRcCOuIS+KSNRXOjKpqXev7Yaz9CWrIs9hBjaZWuCSLV6n FkGfbmvunXUnUitIcWA4oVjEQY3zu1o9mPoOicwXIG9RPIIHstu274//2gAIAQEAAAAQ2dRilY//xAAhEAEBAAICAgMAAwAAAAAAAAABEQAhMUFRYRBxgZGhwf/ aAAgBAQABPxCWwNoyhKHSqoAKoFyNtZF/Ggp5TeHJYaOLr3/oYqGcsVdn0/b3llDWp5X2cUdi76XCLvgQuH7VnJHWMFrCpmiO1uCq5PGT7rUN6R+3ASpkpRBA DZpsNi1wp72Lwl4AKM6c5+K8UCqnY0fY5YWk9kv6TGNaoB9kOE+G/lT8LF/k4NnJgUQ3s0thUGxBwMpLQDQaLlWnddQSJsOnKgTTCGICgXiXGrMihvNBj7PI4Kk PKg1HoC/1zjTHn2P0ezQTkwAlegiHQE2iKtFDBaAq17SIHaW6x4rugOBoqKtKub+vSsjRplWzSnRjAnKRqMeUdR0AB+C0A61Tsq9riCIgEiJRMMifRjYvlnAnk5eelvIr ZUqRz3rYO3LAmNdBkFRMXKK4ZalhVTlfj//Z'); display: block; width: 44px; height: 45px; margin-top: 10px; } <i onclick="Coin([32,118])" title="ДОСП"></i>
 Функция Coin у меня осталась практически без изменений: function coin(n) {
location.hash = '#a' + n[Math.floor(Math.random() * n.length)]; } <img src="images/coin.png" onclick="coin([190,277])" title="ДОСП"></img>
img {
cursor: pointer; display: block; width: 55px; height: 55px; margin-top: 10px; } html {
background: url(images/background.jpg); background-repeat: no-repeat; background-size: cover; } body { background: #EDDDB5; color: black; font: 20px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif; padding: 20px; margin: 100px; } header { font-size: 25px; margin: 0 0 20px; padding: 0 0 5px; border-bottom: 2px solid #ccc; color: #DD5F5F; } html {
background: white; } body { background: #eee; color: black; font: 14px/1.4em Helvetica, 'Trebuchet MS', Arial, sans-serif; padding: 20px; margin: 100px; } header { font-size: 25px; margin: 0 0 20px; padding: 0 0 5px; border-bottom: 2px solid #ccc; color: #ccc; } <i onclick="Coin([80])" title="ДОСП"></i>
Идём дальше? [<a href="#a80">80</a>]
=========== Источник: habr.com =========== Похожие новости:
Блог компании ITSOFT ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_css, #_programmirovanie ( Программирование ), #_html |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:20
Часовой пояс: UTC + 5