5. January 2019

How to write game with Vue.js – Sokoban – Part 3 – Display game objects

In previous article we were talking about graphics tiles. Now we would like to display game objects. Sokoban contains just two types of objects: avatar and boxes.

We will store these game objects in a list and we will use the same CSS trick to display graphic for each object like in the previous article. We will load just one PNG and define class for each tile that should be displayed.

Let’s define one avatar and one box in js/game.js:

const store = new Vuex.Store({
    state: {
        ...,
        gameObjects: [
            {
                name: 'avatar',
                x: 1,
                y: 1
            },
            {
                name: 'box',
                x: 2,
                y: 2
            }
        ]
    }
});

The template for HTML in index.html will iterate over the list. It will set coordinates using top and left CSS attributes. Graphics will be mapped by class name.

<script type="text/x-template" id="playground-template">
    <div>
    ...
    <div v-for="(gameObject, index) in gameObjects"
            :class="['game-object game-object-' + gameObject.name]"
            :style="{ top: gameObject.y*64 + 'px', left: gameObject.x*64 + 'px'}">
    </div>
    </div>
</script>

The last remaining thing is to define picture mapping in css/game.css from tiles.png.

.game-object {
    width: 64px;
    height: 64px;
    position: absolute;
    background: url("../data/images/gfx64/tiles.png") -192px -192px;
}

.game-object-avatar {
    background: url("../data/images/gfx64/tiles.png") -192px 0;
}

.game-object-box {
    background: url("../data/images/gfx64/tiles.png") -128px 0;
}

The result should look like this:

The source code of this article is stored at Github branch article-03.

In the next article, we will add controls to player’s avatar so it could move around the scene.

You can find more HTML5 games at https://georgik.rocks/tag/games

Back to tutorial Sokoban in Vue.js

1. January 2019

How to write game with Vue.js – Sokoban – Part 2 – Display level as graphics

In the previous article, we set the foundation for building a clone of Sokoban game. We displayed level in form of text. This form is good for ASCII-art fan. Let’s take a look at how to make it more user-friendly by replacing characters with graphic tiles.

We’re going to implement the following principle. Each tile will be represented by span with fixed height and width. Also it will have fixed coordinates which could be achieved by setting top and left attribute to proper value. Then we will use CSS trick to display graphics tile from one image using CSS background attribute.

Let’s start with CSS for our game in file css/game.css.

.tile {
    width: 64px;
    height: 64px;
    position: absolute;
    background: url("../data/images/gfx64/tiles.png") 0 0;
}

The trick with background URL will pick the 1st tile from tiles.png file which begins at coordinates 0 0.

Warning: Do not forget to use units in CSS definition. In our case it is px. When you define dimension without unit you may end up with very strange results.

Here is the image with tiles which we will use in our game.

Now we need to load CSS in index.html.

<link rel="stylesheet" type="text/css" href="css/game.css"/>

Let’s update the template for playground component so that tiles are displayed instead of letters.

    <div v-for="(tileRow, rowIndex) in levelMap">
        <span class="tile" v-for="(tileName, tileIndex) in tileRow"
            :style="{ top: rowIndex*64 + 'px', left: tileIndex*64 + 'px'}"></span>
    </div>

What is new in this template definition?

Clearly class=”tile” which will apply the style defined in game.css file to html element.

The second new thing is the definition of style. We can notice colon before word style. It’s shorthand for v-bind:style. This special syntax will tell Vue.js that the value of the attribute should be computed. In our case, we’re composing map which corresponds to syntax in CSS. If we look closely at the syntax it will render something like this:

{ top: 64px, left: 128px }

The question is how to map letter to from level map to tile stored in PNG file. The answer is simple. We will create a special class for each letter which references tile in PNG file. Then this class will be written into HTML code.

Let’s look at the first piece in css/game.css.

.tile {
...
    background: url("../data/images/gfx64/tiles.png") 0 0;
}

.tile-w {
    background: url("../data/images/gfx64/tiles.png") 0 -192px;
}

The pair of numbers indicates the start of tile from the top left corner. In CSS it’s recommended to use negative values for referencing coordinates to get the same experience across browsers.

Now, it’s necessary to update the code of template just a little bit.

        <span v-for="(tileName, tileIndex) in tileRow"
            :class="['tile tile-' + tileName]"
            :style="{ top: rowIndex*64 + 'px', left: tileIndex*64 + 'px'}"></span>

We’ve added :class which is abbreviation for v-bind:class. In this case we’re composing string which will be interpreted by web browser. So the result might look like: ’tile tile-w’

The result should look like this:

The source code of this article is stored at Github.

In the next article, we will add player’s avatar and box as game objects.

You can find more HTML5 games at https://georgik.rocks/tag/games

Back to tutorial Sokoban in Vue.js

14. May 2013

How to debug :hover pseudo class in Google Chrome Developer tool

Google Chrome developer tool is simply one of the best tools available for debugging of HTML5 applications.

It has one neat feature: possibility to inspect CSS of element and editing it on the fly.

That works fine for normal styles, but what about :hover state?

There is one “hidden” option which allows to switch element to :hover state.

Inspect element of HTML. You should see Styles on the right hand side. There are 3 icons. Click the middle one with arrow sign. It will pop up menu with checkboxes. You can select here CSS pseudo classes like :active, :focus, :hover or :visited.

google-chrome-dev-hover

To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.

12. May 2013

How to fix broken style in Plone

Some Products for Plone are little bit broken and uninstallation procedure does not work very well. When you install and then uninstall crappy product you might end up with messed layout of Plone portal.

That’s the time to pay a visit to plone_css folder in ZMI.

Remove any reference to broken style (whole box with style has yellow color) and click Save to reset Plone CSS caching system.