Coding4Fun: building a Tetris-like game using CSS Grid Layout & Blend 5

I’d like to share with you a mysterious internal secret kept within Microsoft for now a long time. It’s the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps. Most of you probably think that this specification was designed to help developers having a better layout engine for their websites and applications. But the original motivation was completely different. The very first aim was to be able to create a Tetris-like game in an easy way! But I’m sure you’re not convinced yet. That’s why, I’m going to prove it to you using Blend 5 as a companion. Ok, let’s go!

The shape1 is currently spanning on 3 columns and on 2 rows. I’ll then create a new grid inside this area defined by 3 columns and 2 rows in order to have cells having exactly the same size as the cells of the main grid, whatever the resolution will be!

Once done, I’ll create 2 lines in order to mimic the Z shape of the Tetris game. You should now have this result:

Even better, play with the various views available in the Device tab and you’ll see that our game is already implementing a responsive design! This is freaking cool, isn’t it? :)

Here is for instance the outputs for the snapped view and the portrait view:

Let’s now resolve another problem. The Tetris grid gaming grid is composed of squares. Our current responsive design is stretching 100% width. Building a Windows 8 application for the Windows Store will most of the time meet widescreen monitors (current tablets are 1366x768 or 1920x1080 and most desktop PC have a 16/9 ratio). Let’s then assume that targeting a widescreen ratio is addressing almost all cases. To compute the proper responsive width, you need to do: 9/16 * 10/20 (the ratio of the main gaming grid) which equals to: 28.125%.

Add then this rule to target the main grid in full screen landscape mode:

Now simply add this attribute to the CSS associated to the the main grid:

-ms-grid-column-align: center;

And the grid is now centered:

At this stage, you’re probably already shocked. "How could I have missed this incredible secret?" you’re wondering to yourself. Take a breath. Now that you now THE secret, let’s continue this tutorial together to discover other awesome possibilities delivered by the CSS specifications combined together.

Step 2: moving or rotating a shape

My first idea was to try avoiding JS by using as much CSS as possible. I then first tried to use CSS3 Animations to move & animate the shape on the various rows/columns. But the bad news is that you can’t change the –ms-grid-column or –ms-grid-row values via CSS3 animations. This will then be the job of some JavaScript code.

I then started to think about how I will rotate the shape. CSS Transforms seemed to be perfectly adapted for that. Let’s check that by doing some experiments. Blend 5 is really cool for that as you can directly see in live the outcome of your changes.

Add a rotation of 90 degrees on shape1 by adding this class to its DIV element:

.shape1rotated {
transform: rotate(90deg);
}

I’m sure you weren’t expecting this:

Problem: it’s not properly aligned to the gaming grid. To align our shape to the grid, we need some small adjustments:

And we now have the same rotation as a Tetris-like game. Here are 2 screenshots before/after the rotation:

We can even go further than that by using a transition set on shape1 via this:

transition: all 1s ease-out;

And now, removing/adding the .shape1rotated class on the shape1 DIV will trigger a smooth rotation animation!

Check out the result inside Blend 5 thanks to this short video:

At this stage, we could think that this approach is the good one to build our game. But this is unfortunately not yet the case. Here’s why. Try moving the shape by simply changing its –ms-grid-column property. Blend 5 will reflect the changes directly. When not rotated, the shape can be moved up to the 8th column:

So far so good. But when you’re rotating it by adding the .shape1rotated class to the DIV:

You see that there is still 1 row available on the right for the shape’s move. If you think we simply need to move it to the 9th row, you’re wrong! Indeed, here is what we’ll obtain on the 9th row:

You probably forgot that we’re currently moving a DIV element displaying a grid layout of 3 columns and 2 rows matching exactly the underlying gaming grid. When moving it, we really have the feeling that this is a block part of the main grid we’re moving. But for this tricks to work, we need at least 3 columns available to contain our shape element. If it’s contained in 2 columns (when set to the 9th column) or less, it will be “compressed” like in the screenshot.

There is 2 ways to resolve that.

1 – Stop using CSS Transforms and draw the rotated shape using another grid definition. For instance, using 3 div inside the shape instead of 2. But using such an approach will prevent us to have the nice CSS Animations in place. 2 – Redefined the main grid to work on 12 columns instead of 10 and we’ll use only the columns from 2 to 11 (a sort of clipping area if you wish). This will resolve our “overflow” problem.

Step 3: adding some code to handle part of the game logic

Now that we’ve solved the graphics part of the game using only some pure CSS & HTML code, we need the help of JavaScript to move/rotate the shape in the gaming area. We’re going to re-implement the CSS logic via a JS object that’s going to be defined thanks to WinJS.Class.

Open the "TheRealCSSGridStory" in Visual Studio 2012.

Create a TetrisShapeZ.js file in the JS directory and copy/paste this code:

And we’re done! We now have a very basic game using CSS Grid Layout coupled with CSS Transforms & Animations for the graphics part and a couple of JS lines of code to have the beginning of the basics of a Tetris-like game.

So, are you now convinced that CSS Grid Layout was made to simplify the creation of Tetris-like games? :)

This article is part of the HTML5 tech series from the Internet Explorer team. Try-out the concepts in this article with 3 months of free BrowserStack cross-browser testing @ http://modern.IE.

David Rousset is a Developer Evangelist at Microsoft, specializing in HTML5 and web development. This article originally appeared on his MSDN blog, Coding4Fun on 12 Feb 2013.You can follow him @davrous on Twitter.

This article was reprinted with permission from Microsoft Corporation. This site does business with Microsoft Corporation.

Loading Comments...

Web Development Newsletter Signup

Invalid email

You have successfuly registered to our newsletter.

HTML5 ebook

HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.