$ rows: 4! global;
$ columns: 12! global;
$ gameObjects: 22;
$ tileSize: 48px;
$ walkSpeed: 1 с;
$ tilesPerSegment: 3;
$ tilesPerSegmentVertical: 7;
$ segmentHeight: $ tileSize * $ tilesPerSegmentVertical;
$ debug: false;
* {
box-size: border-box;
}
@ font-face {
font-family: pixles;
src: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF);
}
/ * ------------------------------------------------ ------------------------------------
Стиль игры
-------------------------------------------------- ------------------------------------- * /
body {
фон: # 141415;
переполнение: скрыто;
font-family: pixles;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
высота: 100vh;
margin: 0;
& .game {
width: $ tileSize * $ tilesPerSegment * $ columns;
позиция: абсолютная;
left: calc (50% - 72px);
право: 0;
top: calc (50% - 212px);
margin: auto;
ввод {
display: none;
}
// Конечные стили экрана
&_выиграть {
позиция: фиксированная;
left: 0;
top: 0;
фон: # 141415;
z-индекс: 9;
ширина: 100%;
высота: 100%;
непрозрачность: 0;
указатель-события: нет;
переход: все 1 с 0;
& __ inner {
позиция: абсолютная;
left: 0;
право: 0;
margin: auto;
ширина: 300 пикселей;
верх: 50%;
transform: translateY (-50%);
text-align: center;
непрозрачность: 0;
переход: все 1s 2s;
п {
белый цвет;
margin-bottom: 30px;
}
span {
белый цвет;
непрозрачность: 0,4;
}
a {
margin-bottom: 16px;
цвет: # 78f148;
text-align: center;
ширина: 100%;
display: block;
}
}
.персонаж {
ширина: 48 пикселей;
высота: 48 пикселей;
позиция: относительная;
left: -60px;
margin: auto;
фон: красный;
background: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorMainCharacter.gif');
анимация: walk-1 $ walkSpeed бесконечно;
z-index: 1;
background-position: 0 0;
transform: translateY (-50%) translateX ($ tileSize * ($ tilesPerSegment / 2) - 8);
переход: все $ walkSpeed линейные;
z-index: 1;
указатель-события: нет;
}
}
// Сильные стили инвентаря
& _inventory {
позиция: фиксированная;
z-индекс: 9;
left: 0;
белый цвет;
верх: 50%;
-webkit-transform: translateY (-50%);
font-size: 11px;
право: 0;
margin: auto;
left: -420px;
ширина: 140 пикселей;
padding-left: 15px;
transform: translateY (-50%);
высота: 64px;
курсор: указатель;
переход: все .6s .3s;
&: hover {
высота: 371px;
переход: все .6s .2s;
.вещь {
непрозрачность: 1;
left: 0px;
переход: все 0,3 с;
-webkit-filter: blur (0px);
&:Первый ребенок {
display: block;
}
}
}
h1 {
font-weight: normal;
размер шрифта: 12 пикселей;
}
img {
transform: масштаб (3);
рендеринг изображений: pixelated;
курсор: указатель;
transform-origin: 0 0;
&: hover {
}
}
&__вещь {
margin-top: 70px;
text-align: center;
позиция: относительная;
left: -24px;
ширина: 100%;
высота: 100%;
.вещь {
margin: 10px 0 30px 0;
display: none;
непрозрачность: 0;
left: 0px;
позиция: относительная;
переход: все 0s;
плыть налево;
margin-right: 10px;
ширина: 34%;
&: hover {
z-индекс: 15;
.подробности {
непрозрачность: 1;
наверх: -4px;
}
}
.название {
позиция: относительная;
top: 11px;
}
.подробности {
прокладка: 7px;
непрозрачность: 0;
border-radius: 4px;
позиция: абсолютная;
font-size: 13px;
text-align: center;
переход: все 0.2s .2s;
указатель-события: нет;
фон: белый;
цвет: # 141415;
ширина: 120 пикселей;
наверх: -4px;
left: 50px;
z-индекс: 20;
}
img {
transform: масштаб (2);
transform-origin: 50% 50%;
}
}
}
}
// Закладные вещи
.замок навесной {
display: none;
позиция: абсолютная;
ширина: 280 пикселей;
top: 71px;
left: -70px;
высота: 280 пикселей;
фон: # 301f41b8;
z-индекс: 4;
border-radius: 324px;
border: 4px solid # ffb128;
img {
позиция: абсолютная;
слева: 80 пикселей;
top: 35px;
}
}
% o {
Дисплей: блок;
позиция: абсолютная;
left: 0;
право: 0;
top: 220px;
margin: auto;
}
.проверять {
display: none;
ширина: 80 пикселей;
курсор: указатель;
высота: 80 пикселей;
позиция: абсолютная;
z-индекс: 6;
top: 303px;
left: 30px;
text-align: center;
line-height: 77px;
фон: пшеница;
цвет: # 615133;
border-radius: 100px;
border: 3px solid # ffb128;
переход: все 0,3 с;
&: hover {
фон: # ffb128;
белый цвет;
}
}
input # interactiveObject - lock: not (: checked) {
+ span {
display: none;
}
}
input # interactiveObject - lock: checked {
+ .padlock {
display: block;
$ y: '';
$ x: '+ span';
+ ввод {
display: block;
@ for $ i от 1 до 26 {
$ y: $ y + '+ span + input';
$ x: $ x + '+ input + span';
# {$ y} {
display: block;
}
# {$ x} {
display: block;
}
# {$ y} + span + label {
display: block;
}
}
}
}
}
# padlock1-1, # padlock2-1, # padlock3-1 {
&:после {
display: block! important;
}
}
# padlock1-9, # padlock2-9, # padlock3-9 {
&:после {
display: none! important;
}
}
ввод [id*="padlock"] {
@extend% o;
z-индекс: 3;
схема: нет;
Дисплей: нет;
-webkit-появление: нет;
+ span {
@extend% o;
background: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockBG.png);
ширина: 10 пикселей;
ширина: 22px;
высота: 36 пикселей;
left: 0;
display: none;
line-height: 40px;
text-align: center;
позиция: фиксированная;
цвет: # 444444;
верх: 50%;
transform: translateY (9px) translateX (-35px);
}
@ for $ i от 1 до 34 {
&: nth-of-type (# {$ i}) {
z-индекс: $ i + 10;
&: проверено {
z-index: 64 + $ i;
& + span {
z-index: 64 - $ i;
}
}
}
}
&: проверено {
z-индекс: 30;
&:до {
display: none;
}
& + span {
& + input {
&:после {
display: none;
}
}
}
}
&:после {
фон: красный;
display: block;
content: '';
top: 48px;
позиция: абсолютная;
курсор: указатель;
высота: 23px;
left: -7px;
ширина: 22px;
background: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockDown.png);
}
&:до {
display: block;
content: '';
позиция: абсолютная;
высота: 23px;
ширина: 22px;
left: -7px;
top: -30px;
белый цвет;
фон: красный;
курсор: указатель;
background: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockUp.png);
}
& [id*="padlock1"] {
left: 19px;
+ span {
left: -27px;
}
}
& [id*="padlock2"] {
left: 64px;
+ span {
left: 66px;
}
}
& [id*="padlock3"] {
left: 106px;
+ span {
left: 149px;
}
}
}
// Загрузка стилей экрана
& _loader {
позиция: фиксированная;
z-индекс: 15;
фон: # 141415;
left: 0;
top: 0;
ширина: 100%;
высота: 100%;
указатель-события: нет;
непрозрачность: 1;
анимация: fadeOut 1.5s 7s вперед;
& __ inner {
позиция: абсолютная;
left: 0;
право: 0;
margin: auto;
верх: 50%;
transform: translateY (-50%);
размер шрифта: 12 пикселей;
ширина: 200 пикселей;
text-align: center;
h1 {
font-weight: normal;
размер шрифта: 12 пикселей;
}
& .logo {
ширина: 200 пикселей;
высота: 70px;
margin: auto;
margin-bottom: 10px;
transform: scale (0);
непрозрачность: 0;
анимация: логотип 2s вперед;
img {
ширина: 100%;
}
}
span {
цвет: rebeccapurple;
display: block;
непрозрачность: 0;
margin-top: 8px;
анимация: fadeIn 1.5s 3s вперед;
}
& .бар {
фон: # 3c3c3e;
позиция: относительная;
высота: 2шт;
margin-top: 30px;
непрозрачность: 0;
анимация: fadeIn 1.5s 2.5s вперед;
& _inner {
width: 0px;
высота: 100%;
фон: белый;
позиция: абсолютная;
top: 0;
анимация: бар 3s 3s вперед;
}
}
& .subtitle {
цвет: # f49112;
margin: -18px 0px 40px 0;
непрозрачность: 0;
анимация: fadeIn 1.5s 1.5s вперед;
}
}
}
// Наш маленький персонаж
&_персонаж {
ширина: 48 пикселей;
высота: 48 пикселей;
фон: красный;
background: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorMainCharacter.gif');
позиция: абсолютная;
наверх: 216px;
left: -16px;
z-index: 1;
background-position: 0 0;
transform: translateY (-50%) translateX ($ tileSize * ($ tilesPerSegment / 2) - 8);
переход: все $ walkSpeed линейные;
z-index: 1;
указатель-события: нет;
img {
позиция: абсолютная;
border: 512px solid # 0c0c0d;
transform: translateY (-685px) translateX (-670px);
непрозрачность: 1;
}
}
// Вступительный диалог
&_вступление {
позиция: абсолютная;
top: 38px;
left: -33px;
z-индекс: 14;
ввод {
display: none;
}
input [type="radio"]: checked + div {
непрозрачность: 1;
top: 140px;
переход: все 0,5 с 0,8 с;
указатель-события: все;
этикетка {
непрозрачность: 1;
bottom: -10px;
}
}
input # intro-1 [type="radio"]: checked + div {
top: 140px;
непрозрачность: 0;
переход: все 0,5 с 0,8 с;
анимация: диалогIn .5s 9s вперед;
указатель-события: все;
}
input # intro-1 [type="radio"]: not (: checked) + div {
непрозрачность: 0;
top: 160px;
переход: все 0,5 с 0,8 с;
}
input [type="radio"] # intro-5: checked + div + input + div {
непрозрачность: 0;
pointer-events: none! important;
}
input [type="radio"] # intro-5: checked + div {
непрозрачность: 0;
анимация: showResponse 2s 2s forwards;
}
& .overlay {
позиция: фиксированная;
top: 0! important;
ширина: 140%;
left: 0;
непрозрачность: 1;
высота: 260%;
фон: # 141415;
z-index: -1;
указатель-события: все;
переход: все 4s .7s! important;
}
& .диалог {
позиция: абсолютная;
top: 160px;
непрозрачность: 0;
ширина: 170 пикселей;
left: 20px;
обивка: 15px;
border-radius: 4px;
font-size: 13px;
text-align: center;
переход: все 0.2s .2s;
указатель-события: нет;
фон: белый;
цвет: # 141415;
&.конец {
позиция: абсолютная;
ширина: 130 пикселей;
left: 0;
text-align: center;
право: 0;
указатель-события: нет;
top: 100px! important;
margin: auto;
transform: translateY (140px) translateX (39px);
фон: белый;
цвет: # 141415;
padding: 8px;
border-radius: 5px;
}
этикетка {
border-radius: 5px;
позиция: абсолютная;
right: -6px;
снизу: -20px;
z-index: 1;
непрозрачность: 0;
курсор: указатель;
переход: все 0,4 с 1 с;
img {
transform: масштаб (2);
рендеринг изображений: pixelated;
}
&: hover {
right: -13px;
фон: # 66bf60;
}
}
}
}
// Viewport
.viewport {
позиция: относительная;
z-index: 0;
переход: все $ walkSpeed линейные;
.level {
позиция: абсолютная;
left: 0;
z-index: 1;
transform: масштаб (3);
transform-origin: 0 0;
рендеринг изображений: pixelated;
}
}
& _segment {
width: $ tileSize * $ tilesPerSegment;
высота: $ segmentHeight;
граница: 0px сплошной белый;
плыть налево;
z-index: 1;
позиция: относительная;
белый цвет;
.drip_container {
позиция: относительная;
top: 80px;
display: none;
z-индекс: 10;
& .drip {
ширина: 3px;
высота: 20 пикселей;
background: # 81eeef;
позиция: абсолютная;
высота: 0;
top: 14px;
непрозрачность: 1;
@ for $ i от 1 до 5 {
&: nth-of-type (# {$ i}) {
left: random (144) + 0px;
анимация: капель 1.25s случайный (52) / 10 + 0s линейный бесконечный;
}
}
}
}
@keyframes drip {
0% {height: 0;}
2% {height: 6px;}
5% {height: 6px; top: 14px}
22% {вверху: 158 пикселей; высота: 4px; Непрозрачность: 1;}
23% {opacity: 0; height: 0px}
100% {opacity: 0}
}
& .tiles {
& .плитка {
width: $ tileSize;
высота: $ tileSize;
плыть налево;
рендеринг изображений: pixelated;
// Специальные плитки
& .door {
позиция: абсолютная;
top: 92px;
высота: 144px;
left: -12px;
ширина: 60 пикселей;
img {
позиция: относительная;
}
}
&.луч {
позиция: абсолютная;
top: 95px;
высота: 108 пикселей;
}
&.воды {
позиция: абсолютная;
верх: 107px;
высота: 108 пикселей;
}
&:до {
display: none;
content: '';
позиция: абсолютная;
ширина: 4px;
высота: 10 пикселей;
border-left: 4px solid # e69c69;
border-right: 4px solid # e69c69;
z-index: 1;
слева: 67 пикселей;
top: 140px;
переход: все 1s линейные;
}
&:после {
наверх: -48px;
переход: все 1s линейные;
высота: 40px! important;
display: block;
переполнение: скрыто;
указатель-события: нет;
img {
позиция: относительная;
наверх: -400px;
}
}
img {
ширина: 100%;
курсор: указатель;
&: hover {
-webkit-filter: drop-shadow (2px 0px white) drop-shadow (-2px 0px white) drop-shadow (0px -2px white);
}
}
этикетка {
указатель-события: нет;
.ответ,
.forcedResponse,
.responseSuccess {
display: none;
позиция: абсолютная;
ширина: 130 пикселей;
left: 0;
text-align: center;
право: 0;
указатель-события: нет;
top: calc (50% - 46 пикселей);
margin: auto;
фон: белый;
цвет: # 141415;
padding: 8px;
border-radius: 5px;
}
.forcedResponse {
pointer-events: all! important;
этикетка {
border-radius: 5px;
позиция: абсолютная;
right: -6px;
курсор: указатель;
снизу: -14px;
transform: масштаб (2);
z-индекс: 3;
курсор: указатель;
переход: все 0,4 с 1 с;
&: hover {
right: -2px;
}
}
}
}
&:после {
display: block;
width: $ tileSize;
высота: $ tileSize;
transform: масштаб (3);
рендеринг изображений: pixelated;
transform-origin: 0 0;
}
}
}
// Игра управления
& __ control {
div {
позиция: абсолютная;
непрозрачность: 0;
указатель-события: нет;
border-radius: 4px;
верх: 50%;
курсор: указатель;
img {
transform: масштаб (3);
рендеринг изображений: pixelated;
позиция: относительная;
left: 0;
top: 0;
переход: все 0,3 с;
}
}
& .вперед {
transform: translateY (50px) translateX (- $ tileSize);
left: 66px;
переход: все 0.3s 0s;
&: hover {
img {
left: 4px;
}
}
}
& .backward {
transform: translateY (50px) translateX (47px);
правый: 65 пикселей;
переход: все 0,3 с .1 с;
&: hover {
img {
left: -4px;
}
}
img {
transform: вращать (180deg) шкалу (3);
}
}
& .up {
top: 90px! important;
слева: 50%;
transform: translateX (-50%) translateY (25px);
переход: все 0.3s .2s;
&: hover {
img {
наверх: -4px;
}
}
img {
transform: вращать (-90deg) шкалу (3);
}
}
& .вниз {
снизу: 350px! important;
слева: 50%;
непрозрачность: 0;
top: auto;
transform: translateX (-50%) translateY (10px);
переход: все 0.3s .2s;
&: hover {
img {
top: 4px;
}
}
img {
transform: вращать (90deg) шкалу (3);
}
}
}
}
}
}
/ * ------------------------------------------------ ------------------------------------
Вычислить способ отображения анимированного спрайта по его ширине и количеству кадров
затем анимировать фоновое изображение
-------------------------------------------------- ------------------------------------- * /
@function walkCycle ($ frames, $ width, $ height, $ row) {
$ t: 100 / $ frames;
$ o: 0;
$ p: '';
@for $ i от 1 до $ frames {
$ o: $ o + $ t;
$ p: $ p + ($ o - .1) + '% {background-position: -' + ($ i - 1) * $ width + 'px' + $ height * ($ row - 1) + 'px ;} ";
$ p: $ p + $ o + '% {background-position: -' + $ i * $ width + 'px' + $ height * ($ row - 1) + 'px;}';
@if ($ o! = 100) {
$ p: $ p + ($ o + .1) + '% {background-position: -' + $ i * $ width + 'px' + $ height * ($ row - 1) + 'px;}';
} @else {
$ o: 100;
}
}
$ v: '1% {background-position: 0px' + $ height * ($ row - 1) + 'px;}' + $ p;
@return unquote ($ v);
}
/ * ------------------------------------------------ -------------------------------------------------- ----
Имя: Прохождение через сцены
Описание: делает невероятно легким инициирование смены сцены с помощью флажка * hack *
Вместо ввода input # index39: checked + input + div + div {props}
-------------------------------------------------- -------------------------------------------------- ----- * /
@mixin traverse ($ n: 4) {
$ div: ""! global; // Пустое поле div
$ input: ""! global; // Пусто входная строка
$ input2: ""! global;
$ input3: ""! global;
$ input4: ""! global;
$ label: ""! global; // Пусто входная строка
$ label2: ""! global;
$ label3: ""! global;
$ label4: ""! global;
$ inputOffset: «+ input»! global;
// Это нужно сделать динамическим
@for $ i от 1 до 47 {
$ input: $ input + "+ input"! global;
$ inputOffset: $ inputOffset + "+ input"! global;
}
@for $ i от 1 до 35 {
$ input2: $ input2 + "+ input"! global;
}
@for $ i от 1 до 23 {
$ input3: $ input3 + "+ input"! global;
}
@ for $ i от 1 до 11 {
$ input4: $ input4 + "+ input"! global;
}
@for $ i от 1 до $ столбцов {
@keyframes walk - # {$ i} {
анимация: walkCycle (6, 48, 48, 1);
}
}
@ for $ i от 1 до $ n {
$ div: "+ div"! global;
$ position: $ i! global; // Сделайте это глобальным, чтобы мы могли передать его нашему контенту
$ i: $ i! global;
$ label: $ label + "+ div"! global;
@if ($ i> 1) {
$ input: str_slice ($ input, 0, -9)! global; // Вырезаем последнюю строку ввода
$ input2: str_slice ($ input2, 0, -9)! global; // Вырезаем последнюю строку ввода
$ input3: str_slice ($ input3, 0, -9)! global; // Вырезаем последнюю строку ввода
$ input4: str_slice ($ input4, 0, -9)! global; // Вырезаем последнюю строку ввода
$ label2: $ label2 + "+ div"! global;
}
@content;
}
}
/ * ------------------------------------------------ ------------------------------------
Когда в указанном semgent, покажите стрелку вниз и стрелку вверх для сегмента ниже
-------------------------------------------------- ------------------------------------- * /
@mixin moveVerticleOnTile ($ row, $ tile) {
$ totalInputs: $ rows * $ columns - ($ row * $ columns - ($ columns - $ tile));
$ totalDivs: $ row * $ columns - ($ columns - $ tile) + $ columns + 2;
$ id: $ row * $ columns - ($ columns - $ tile);
$ tInput: '';
$ tDiv: '';
$ tInputDown: '';
@ for $ i от 1 до $ totalInputs {
$ tInput: $ tInput + '+ input';
}
@for $ i от 1 до $ totalDivs {
$ tDiv: $ tDiv + '+ div';
}
@ for $ i от 1 до $ totalInputs - $ columns {
$ tInputDown: $ tInputDown + '+ input';
}
.game_segment: nth-of-type (# {$ id}) .tile: nth-of-type (14): after {
content: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorLift.png');
позиция: относительная;
display: block;
}
.game_segment: nth-of-type (# {$ id}) .tile: nth-of-type (14): before {
display: block;
}
input # indexRow # {$ row} - # {$ tile}: checked # {$ tInput} + div + div + .viewport> .game_segment: nth-of-type (# {$ id + $ columns}) {
& .вниз {
непрозрачность: 1;
указатель-события: все;
переход: все 0,3 с 1,1 с;
transform: translateX (-50%) translateY (0px);
}
}
input # indexRow # {$ row + 1} - # {$ tile}: checked # {$ tInputDown} + div + div + .viewport> .game_segment: nth-of-type (# {$ id}) {
.tile: nth-of-type (14): после {
top: 288px;
}
.tile: nth-of-type (14): before {
высота: 373px;
}
}
input # indexRow # {$ row + 1} - # {$ tile}: checked # {$ tInputDown} + div + div + .viewport> .game_segment: nth-of-type (# {$ id + $ columns}) {
& .up {
непрозрачность: 1;
указатель-события: все;
переход: все 0,3 с 1,1 с;
transform: translateX (-50%) translateY (15px);
}
}
}
/ * ------------------------------------------------ ------------------------------------
Запретить показ меток на указанном участке
-------------------------------------------------- ------------------------------------- * /
@mixin makeWallAt ($ row, $ tile) {
$ totalInputs: $ rows * $ columns - ($ row * $ columns - ($ columns - $ tile));
$ totalDivs: $ row * $ columns - ($ columns - $ tile) + $ columns + 2;
$ id: $ row * $ columns - ($ columns - $ tile);
$ tInput: '';
$ tDiv: '';
$ tInputBack: '';
$ tInputDown: '';
@for $ i от 1 до $ totalInputs + 1 {
$ tInput: $ tInput + '+ input';
}
@ for $ i от 1 до $ totalInputs - 1 {
$ tInputBack: $ tInputBack + '+ input';
}
input # indexRow # {$ row} - # {$ tile - 1}: checked # {$ tInput} + div + div + .viewport> .game_segment: nth-of-type (# {$ id}) {
& .вперед {
display: none! important;
}
}
input # indexRow # {$ row} - # {$ tile + 1}: checked # {$ tInputBack} + div + div + .viewport> .game_segment: nth-of-type (# {$ id}) {
& .backward {
display: none! important;
}
}
}
/ * ------------------------------------------------ ------------------------------------
Сравните два входа, затем сделайте что-нибудь
-------------------------------------------------- ------------------------------------- * /
@mixin checkWinCondition ($ criteria, $ criteria2, $ result) {
$ totalInputs: 48 + ($ gameObjects - $ criteria - 2);
$ tInput: '';
@ for $ i от 1 до $ totalInputs {
$ tInput: $ tInput + '+ input';
}
input # interactiveObject # {$ criteria}: checked + input: checked + input: checked # {$ tInput} + div + div + div + div + div {
непрозрачность: 1;
указатель-события: все;
& .game_win__inner {
непрозрачность: 1;
}
}
input # interactiveObject # {$ criteria}: checked + input: checked + input: checked # {$ tInput} + div + div + div + div {
display: none;
}
input # interactiveObject # {$ criteria}: checked + input: checked + input: checked # {$ tInput} + div + div + div {
анимация: конец 2s вперед;
.forcedResponse {
display: none! important;
}
}
}
/ * ------------------------------------------------ ------------------------------------
Сравните два входа, затем сделайте что-нибудь
-------------------------------------------------- ------------------------------------- * /
@mixin compare ($ input, $ segment, $ tile, $ destroy, $ waterfall, $ plank) {
$ totalInputs: 48 + ($ gameObjects - $ input - 1);
$ tInput: '';
@ for $ i от 1 до $ totalInputs {
$ tInput: $ tInput + '+ input';
}
input # interactiveObject # {$ input}: checked + input: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment - 1}) {
.game_segment__control {
display: block! important;
.backward, .forward {
display: block! important;
}
}
}
input # interactiveObject # {$ input}: checked + input: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment + 3}) {
.game_segment__control {
display: block! important;
.backward, .forward {
display: block! important;
}
}
}
input # interactiveObject # {$ input}: checked + input: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment + 1}) {
.game_segment__control {
display: block! important;
.вперед {
display: block! important;
}
.backward {
display: block! important;
}
}
}
@if ($ destroy) {
input # interactiveObject # {$ input}: checked + input # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment}) {
.tile img {
display: none;
}
}
input # interactiveObject # {$ input}: checked + input # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment - 1}) {
.game_segment__control {
.backward, .forward {
display: block! important;
}
}
}
}
input # interactiveObject # {$ input}: checked + input: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment}) {
.game_segment__control {
.backward {
display: block! important;
}
}
@if ($ waterfall) {
& + div .tiles .tile: nth-of-type (13) {
content: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/waterOff.gif');
img {
display: none;
}
}
}
@if ($ plank) {
& + div .tiles .tile: nth-of-type (13) {
content: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/creepyCorridor-_170.png');
img {
display: none;
}
}
}
}
input # interactiveObject # {$ input}: checked + input: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment}) .tiles .tile: nth-of- type (# {$ tile}) {
img {
display: none;
}
.forcedResponse {
display: none;
}
.responseSuccess {
display: block;
анимация: showResponse 2s forwards;
}
}
}
// Показывать элемент дождя в определенном сегменте
@mixin makeRainAt ($ segment) {
.viewport .game_segment: nth-of-type (# {$ segment}) .drip_container {
display: block;
}
}
/ * ------------------------------------------------ ------------------------------------
Создание интерактивного объекта
-------------------------------------------------- ------------------------------------- * /
@mixin makeInteractiveObject ($ reference, $ segment, $ tile, $ force, $ animate, $ plank) {
$ totalInputs: ($ rows * $ columns) + ($ gameObjects - $ reference);
$ tInput: '';
@ for $ i от 1 до $ totalInputs {
$ tInput: $ tInput + '+ input';
}
@if ($ force) {
input # interactiveObject # {$ reference}: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment + 1}),
input # interactiveObject # {$ reference}: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment - 1}) {
.game_segment__control {
display: none;
}
}
}
input # interactiveObject # {$ reference}: checked # {$ tInput} + div + div + div + div .game_inventory__item .item [data-reference="#{$reference}"] {
display: block;
}
@if ($ animate) {
input # interactiveObject # {$ reference}: checked # {$ tInput} + div + div + div {
анимация: встряхните 1 с вперед;
}
}
input # interactiveObject # {$ reference}: checked # {$ tInput} + div + div + div> .game_segment: nth-of-type (# {$ segment}) .tiles .tile: nth-of-type (# { $ tile}) {
img {
указатель-события: нет;
& .object {
display: none;
}
& .forced {
указатель-события: все;
}
}
.ответ {
display: block;
анимация: showResponse 2s forwards;
}
.forcedResponse {
display: block;
анимация: принудительная реакция 2s вперед;
}
}
}
// Проверяем код замка. Математика заполнена этим, и поэтому его не динамический TODO
@mixin checkCode ($ one, $ two, $ three, $ segment, $ tile) {
$ diff: 2;
$ diff2: 6; // 13
$ diff3: 13; // 2
$ diff4: 3; // 4
$ inputPadlock: '';
$ inputPadlock2: '';
$ inputPadlock3: '';
$ inputPadlock4: '';
// 7,9,4
$ totalInputs: 48 + ($ gameObjects);
$ tInput: '';
@ for $ i от 1 до $ totalInputs {
$ tInput: $ tInput + '+ input';
}
@ for $ i от 1 до $ diff {
$ inputPadlock: $ inputPadlock + '+ input + span';
}
@ for $ i от 1 до $ diff2 {
$ inputPadlock2: $ inputPadlock2 + '+ input + span';
}
@ for $ i от 1 до $ diff3 {
$ inputPadlock3: $ inputPadlock3 + '+ input + span';
}
@ for $ i от 1 до $ diff4 {
$ inputPadlock4: $ inputPadlock4 + '+ input + span';
}
input # interactiveObject - lock: not (: checked) + div # {$ inputPadlock} + input: checked + span # {$ inputPadlock2} + input: checked + span # {$ inputPadlock3} + input: checked + span # {$ inputPadlock4} + label # {$ tInput} + div + div + div .game_segment: nth-of-type (# {$ segment}) .tiles .tile: nth-of-type (# {$ tile}) {
img {
Дисплей: нет;
}
content: url ('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/doorUnlocked.png')
}
input # interactiveObject - lock: not (: checked) + div # {$ inputPadlock} + input: checked + span # {$ inputPadlock2} + input: checked + span # {$ inputPadlock3} + input: checked + span # {$ inputPadlock4} + label # {$ tInput} + div + div + div .game_segment: nth-of-type (# {$ segment}) {
.вперед назад {
display: block! important;
}
}
input # interactiveObject - lock: not (: checked) + div # {$ inputPadlock} + input: checked + span # {$ inputPadlock2} + input: checked + span # {$ inputPadlock3} + input: checked + span # {$ inputPadlock4} + label # {$ tInput} + div + div + div .game_segment: nth-of-type (# {$ segment - 1}) {
.вперед назад {
display: block! important;
}
}
}
@include checkCode (7, 3, 6, 28, 13);
/ * ------------------------------------------------ ------------------------------------
Назначение изображения / gif на определенной плите
-------------------------------------------------- ------------------------------------- * /
@mixin assignTileAt ($ segment, $ tiles, $ id) {
@each $ tile в $ tiles {
.game_segment: nth-of-type (# {$ segment}) .tiles .tile: nth-of-type (# {$ tile}) {
content: url ($ id);
}
}
}
/ * ----------------------------------
Инициировать траверс
------------------------------------- * /
$ animationIndex: 1;
@include traverse ($ rows * $ columns) {
/ * ----------------------------------
Переходы глобальной сцены
------------------------------------- * /
$ animationRow: пол ($ position / $ columns);
$ animationIndex: $ position - ($ animationRow * $ columns);
$ inputMap: $ input, $ input2, $ input3, $ input4;
@ for $ m от 1 до 4 {
input # indexRow # {$ m} - # {$ i}: checked # {nth ($ inputMap, $ m)} # {$ div} {
анимация: walk - # {$ animationIndex} $ walkSpeed forwards;
// static - # {$ animationIndex} 2s $ walkSpeed бесконечно
// background-position: 0 48px;
& + div + div {
@if ($ debug) {
left: (- $ tileSize * $ tilesPerSegment) * ($ i - 1) / 2;
} @else {
left: (- $ tileSize * $ tilesPerSegment) * ($ i - 1);
}
@if ($ debug! = true) {
clip-path: circle (140px at ((215px - ($ tileSize * $ tilesPerSegment)) + (($ i - 1) * ($ tileSize * $ tilesPerSegment))) 212px + $ segmentHeight * ($ m - 1)) ;
}
@if ($ debug) {
top: - ($ segmentHeight * ($ m - 1)) / 2;
} @else {
top: - $ segmentHeight * ($ m - 1);
}
}
}
input # indexRow # {$ m} - # {$ i}: checked # {nth ($ inputMap, $ m)} # {$ div} + div + .viewport> .game_segment: nth-of-type (# {$ i + 1 + (($ m - 1) * $)}) {
& .вперед {
непрозрачность: 1;
указатель-события: все;
transform: translateY (39px) translateX (-48px);
переход: все 0,3 с .9 с;
}
}
input # indexRow # {$ m} - # {$ i}: checked # {nth ($ inputMap, $ m)} # {$ div} + div + .viewport> .game_segment: nth-of-type (# {# {$ i + (($ m - 1) * $ columns)}}) {
этикетка {
pointer-events: all! important;
}
}
input # indexRow # {$ m} - # {$ i}: checked # {nth ($ inputMap, $ m)} # {$ div} + div + .viewport> .game_segment: nth-of-type (# {$ i - 1 + (($ m - 1) * $ columns)}) {
& .backward {
непрозрачность: 1;
указатель-события: все;
transform: translateY (39px) translateX (47px);
переход: все 0,3 с 1 с;
}
}
}
}
// Назначьте все наши анимированные плитки
@include assignTileAt (2, 10, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif');
@include assignTileAt (19, 10, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif');
@include assignTileAt (23, 11, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif');
@include assignTileAt (7, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif');
@include assignTileAt (5, 17, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif');
@include assignTileAt (3, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (3, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (6, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (8, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (15, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (18, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (10, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (30, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (27, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (21, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (24, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (44, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
@include assignTileAt (12, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif');
// Создание объектов
@include makeInteractiveObject (1, 3, 15, false, false, false); // Ящик Empy
@include makeInteractiveObject (2, 12, 15, false, false, false); // Пикакс
@include makeInteractiveObject (3, 7, 15, true, false, false); // Рок
@include makeInteractiveObject (4, 8, 15, false, true, false); // Динамический плунжер
@include makeInteractiveObject (5, 31, 13, true, false, false); // Дверь динамита
@include makeInteractiveObject (6, 18, 15, false, false, false); // Планы
@include makeInteractiveObject (7, 29, 13, true, false, true); // Разрыв в планке
@include makeInteractiveObject (8, 6, 13, false, false, false); // Примечание 1
@include makeInteractiveObject (9, 10, 13, false, false, false); // Заметка 2
@include makeInteractiveObject (10, 29, 15, false, false, false); // Заметка 3
@include makeInteractiveObject (11, 27, 13, false, false, false); // Блокировка двери
@include makeInteractiveObject (12, 26, 13, false, false, false); // Справиться
@include makeInteractiveObject (13, 46, 13, false, false, false); // Cog
@include makeInteractiveObject (14, 47, 13, false, false, false); // Водопад
@include makeInteractiveObject (15, 15, 15, false, false, false); // Динамит
@include makeInteractiveObject (16, 48, 15, false, false, false); // Предохранители
@include makeInteractiveObject (17, 24, 15, false, false, false); // Конец двери
@include makeInteractiveObject (18, 19, 15, false, false, false); // Пустое поле 1
@include makeInteractiveObject (19, 22, 15, false, false, false); // Пустое поле 2
@include makeInteractiveObject (20, 33, 15, false, false, false); // Пустое поле 3
@include makeInteractiveObject (21, 12, 13, false, false, false); // Пустое поле 4
@include makeInteractiveObject (22, 44, 13, false, false, false); // Пустое поле 5
// Сравнение логики игры
@include compare (2, 7, 15, false, false, false); // Сравнение выбора в рок
@include compare (4, 31, 13, true, false, false); // Сравнение плунжера с дверью
@include compare (6, 29, 13, false, false, true); // Сравнение досок до разрыва
@include compare (12, 46, 13, false, true, false);
// Проверка состояния выигрыша
@include checkWinCondition (15, 16, 17);
// Создание вертикальных плит
@include moveVerticleOnTile (1,5); //e.g сделать лифт между 1-м сегментом 1 и плиткой ниже него
@include moveVerticleOnTile (1,11);
@include moveVerticleOnTile (2,2);
@include moveVerticleOnTile (2,8);
@include moveVerticleOnTile (3,9);
// Создание стен
@include makeWallAt (1,1);
@include makeWallAt (1,8); // Блокировка динамитного плунжера
@include makeWallAt (1,9);
@include makeWallAt (1,13);
@include makeWallAt (2,13);
@include makeWallAt (2,4);
@include makeWallAt (2,1);
@include makeWallAt (3,1);
@ включить makeWallAt (3,3);
@include makeWallAt (3,4);
@include makeWallAt (3,6); // дверь
@include makeWallAt (3,10);
@include makeWallAt (4,7);
@include makeWallAt (4,13);
@include makeWallAt (4,11);
// Последствия
@include makeRainAt (3);
@include makeRainAt (7);
@include makeRainAt (15);
@include makeRainAt (29);
@include makeRainAt (22);
@include makeRainAt (31);
@include makeRainAt (47);
@include makeRainAt (18);
// Анимация
@keyframes showResponse {
0% {непрозрачность: 1; top: calc (50% - 36px);}
70% {opacity: 1; top: calc (50% - 46px);}
100% {непрозрачность: 0; top: calc (50% - 46px);}
}
@keyframes forcedResponse {
0% {непрозрачность: 1; top: calc (50% - 36px);}
70% {opacity: 1; top: calc (50% - 46px);}
100% {непрозрачность: 1; top: calc (50% - 46px);}
}
@keyframes logo {
0% {непрозрачность: 0; transform: scale (0)}
100% {непрозрачность: 1; transform: scale (1)}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes bar {
0% {ширина: 0%;}
100% {ширина: 100%;}
}
@keyframes dialogIn {
0% {opacity: 0; left: 20px;}
10% {left: 20px;}
20% {left: 0px;}
30% {left: 20px;}
40% {left: 4px;}
50% {left: 18px;}
60% {left: 8px;}
70% {left: 20px;}
80% {left: 5px;}
90% {left: 16px;}
100% {opacity: 1; left: 20px;}
}
@keyframes shake {
0% {transform: translateX (0px)}
10% {transform: translateX (6px)}
20% {transform: translateX (-6px)}
30% {transform: translateX (6px)}
40%{transform: translateX(-6px)}
50%{transform: translateX(6px)}
60%{transform: translateX(-6px)}
70%{transform: translateX(6px)}
80%{transform: translateX(-6px)}
90%{transform: translateX(6px)}
100%{transform: translateX(0px)}
}
@keyframes end {
0%{transform: translateX(0px);opacity:1}
10%{transform: translateX(6px)}
20%{transform: translateX(-6px)}
30%{transform: translateX(6px)}
40%{transform: translateX(-6px)}
50%{transform: translateX(6px)}
60%{transform: translateX(-6px)}
70%{transform: translateX(6px)}
80%{transform: translateX(-6px)}
90%{transform: translateX(6px)}
100%{transform: translateX(0px);opacity:0;}
}
@keyframes shake-debug {
0%{transform: translateX(0px) scale(0.5)}
10%{transform: translateX(10px) scale(0.5)}
20%{transform: translateX(-0px) scale(0.5)}
30%{transform: translateX(10px) scale(0.5)}
40%{transform: translateX(-10px) scale(0.5)}
50%{transform: translateX(10px) scale(0.5)}
60%{transform: translateX(-10px) scale(0.5)}
70%{transform: translateX(10px) scale(0.5)}
80%{transform: translateX(-10px) scale(0.5)}
90%{transform: translateX(10px) scale(0.5)}
100%{transform: translateX(0px) scale(0.5)}
}
// Trailer
// Labels are out
Загрузка...
