. Когда программисту нечего делать, пишем игры сами. Часть 1
Когда программисту нечего делать, пишем игры сами. Часть 1

Когда программисту нечего делать, пишем игры сами. Часть 1

Эту игру многие знают, она из далекого детства называется «Цветные линии». Кому она не известна над помню правила игры, на квадратное поле бросаются шарики разных цветов, после каждого хода, кроме когда шарики сгорают. Нужно передвигая шарики выстраивать линии одного цвета по горизонтали, вертикали или диагонали. При чем перемещать шарики можно только в ту точку к которой они могут пройти. При выстраивание линий из 5 или более шариков, они уничтожаются.

Подготовка

< html > < head > < meta HTTP-EQUIV ="Content-Type" CONTENT ="text/html; charset=utf-8" /> < title > Игра ColorLines </ title > < script type ="text/javascript" src ="jsfw.js" ></ script > <script type= "text/javascript" src= "main.js" ></script> <script type= "text/javascript" src= "lines.js" > </ script > < link href ="style.css" rel ="stylesheet" type ="text/css" /> </ head > < body > < a href ="/" > На главную </ a > < h1 > Игра - Color Lines </ h1 > < table > < tr > < td > < div class ="gamepole" > < div id ="pole" > </ div > < div class ="gameOver" id ="gameover" style ="display:none" > < div class ="bg" ></ div > < div class ="block" > < h4 > Конец игре </ h4 > </ div > </ div > </ div > </ td > < td class ="menu" > < p > Счет: < span id ="score" > 0 </ span ></ p > < input type ="button" onclick ="game.start()" value ="Начать заново" /> </ td > </ tr > </ table > </ body > </ html >

* This source code was highlighted with Source Code Highlighter .

Начнем

В реализации я использую свой js велосипед, код которого конечно я не привожу, но встречающиеся функции буду комментировать, кому интересно могут найти в исходниках. Спросите почему не jquery, prototype, и др,, а потому что мне так удобней. В игре будет всего три класса: Game — основной класс игры Cell — клас ячейки Ball — класс шарика

Создадим файл main.js который будет создавать, и связывать игру с шаблоном

jsfw.ready( function () );

* This source code was highlighted with Source Code Highlighter .

Игра будет построена на системе событий. По этому создадим объект Game и подпишемся на его события. У него их будет всего три: onchangescore- изменение счета; onstart – начало игры; ongameover – конец игры; При первом мы будем ловить изменение набранных балов, и выводить их на экран. При двух других мы будем скрывать или показывать сообщение о конце игры.

Весь остальной код я поместил в файл lines.js

Класс Game

var Game = jsfw.Class( function () , jsfw.Object // Класс реализующий события )

* This source code was highlighted with Source Code Highlighter .

Класс Cell

var Cell = jsfw.Class( ,jsfw.Object);

* This source code was highlighted with Source Code Highlighter .

/** * Создание нового игравого поля */ createCell: function () , /** * Функция выбора ячейки */ selectCell: function (cell) , /** * Получение индекса массива по координатам поля * @param Координата по оси X * @param Координата по оси Y */ getIndex: function (x,y) = 0 && x < this .width && y>=0 && y< this .height)?x* this .width+y:-1; >

* This source code was highlighted with Source Code Highlighter .

Класс Ball

var Ball = jsfw.Class( ,jsfw.Object);

* This source code was highlighted with Source Code Highlighter .

Теперь можно добавить еще несколько методов в класс Game для создания и добавления шариков в случайном свободном месте.

/** * Добавляет шарик в свободное поле */ addRandBall: function (ball) , /** * Помещает на игровое поле новые шарики */ newBall: function () , /** * Выделение шарика */ selectBall: function (ball)

* This source code was highlighted with Source Code Highlighter .

Еще надо добавить в функцию start вызов метода newBall вот так

start: function () ,

* This source code was highlighted with Source Code Highlighter .

Давайте немного изменим функцию выбора ячейки selectCell

selectCell: function (cell)

* This source code was highlighted with Source Code Highlighter .

Запустите и посмотрите что у нас получилось. Теперь у нас есть поле на которое вываливаются шарики которые можно выделать, и перемещать на свободные места.

Статья получилась большая по этому я решил ее разбить на несколько частей.

Заключение

Мы подготовили все чтобы взяться за логику игры, а это самая интересная часть программирования игр. В следующей части мы рассмотрим алгоритм проверки собранных линий, подсчета балов за сгоревшие шарики. И самое интересное алгоритм поиска пути, наши шарики ведь не должны летать как сейчас — мы подрежем им крылья. >:)

Да чуть не забыл пример и исходники для первой части

В примере вместо шариков были использованы квадраты, т.к. шары были заняты по неизвестным причинам.

Жду конструктивной критики в комментариях, а указания на орфографические ошибки только в личку

📎📎📎📎📎📎📎📎📎📎