Использование CSS Grid Layout и Blend 5 для создания игры

Бонус — обработка портретного режима:

Если вы хотите поддержать портретный режим (что еще лучше для игры в сетку Tetris), добавьте это определение CSS Media Query:

  @media screen и (-ms-view-state: fullscreen-Portrait) {
         .mainGrid {
         ширина : 106,66% ;
         }
 } 

Так как коэффициент необходимо рассчитать как = 16/9 * 12/20 = 106,66%.

Шаг 3: добавление некоторого кода для обработки части игровой логики

Теперь, когда мы решили графическую часть игры, используя только некоторый чистый код CSS и HTML, нам нужна помощь JavaScript для перемещения / вращения фигуры в игровой области. Мы собираемся повторно реализовать логику CSS через объект JS, который будет определяться благодаря WinJS.Class .

Откройте « TheRealCSSGridStory » в Visual Studio 2012.

Создайте файл TetrisShapeZ.js в каталоге JS и скопируйте / вставьте этот код:

  ( function () {
     «использовать строгое» ;

     var ShapeZ = WinJS.Class.define (
     /// Конструктор - columnIndex не является обязательным.  Если указано, определяет столбец, в котором начинается форма 
          function (columnIndex) {
             // Мы создаем эквивалент этого блока HTML: 
              // <div class = "shape1"> 
              // <div class = "line1shape1"> </ div> 
              // <div class = "line2shape1"> </ div> 
              // </ div> 
              this ._shape1 = document.createElement ( "div" );
             var line1 = document.createElement ( "div" );
             var line2 = document.createElement ( "div" );
             this ._shape1.className = "shape1" ;
             line1.className = "line1shape1" ;
             line2.className = "line2shape1" ;
             this ._shape1.appendChild (line1);
             this ._shape1.appendChild (line2);
             // Логическое значение, чтобы указать, находится ли фигура в режиме ориентации по умолчанию или нет 
              // True означает, что не повернуто, false означает, что повернуто 
              this ._defaultOrientation = true ;
             // Установка позиции столбца в основной сетке 
              if (columnIndex) {
                 this ._currentColPos = columnIndex;
                 this ._shape1.style.msGridColumn = this ._currentColPos;
             }
             еще {
                 this ._currentColPos = 1;
             }
             // Мы всегда начинаем со строки 1 
              this ._currentLinePos = 1;
             // логическое значение, чтобы знать, можно ли перемещать / вращать фигуру или нет 
              // Если true, это означает, что мы достигли последней возможной строки 
              this ._fixed = false ;
         },
         {
             /// Укажите, с каким HTML-элементом, отображаемым в CSS-сетке, вы хотели бы работать 
              /// ширина - количество столбцов сетки, а высота - количество строк. 
              insertIntoGrid: function (element, width, height) {
                 element.appendChild ( this ._shape1);
                 this ._gridWidth = width;
                 this ._gridHeight = высота;
                 // Это левый и нижний максимальный предел для этой фигуры 
                  // когда отображается в режиме ориентации по умолчанию 
                  this ._maxLeft = ширина - 3;
                 this ._maxBottom = высота - 1;
             },
             /// Повернуть Z-образную форму на 90 градусов против / по часовой стрелке, используя CSS Transforms 
              /// просто удаляя / добавляя класс shape1rotated 
              rotate: function () {
                 if (! this ._fixed && this ._defaultOrientation) {
                     // поворот на 90 градусов по часовой стрелке, это также вызовет переход CSS 
                      WinJS.Utilities.addClass ( this ._shape1, "shape1rotated" );
                     this ._defaultOrientation = false ;
                     // левый предел теперь +1 против ориентации по умолчанию 
                      this ._maxLeft = this ._gridWidth - 2;
                 }
                 еще {
                     if (! this ._fixed && this ._currentColPos < this ._maxLeft) {
                         // удаление shape1rotated автоматически сбросит форму 
                          // к своей исходной матрице и снова CSS Transition выполнит  
                          // анимация для вас 
                          WinJS.Utilities.removeClass ( this ._shape1, "shape1rotated" );
                         this ._defaultOrientation = true ;
                         this ._maxLeft = this ._gridWidth - 3;
                     }
                 }
             },
             // Внутренняя функция, вызываемая public moveLeft / moveRight 
              _moveHorizontally: функция (направление) {
                 if (! this ._fixed && ( this ._currentColPos < this ._maxLeft || direction === -1) && 
                 ( this ._currentColPos> 2 || direction === 1)) {
                     this ._currentColPos = this ._currentColPos + direction;
                     this ._shape1.style.msGridColumn = this ._currentColPos;
                 }
             },
             /// Переместить фигуру в ближайший левый столбец 
              /// Проверить, достиг ли ты левого предела или нет 
              moveLeft: function () {
                 this ._moveHorizontally (-1);
             },
             /// Переместить фигуру в ближайший правый столбец 
              /// Проверьте, достигли ли вы правильного предела или нет 
              moveRight: function () {
                 this ._moveHorizontally (1);
             },
             /// Переместить форму вниз по прямой ниже линии 
              /// Проверка, достигли ли вы нижнего предела или нет 
              moveDown: function () {
                 если (! this ._fixed) {
                     this ._currentLinePos = this ._currentLinePos + 1;
                     this ._shape1.style.msGridRow = this ._currentLinePos;
                     if ( this ._currentLinePos === this ._maxBottom) {
                         this ._fixed = true ;
                     }
                 }
             }
         }
     );

     WinJS.Namespace.define ( "CSSTetris" , {ShapeZ: ShapeZ});
 } ()); 

Просто прочитайте код, чтобы понять, что он делает. Это должно быть прокомментировано достаточно, чтобы быть самоочевидным.

Добавьте ссылку на этот файл скрипта в default.html и оставьте только этот блок HTML внутри тела:

  < div class = "mainGrid"> 
      < div class = "virtualGrid"> 
      </ div > 
  </ div > 
 

Перейти в default.js .

Крутой частью хорошо документированного кода является то, что теперь у нас есть интересные детали IntelliSense, например, для конструктора :

или функция поворота :

Чтобы правильно использовать этот код, добавьте этот блок JS сразу после вызова processAll :

  document.addEventListener ( "keydown" , OnKeyDown, false );
 mainGrid = document.getElementsByClassName ( "mainGrid" ) [0];
 myShape = новый CSSTetris.ShapeZ (4);
 myShape.insertIntoGrid (mainGrid, 12, 20);
 в этом(); 

И добавьте эти две функции:

  функция init () {
     setInterval ( function () {
         myShape.moveDown ();
     }, 1000);
 }

 function OnKeyDown (event) {
     switch (event.keyCode) {
         case KEYCODE_X:
             myShape.rotate ();
             перерыв ;
         case KEYCODE_LEFT:
             myShape.moveLeft ();
             перерыв ;
         case KEYCODE_RIGHT:
             myShape.moveRight ();
             перерыв ;
         case KEYCODE_DOWN:
             myShape.moveDown ();
             перерыв ;
     }
 } 

И мы сделали! Теперь у нас есть очень простая игра, использующая CSS Grid Layout в сочетании с CSS Transforms & Animations для графической части и несколько строк кода JS, чтобы начать основы основанной на тетрисе игры.

Вот короткое видео, демонстрирующее конечный результат:

Скачать видео: MP4 , WebM , HTML5 видеоплеер от VideoJS

Вы можете загрузить окончательное решение Visual Studio, соответствующее трем шагам этого руководства, здесь: http://david.blob.core.windows.net/win8/TheRealCSSGridStory.zip

Итак, вы теперь уверены, что CSS Grid Layout был создан для того, чтобы упростить создание игр типа тетрис?