Канадский разработчик совместил игру-платформер с обучением азам 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.
Слабый Петя
Тайное послание
<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>
Комментарии