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

Начнем

jsfw.ready(function()
{
  game = new Game('pole');
  game.addEvent('onchangescore',function(score){
    $('score').innerHTML = score;
  });
  game.addEvent('onstart',function(score){
    $('gameover').style.display = 'none';
  });
  game.addEvent('ongameover',function(score){
    $('gameover').style.display = '';
  });
  game.start();
});

* This source code was highlighted with Source Code Highlighter.

Класс Game

var Game = jsfw.Class(function(){
/**
  здесь будут приватные методы
*/
function setScore(score)
{
  this.score = score;
  this.callEvent('onchangescore',[this.score]); // Бросим событие об изменение счета
}
return {
  width:12,    // Ширина поля
  height:12,    // Высота поля
  speed:30,    // Скорость перемещения шарика
  minline:5,    // Минимальное количество шаров для удаления
  countNewBall:3,  // Количество добавляемых шаров
  costBall:1,    // стоимость шара
  costBonus:5,  // стоимость бонуса
  /**
  * Конструктор
  * @param ID элемента для от рисовки игрового поля
  */
  __constructor:function(el)
  {
    this.dom = $(el);  // Сохраним контейнер
    this.score = 0;    // Обнулим количество балов
    this.cell = [];    // Здесь будут хранится ячейки игрового поля
    /*
      Функция $d создает функцию которая запускает переданную функцию в контексте объекта переданного первым аргументом
    */
    this.dSelectBall = $d(this,this.selectBall); // Создадим делегатов для событии щелчка по ячейки и шарику
    this.dSelectCell = $d(this,this.selectCell);
    this.countCell = this.width*this.height;  // Для ускорения расчетов подсчитаем количество ячеек
  },
  /**
  * Начало новой игры
  */
  start:function()
  {
    setScore.call(this,0); // обнулим счет
    this.createCell(); // Создадим новое поле
    this.callEvent('onstart'); // Кинем событие начала игры
  },
  /**
  * Конец игры
  */
  gameOver:function()
  {
    // Сдесь просто кинем событие об окончание игры
    this.callEvent('ongameover');
  },
  /**
  * Создание нового игрового поля
  */
  createCell:function()
  {
    /* Создание поля */
  }
}},
jsfw.Object // Класс реализующий события
)

* This source code was highlighted with Source Code Highlighter.

Класс Cell

var Cell = jsfw.Class({
  __constructor:function(x,y)
  {
// Координаты ячеки
    this.x = x;
    this.y = y;
    /*
    Функция $.create облегчает создание DOM объекта первый параметр это название тэга, второй свойства обьекта, третий родительский DOM объект
    */
    this.dom = $.create('div',{
      className:'Cell',  // Класс ячейки
      onclick:$d(this,this.click)  // Навешаем на нее событие он клик выполняющей соответствующюю функцию в ячейки
    },this.dom);
  },
  /**
  *  Вставка шарика в ячейку
  *  @param Шарик
  */
  addBall:function(ball)
  {
    if(ball.cell) ball.cell.ball = null; // Если в ячейки уже есть шарик то разрываем с ним связь (В принципе это не должно быть но на всякий случай лучше предусмотреть)
    this.ball = ball;  // Сохраняем шарик во внутренней переменной
    ball.cell = this;  // Указываем шарику в какой ячейки он находится
    this.dom.appendChild(ball.getDom()); // Добавляем его в DOM объект
  },
  /**
  *  Удаление шарика из ячейки
  */
  removeBall:function()
  {
    $.remove(this.ball.getDom()); // Удаление из DOM
    this.ball.cell = null;  // Разрываем все связи с шариком
    this.ball = null;
  },
  /**
  *  Есть ли шарик в ячейки
  */
  isBall:function()
  {
    return !!this.ball;
  },
  /**
  *  Получить шарик из ячейки
  */
  getBall:function()
  {
    return this.ball;
  },
  /**
  *  Получить DOM ячейки
  */
  getDom:function()
  {
    return this.dom;
  },
  /**
  *  Клик по ячейки
  */
  click:function()
  {
    // Просто бросаем событие onclick
    return this.callEvent('onclick');
  }
},jsfw.Object);

* This source code was highlighted with Source Code Highlighter.

  /**
  * Создание нового игравого поля
  */
  createCell:function()
  {
    $.empty(this.dom); // Отчистим DOM
    var p = $.create('div',{className:'Pole'}); // Создадим контейнер поля
    // Переберем все поле
    for(var y=0,lenY=this.height;y<lenY;y++)
      for(var x=0,lenX=this.width;x<lenX;x++)
      {
        var cell = new Cell(x,y); // Создадим ячеку
        cell.addEvent('onclick',this.dSelectCell); // Подпишемся на событие щелчка по ячейки, используя делегата ранее созданного
        p.appendChild(cell.getDom());    // Получим DOM у ячейки и добавим его в наш контейнер
        this.cell[this.getIndex(x,y)] = cell; // Сохраним ячейку в массиве, используя функцию нахождения индекса по координатам
      }
      this.dom.appendChild(p); // Добавим контейнер в DOM игры
  },
  /**
  * Функция выбора ячейки
  */
  selectCell:function(cell)
  {
    alert('Вы выбрали ячейку с координатами x='+cell.x+' y='+cell.y);
  },
  /**
  * Получение индекса массива по координатам поля
  * @param Координата по оси X
  * @param Координата по оси Y
  */
  getIndex:function(x,y)
  {
    return (x >= 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({
  countColor:6,  // Количество цветов
  __constructor:function()
  {
    this.color = c = Math.rand(1,this.countColor); // Случайно с генерируем индекс цвета, цвета у нас будут прописаны в стилях как .Ball{Индекс}
    this.dom = $.create('div',{className:'Ball Ball'+this.color,onclick:$d(this,this.click)},this.dom); // Создадим DOM элемент шарика, подпишемся на событие onclick и выставим цвет
  },
  /**
  * Получение DOM шарика
  */
  getDom:function()
  {
    return this.dom;
  },
  /**
  *  Клик по шарику
  */
  click:function()
  {
    return this.callEvent('onclick');
  },
  /**
  *  Выделить шарик
  */
  select:function()
  {
    // jsFW.fx.blink заставляет элемент маргать с периодом в time
    this.blink = jsFW.fx.blink(this.dom,{time:300}); // Сохраним идентификатор чтобы можно было потом мигание прекращать
  },
  /**
  *  Снять выделение
  */
  unselect:function()
  {
    if(this.blink) // Если моргал тогда останавливаем
    {
      this.blink.stop();
      delete this.blink;
    }
  },
  /**
  * Удалить шарик с поля, и разорвать все связи с ячейкой
  */
  remove:function()
  {
    if(this.cell)
    {
      $.remove(this.dom);
      this.cell.ball=null;
      this.cell = null;
    }
  }
},jsfw.Object);

* This source code was highlighted with Source Code Highlighter.

/**
  * Добавляет шарик в свободное поле
  */
  addRandBall:function(ball)
  {
    /*
      в масиве this.emptyCell хранятся индексы свободных ячеек
    */
    var i = Math.rand(0,this.emptyCell.length-1); // Выберем случайно индекс свободной ячейки
    this.cell[this.emptyCell[i]].addBall(ball); // И добавим в нее шарик
    this.emptyCell.splice(i,1); // Удалим из массива эту ячейку, т.к. мы ее заняли
  },
  /**
  *  Помещает на игровое поле новые шарики
  */
  newBall:function(){
    this.emptyCell = []; // Обнулим массив свободных шариков, и заполним его заново, он мог изменится
    for(var i=this.cell.length;i--;)
    {
      if(!this.cell[i].isBall()) this.emptyCell.push(i); // Если ячейка пустая добавим в массив
    }
    /*
      Создадим новые шарики количеством указанным в переменной this.countNewBall
      Но так как свободных мест может не хватить по этому мы выберем минимальное значение
    */
    for(var i=Math.min(this.countNewBall,this.emptyCell.length);i--;)
    {
      var ball = new Ball();
      ball.addEvent('onclick',this.dSelectBall); // Подпишемся на событие
      this.addRandBall(ball);  // Добавим шарик
    }
    // Дальше проверим если количество свободных мест меньше чем добавляемые шарики то конец игры
    if(this.emptyCell.length<=this.countNewBall) this.gameOver();
  },
  /**
  * Выделение шарика
  */
  selectBall:function(ball){
    if(this.seletedBall) this.seletedBall.unselect(); // Если уже был выбран шарик снимаем выделение
    this.seletedBall = ball; // Сохраняем новый шарик и выделяем его
    ball.select();
    return false;
  }

* This source code was highlighted with Source Code Highlighter.

start:function()
  {
    setScore.call(this,0); // обнулим счет
    this.createCell(); // Создадим новое поле
    this.newBall();
    this.callEvent('onstart'); // Кинем собитие начала игры
  },

* This source code was highlighted with Source Code Highlighter.

selectCell:function(cell)
  {
    if(!cell.isBall() && this.seletedBall) // Если в ячейке нет шарика и есть выделенный
    {
      cell.addBall(this.seletedBall); // Перенесем шарик в выбранную ячейку
      this.newBall();
    }
    return false;
  }

* This source code was highlighted with Source Code Highlighter.

Заключение