Создаем HTML5 игру. Часть 2: Игровая логика

Создание игры на HTML5. Часть вторая. — Создаем директории и файлы как показано на рисунке

В предыдущей части был разбор существующих HTML5 технологий предназначенных для создания браузерных игр. Теперь нам предстоит создать архитектуру игрового проекта, написать логику и работать с ресурсами. В этот раз вместо слов перейдём к коду. Крепитесь, его будет много.

Если вы что-то пропустили, вот ссылка на предыдущую часть статьи.

Часть 1: Подбор технологий

Первым делом создаём файл index.html. В нём подключаем игровые стили, require-модуль, контейнер с игрой, панель загрузки и ссылку для привязки событий через клавиатуру (можно привязывать события напрямую к контейнеру, только будьте уверены что ваши привязки событий не будут конфликтовать с фреймворком). Старайтесь придерживаться чистоты в вёрстке как в .html, так и в .css шаблонах. Главное правило — сократить дублирование кода. Следите чтобы созданные стили и наименование идентификаторов или классов не перекрывали используемые значения в шаблонах.

Шаблон

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>KineticJS Simple Game</title> <!-- Style Main -->
    <link type="text/css" rel="stylesheet" href="app/stylesheets/main.css"/> <!-- Require Main -->
    <script type="text/javascript" data-main="app/javascript/main" src="app/javascript/lib/require.js"></script>
</head>
<body> <!-- Kinetic Canvas -->
<div id="container">
    <div id="loading-info">LOADING...</div>
</div> <!-- Key detection --> <a href="javascript:void(0);" id="anchor"></a></body>
</html>

Стили

MAIN.CSS

Файл main.css инкапсулирует все импортированные стили.

@import url('defaults.css');
@import url('body.css');
@import url('typography.css');

DEFAULTS.CSS

В defaults.css происходит перезагрузка встроенных стилей для браузеров. Эдакий хак, чтобы отображать содержимое одинаково на большинстве браузеров.

/* Defaults */
* {
    padding: 0;
    margin: 0;
    border: 0;
    position: relative;
    color:#FFFFFF;
    background-color: transparent;
    letter-spacing: 0px;    
}

TYPOGRAPHY.CSS

В файле typography.css объявляем загрузку шрифтов. Шрифты можно инициализировать как через загрузчик google, так и через файловую систему, установив в директорию файл в формате *.ttf

/* @import url(http://fonts.googleapis.com/css?family=Prosto+One); */
/* ИЛИ */ 
@font-face {
    font-family: 'Prosto One';
    src: url(../fonts/Prosto_One.ttf);
}

BODY.CSS

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

#container {
    position: absolute;
    padding: 10px;
    margin: 10px;
    width: 640px;
    height: 360px;
    box-shadow: 0px 0px 15px 0px rgba(0, 15, 60, 0.83);
}

#loading-info {
    position: relative;
    z-index: 999;
    color: black;
    text-align: center;
    font-size: 72px;
    margin: 144px auto;/* центрируем (360/2)-(72/2) */
    padding: 0;
}

Скрипты

MAIN.JS

Require-конфигуратор. Здесь задаем пути для используемых библиотек, настраиваем основной путь к скриптовым ресурсам. Делаем инициализацию игры и привязку событий.

require.config({
    baseUrl: './app/javascript/usr',
    removeCombined : true,
    optimize : 'none',
    paths: {
        //cdn или локальный ресурс
        jquery : [
                  '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
                  '../lib/jquery-2.0.3.min'
                  ],
        //only local
        kinetic : '../lib/kinetic-v5.0.1.min',
        domReady : '../lib/domReady'
    }
});

require([
    'game'
    ,'controls'
    ,'lvlGame'
    ,'jquery'
    ,'kinetic'
    ,'domReady'
        ], function(game, controls, lvlGame, $) {
        "use strict";

        var $anchor = $('#anchor'),
   $container = $('#container');
  
  $anchor.focus();
  
  // привязка считывания собыий с клавиатуры или прочих устройств I/O
  $anchor.on('keydown', controls.keyDown);
  // привязка считывания клика и тапа 
  $container.on('click touchstart', controls.click);
   
        // создание canvas контейнера
        game.stage = new Kinetic.Stage({
            container: 'container',
            width: 640,
            height: 360
        });

        // создание игры
        lvlGame.initialize(function() {
            $('#loading-info').remove();
        });
    }
);

GAME.JS

Это модуль содержит главный главный игровой объект Game.

define(
    'game',
    function( ) {
        return window.Game || {};
    }
);

CONTROLS.JS

Я рекомендую отделять события от содержимого и создать модуль controls.js. С его помощью будем настраивать управление.

define(
    'controls',
    ['lvlGame'],
    function(lvlGame) {
        "use strict";

        return {
            keyDown : function(event) {
                var keyCode = event.keyCode;

                switch (keyCode) {
                    //enter, space or P-key
                    case 13 :
                    case 32 :
                    case 80 : {
                        //запуск игры
                        lvlGame.play();
                        break;
                    }

                    default: break;
                }
            },
   click : function(event) {
    lvlGame.play();
   }
        };
    }
);

LVLGAME.JS

Главный файл содержащий всю игровую логику.

define(
    'lvlGame',
    ['game'],
    function(game) {
        "use strict";

        game.init = null;// прототип инициализатора
        var timer = null;// интервал таймера
        var cardSize = { w: 110, h: 110 };
        var gameObj = {};

        // загрузка игровых объектов
        function initGameObj() {
            gameObj.layerBackground = null;
            gameObj.layerGame = null;
            gameObj.startTimer = 30.0 ; // время для игры
        }

        // перезагрузка игровых объектов
        function resetGameObj() {
            updateGameTimerText("Let's go!", 'white');
            gameObj.layerGame.removeChildren();

            gameObj.cardAnimationsName = ['type1', 'type2', 'type3', 'type4', 'type5'];
            gameObj.timer = 0.0;        // текущее значение интервала
            gameObj.tempTypes = [];     // временные типы карт
            gameObj.tempCards = [];    // временные сохраненные карты
            gameObj.cards = [];         // карты на уровне
            gameObj.cardGroup = null;   // группа карт
            gameObj.cardAnimations = {  // анимации карт
                //      x,      y,      width,         height (1 frame)
                idle:   [ 0,    0,      cardSize.w,    cardSize.h ],
                type1:  [ 110,  0,      cardSize.w,    cardSize.h ],
                type2:  [ 220,  0,      cardSize.w,    cardSize.h ],
                type3:  [ 0,    110,    cardSize.w,    cardSize.h ],
                type4:  [ 110,  110,    cardSize.w,    cardSize.h ],
                type5:  [ 220,  110,    cardSize.w,    cardSize.h ]
            };
            gameObj.gameTime = 0.0      // время игры
        }

        // события мыши
        function mouseOver() {
            // защита от дурака
            if(!gameObj.timer) return;

            if(document.body.style.cursor !== 'pointer') {
                document.body.style.cursor = 'pointer';
            }
        }
        function mouseOut() {
            if(document.body.style.cursor !== 'default') {
                document.body.style.cursor = 'default';
           }
        }

        // упаковочные ресурсы игры
        var sources = {
            background: 'resource/backgrounds/background.png',
            card: 'resource/sprites/cards.png'
        };

        // асинхронная установка картинок из упаковочных ресурсов игры
        function loadImages(sources, callback) {
            var images = {},
                loadedImages = 0,
                numImages = 0,
                src = null;

            for(src in sources) {
                numImages++;
            }
            for(src in sources) {
                images[src] = new Image();
                images[src].onload = function() {
                    if(++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

        // прототип инициализации. содержит внутриигровые объекты
        function Init() {
            gameObj.layerBackground = new Kinetic.Layer({
                clearBeforeDraw: true
            });
            gameObj.layerGame = new Kinetic.Layer({
                clearBeforeDraw: true
            });
        }
        Init.prototype.background = function(image) {
            var backImage = new Kinetic.Image({
                image: image,
                width: game.stage.getWidth(),
                height: game.stage.getHeight()
            });
            gameObj.layerBackground.add(backImage);

            return this;
        };
        Init.prototype.cards = function(img) {
            gameObj.cardGroup = new Kinetic.Group({});

            var i = gameObj.cardAnimationsName.length,
                j,
                tempElem = [],
                paddingLeft = 10,
                paddingTop = 10,
                left = 20,
                top = 20,
                tempAnimName = gameObj.cardAnimationsName;

            while(i--) {
                // выбор случайных карт
                var randElem = tempAnimName.splice(Math.floor(Math.random() * (i + 1)), 1)[0];

                // сразу вставляем по две карты
                tempElem.push(randElem);
                tempElem.push(randElem);
            }

            // псевдо-случайная сортировка карт по уровню
            tempElem.sort(function() {
                return parseInt( Math.random() * 10 ) % 2;
            });

            // располагаем карты в два ряда по пять карт
            for(i = 0; i < 2; i++) {
                for(j = 0; j < 5; j++) {
                    // очистка первой временной карты
                    var cardType = tempElem.pop();

                    if(cardType) {
                        gameObj.cards.push(
                            new card(
                                cardType,
                                img,
                                left + j * (cardSize.w + paddingLeft),
                                top + i * (cardSize.h + paddingTop)
                            )
                        );
                    }
                }
            }

            return this;
        };
        Init.prototype.text = function(text) {
            // создание текстового элемента
            var textTimer = new Kinetic.Text({
                x: 0,
                y: game.stage.getHeight() - 64, //специально для двух строк (30*2 и расстояние)
                width: game.stage.getWidth() - 10,
                text: text || '',
                fontFamily: 'Prosto One',
                fontSize: 30,
                fill: 'white',
                shadowColor: "black",
                shadowOpacity: .8,
                shadowBlur: 8,
                align: 'right',
                listening: false,
                id: 'textTimer'
            });

            // установка текста на игровой слой
            gameObj.layerBackground.add(textTimer);

            return this;
        };

        // обновление текста таймера
        function updateGameTimerText(text, color) {
            // получение элемента по id элемента
            var timeElem = game.stage.get('#textTimer')[0];
            if(text) {
                timeElem.setText(text);
            }
            if(color) {
                timeElem.setFill(color);
            }
            // быстрая перерисовка сцены
            timeElem.getLayer().batchDraw();
        }

        // таймер игры
        function gameTimer() {
            var timerValue = --gameObj.timer;
            updateGameTimerText("TIME:tt" + timerValue + "'s");

            gameObj.gameTime = gameObj.startTimer - timerValue;

            // когда таймер завершается - гамовер
            if(gameObj.timer === 0) {
                gameOver();
            }
        }

        // название карты, картинка, координаты
        var card = function(type, img, x, y) {
            var _this = this; //ссылка на текущий объект
            this.type = type; //уникальный тип карты
            this.show = false; //флаг что карта открыта

            // спрайт карты
            var cardSprite = new Kinetic.Sprite({
                x: x || 0,
                y: y || 0,
                image: img,
                animations: gameObj.cardAnimations,
                animation: 'idle',
                index: 0,
                frameRate: 0
            });

            // запил внутрь спрайта прямоугольник
            // TODO это плохая практика. Убрать отсюда
            cardSprite.rectBackground = new Kinetic.Rect({
                x: x,
                y: y,
                width: cardSize.w + 2,
                height:cardSize.h + 2,
                fill: 'skyblue',
//                есть глюк движка, когда внутри одного спрайта рисовать другой - начинает ползти тень
                shadowColor: 'black',
                shadowBlur: '12',
                shadowOpacity:1,

//                kinetic bug: Можно использовать либо stroke, либо shadow
//                stroke: 'black',
//                strokeWidth: 1,
                opacity: 1,
                listening: false
            });

   
            // событие клика внутри по текущей карте
            function cardClick() {
                // защита от дурака
                if(!gameObj.timer || 
     cardSprite.getAnimation() !== 'idle') {
     return;
    }
    
    // количество открытых карт на данный момент
    var pushedCount = gameObj.cardGroup.children.filter(function(elem) {
     return elem.getAttr('pushed')
    }).length;
   
    // контейнеры для карт (используются как сохранение состояний уже выбранных карт)
    if(pushedCount < 2) {
     gameObj.tempCards.push(cardSprite);
     gameObj.tempTypes.push(_this.type);
     cardSprite.setAnimation(_this.type);
     cardSprite.rectBackground.setFill('white');
     cardSprite.setAttr('pushed', true);
    }
                // если выбраны две карты
                if(gameObj.tempTypes.length === 2) {
                    var isSame = gameObj.tempTypes.every(function(value) {
      return value === _this.type;
                    });
                    // если две карты одинаковые
                    if(isSame) {
      //ставим флаг что карты открыты
                        gameObj.tempCards.forEach(function(value){
       value.showed = true;
       value.setAttr('pushed', false);
                        });
      
                        gameObj.cards.length -= 2;
      
                        // если карт не осталось - уровень пройден
                        if(gameObj.cards.length === 0) {
       gameWin();
      }
                    } else {
                        // иначе поворачиваем открытые карты обратно
      gameObj.tempCards
       .filter(function(value) {
        return !value.showed;
       })
       .forEach(function(value) {
        var _value = value;
      
                                setTimeout(function() {
                                    _value.setAnimation('idle');
                                    _value.rectBackground.setFill('skyblue');
         _value.setAttr('pushed', false);
          
         _value.getLayer().batchDraw();
        }, 800);    
       });
                    }

                    // очистка контейнеров объектов карт и их типов
                    gameObj.tempCards.length = 0;
     gameObj.tempTypes.length = 0;
                }

                // перерисовка состояния всего уровня
                game.stage.clear()
                game.stage.draw();
            }

            // привязка событий
            cardSprite.on('mouseover', mouseOver);
            cardSprite.on('mouseout', mouseOut);
            cardSprite.on('click touchend', cardClick);
   
            // формирование группы из карт
            gameObj.cardGroup.add(cardSprite);
            gameObj.layerGame.add(cardSprite.rectBackground)
            // установка карты на игровой слой
            gameObj.layerGame.add(cardSprite);
            // z-index надо вызывать после объекта установки на слой
            cardSprite.rectBackground.setZIndex(0);
            cardSprite.setZIndex(1);
        };

        // проигрыш
        function gameOver() {
            clearInterval(timer);

            updateGameTimerText(
                "Game Over!" +
                "nPress enter key to restart game",
                'red'
            );
            removeCards();
        }

        // выигрыш
        function gameWin() {
            clearInterval(timer);

            updateGameTimerText(
                "CONGRATULATIONS!" +
                "nYour time:t" + gameObj.gameTime + "'s",
                'gold'
            );
        }

        // удаление всех карт с уровня
        function removeCards() {
            if(gameObj.cardGroup.hasChildren()) {
                // удаление масок карт
                gameObj.cardGroup.children.filter(function(elem) {
                    return elem.rectBackground
                }).forEach(function(elem) {
                    elem.rectBackground.destroy();
                });
                // удаление карт
                gameObj.cardGroup.children.destroy();
            }
        }

        // обертка для вызова через require.js
        return {
            // функция инициализации игрового мира
            initialize : function(callback) {
                initGameObj();

                // загрузка ресурсов
                // инициализация полустатических объектов
                loadImages(sources, function(sources) {
                    game.init = new Init()
                        .background(sources.background)
                        .text("Press Enter or Click" +
         "n to start the game"
      );

                    // формирование заднего слоя
                    game.stage.add(gameObj.layerBackground);

                    callback();
                });
            },
            play: function() {
                if(!gameObj.timer) {
     //очистка данных
                    resetGameObj();
     clearInterval(timer);
     
                    // загрузка ресурсов и последующая за ним функция инициализаций уровня
                    loadImages(sources, function(sources) {
                        // инициализация игровых объектов
                        game.init.cards(sources.card);
                        // формирование игрового слоя
                        game.stage.add(gameObj.layerGame);
                        // обновляем значение интервала
                        gameObj.timer = gameObj.startTimer;
                        // перезапуск таймера
                        timer = setInterval(gameTimer, 1000);
                    });
                }
            }
        };
    }
);

Итог второй части

KineticJS показала нам насколько это гибкая технология для создания браузерных игр. Используя её вместе с библиотекой require.js можно строить мощные абстрактные слои для облегчения читаемости кода. KineticJS полностью совместим для разработки мобильных игр. В третьей части я расскажу про инструмент для портирования HTML5 игр на мобильные платформы (Android, iOS, WinPhone).

kinetic simple game — Посмотреть результат

В третьей части постараемся оформить полученную игру в виде Android приложения.

Создаем HTML5 игру. Часть 2: Игровая логика

Шаблон

INDEX.HTML

Стили

MAIN.CSS

DEFAULTS.CSS

TYPOGRAPHY.CSS

BODY.CSS

Скрипты

MAIN.JS

GAME.JS

CONTROLS.JS

LVLGAME.JS

Итог второй части

Денис Сергеевич Басковский

Добавить комментарий Отменить ответ

Создаем HTML5 игру. Часть 1: Выбор технологий

Создаем HTML5 игру. Часть 3: Портируем на Android

Related Posts

Обзор WebGL фреймворков

Делаем статичный сайт на Dropox

FrontendConf 2024

Сервис конвертации HTTP запросов на разные языки

Предложения

Создаем HTML5 игру. Часть 2: Игровая логика

Шаблон

INDEX.HTML

Стили

MAIN.CSS

DEFAULTS.CSS

TYPOGRAPHY.CSS

BODY.CSS

Скрипты

MAIN.JS

GAME.JS

CONTROLS.JS

LVLGAME.JS

Итог второй части

Денис Сергеевич Басковский

Добавить комментарий Отменить ответ

Создаем HTML5 игру. Часть 1: Выбор технологий

Создаем HTML5 игру. Часть 3: Портируем на Android

Related Posts

Обзор WebGL фреймворков

Делаем статичный сайт на Dropox

FrontendConf 2024

Сервис конвертации HTTP запросов на разные языки