Канадский разработчик совместил игру-платформер с обучением азам CSS Статьи редакции
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.
Я всегда знал, что навыки css мне когда-нибудь пригодятся в жизни
Присоединяюсь
Не спс, я лучше так!
Какой-то профессиональный юмор.
Хотел тоже что-нибудь заскринить смешное, но вспомнил что верстал до этого восемь часов подряд и приуныл.
За этой игрушкой таится прекрасное технологическое будущее.
(или не таится:{ )
<div style='left:300px;width:300px;bottom:120px;-webkit-transform: rotate(45deg);'></div>
и мы повернули див еще на 45 градусов =)
Тайное послание
<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>
Комментарий недоступен
Добавь в портфолио
<div style='left:190px;top:200px; width: 800px; height: 600px; background: url(http://kp.ru/share/i/12/9626279/big.jpg) no-repeat'; ></div>
Комментарий недоступен