29 фев 2016 29.02.2016

Канадский разработчик совместил игру-платформер с обучением азам CSS Статьи редакции

'Super Markup World' tests your HTML chops in an…

If using HTML to navigate a Mario-inspired world sounds like the perfect platformer for you…

27 февраля канадская студия DaGGaSoft выпустила игру под названием Super Markup World (по аналогии c Super Mario World).

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

Однако, в отличие от Mario, задача игрока в Super Markup World стоит не только в манипуляциях с самим героем, но и в создании вспомогательных платформ, с помощью которых он сможет выполнить свою задачу.

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

Например, код «<div style='left:300px;width:300px;bottom:120px'></div>» создаёт платформу длиной 300 пикселей, которая начинается с отступом в 500 пикселей от левого края и 180 от нижнего.

Со временем задача игрока становится всё сложнее, и ему нужно «возводить» всё больше и больше платформ. Задачу несколько упрощает то, что их количество ничем не ограничено.

CSS или каскадные таблицы стилей — формальный язык описания внешнего вида документа, который преимущественно используется для оформления внешнего вида веб-страниц, написанных с помощью языков HTML и XHTML.

8083 просмотров

14 14 комментариев

{"id":23939,"url":"https:\/\/tjournal.ru\/flood\/23939-css-game","title":"\u041a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0430\u0437\u0430\u043c CSS","services":{"vkontakte":{"url":"https:\/\/vk.com\/share.php?url=https:\/\/tjournal.ru\/flood\/23939-css-game&title=\u041a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0430\u0437\u0430\u043c CSS","short_name":"VK","title":"\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435","width":600,"height":450},"facebook":{"url":"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/tjournal.ru\/flood\/23939-css-game","short_name":"FB","title":"Facebook","width":600,"height":450},"twitter":{"url":"https:\/\/twitter.com\/intent\/tweet?url=https:\/\/tjournal.ru\/flood\/23939-css-game&text=\u041a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0430\u0437\u0430\u043c CSS","short_name":"TW","title":"Twitter","width":600,"height":450},"telegram":{"url":"tg:\/\/msg_url?url=https:\/\/tjournal.ru\/flood\/23939-css-game&text=\u041a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0430\u0437\u0430\u043c CSS","short_name":"TG","title":"Telegram","width":600,"height":450},"odnoklassniki":{"url":"http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/tjournal.ru\/flood\/23939-css-game","short_name":"OK","title":"\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438","width":600,"height":450},"email":{"url":"mailto:?subject=\u041a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043b \u0438\u0433\u0440\u0443-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u0440 \u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0430\u0437\u0430\u043c CSS&body=https:\/\/tjournal.ru\/flood\/23939-css-game","short_name":"Email","title":"\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443","width":600,"height":450}},"isFavorited":false}

{ "author_name": "Вадим Елистратов", "author_type": "self", "tags": [], "comments": 14, "likes": 52, "favorites": 26, "is_advertisement": false, "subsite_label": "flood", "id": 23939, "is_wide": true, "is_ugc": true, "date": "Mon, 29 Feb 2016 18:02:41 +0300", "is_special": false }

14 комментариев

Популярные

По порядку

Написать комментарий...

Слабый Петя

29 фев 2016

Я всегда знал, что навыки css мне когда-нибудь пригодятся в жизни

Ответить

Населенный хичхакер

Слабый

29 фев 2016

Присоединяюсь

Ответить

Женский американец

29 фев 2016

Ответить

Дежурный инструмент

29 фев 2016

Ответить

Женский американец

29 фев 2016

Не спс, я лучше так!

Ответить

Заметный цвет

29 фев 2016

Какой-то профессиональный юмор.

Ответить

Внимательный томагавк_два

29 фев 2016

Хотел тоже что-нибудь заскринить смешное, но вспомнил что верстал до этого восемь часов подряд и приуныл.

Ответить

Контрольный браслет

29 фев 2016

За этой игрушкой таится прекрасное технологическое будущее.
(или не таится:{ )

Ответить

Излишний ихтиандр

29 фев 2016

<div style='left:300px;width:300px;bottom:120px;-webkit-transform: rotate(45deg);'></div>
и мы повернули див еще на 45 градусов =)

Ответить

Слабый Петя

Кирилл

29 фев 2016

Тайное послание
<div style='left:200px;bottom:500px;transform:rotate(45deg);'></div>
<div style='left:200px;bottom:500px;transform:rotate(-45deg);'></div>
<div style='left:410px;bottom:540px;transform:rotate(45deg);width: 90px;'></div>
<div style='left:400px;bottom:500px;transform:rotate(-45deg);'></div>
<div style='left:550px;bottom:500px;transform:rotate(90deg);'></div>
<div style='left:700px;bottom:500px;transform:rotate(90deg);'></div>
<div style='left:610px;bottom:500px;transform:rotate(-45deg);'></div>
<div style='left:710px;bottom:600px;width:50px'></div>

Ответить

Невидимый кубок

Слабый

29.02.2016

Комментарий удален по просьбе пользователя

Ответить

Слабый Петя

Kat

29.02.2016

Добавь в портфолио

Ответить

Импортный Слава

29 фев 2016

Ответить

Эффективный теркин30см

1 мар 2016

азазам ЦСС?

Ответить

Написать комментарий...

Обсуждаемое

Интернет

Ролик BadComedian о фильме «Непосредственно, Каха» временно заблокировали на ютубе из-за авторских прав

Обычно этот пользователь жалуется на контент, связанный с Первым каналом.

410

111

Разборы

«Дискриминационный» алгоритм: история скандала в Нидерландах, где тысячи семей по ошибке обвинили в мошенничестве

Налоговая требовала вернуть по несколько десятков тысяч евро, но признала ошибку. Поздно: многие уже потеряли жильё, работу и брак.

Популярное за три дня

Истории

Кратковременное счастье: перебежчица из КНДР стала звездой в Южной Корее, а затем бесследно пропала

Она построила новую жизнь на критике режима Ким Чен Ына, но исчезла после «возвращения» на родину.

187

Новости

На Навального подали в суд владельцы бюро переводов

Они попросили взыскать с политика 10 миллионов рублей за причинение морального вреда: по их словам, Навальный препятствует работе бюро и Владимира Путина. Об этом сообщили Открытые Медиа.

127

Интернет

Ролик BadComedian о фильме «Непосредственно, Каха» временно заблокировали на ютубе из-за авторских прав

Обычно этот пользователь жалуется на контент, связанный с Первым каналом.

410

Еженедельная рассылка

Одно письмо с лучшим за неделю

Проверьте почту

Отправили письмо для подтверждения