RrwMeq

index.html

<div id="game">
  <div id="menu">
    <label id="player1">
      Player 1:
      <div>
        name:
      <input id="p1Name" type="text"/>
      </div>
      
      <div id="player1Score">score: <span class="score">0</span></div>
    </label>
    <label id="player2">
      Player 2: 
      <div>name:
        <input id="p2Name" type="text" /></div>
      <div id="player2Score">score: <span class="score">0</span></div>
    </label>
    <label id="cols">
      Columns:
      <input id="colsNum" type="number" min="7" max="100" value="7"/>
    </label>
    <label id="rows">
      Rows:
      <input id="rowsNum" type="number" min="6" max="100" value="6"/>
    </label>

    <input type="submit" id="start" value="New game"/>

  </div>
  <div id="board">
  </div>
  

</div>

RrwMeq.markdown

RrwMeq

A Pen by Michał Kardyś on CodePen.

License.

script.js

$(document).ready(function() {
  game.create();
  $('#start').click(function(e) {
    e.preventDefault();
    game.start();

  })

})

var game = {}
game.create = function() {
  this.canvas = $('#game');
  this.board = $('#board');
  this.column = '<div class="column"></div>';
  this.cell = '<div class="cell"></div>';

}

game.start = function() {
  this.board.empty();
  $('#game').off('click', '.column');

  this.colNumber = $('#colsNum').val();
  this.rowNumber = $('#rowsNum').val();
  this.colNumber = this.colNumber < 7 ? 7 : this.colNumber;
  this.rowNumber = this.rowNumber < 6 ? 6 : this.rowNumber;

  for (i = 0; i < this.colNumber; i++) {
    this.board.append(this.column);
    var addedColumn = this.board.find('.column:eq(' + i + ')');
    for (j = 0; j < this.rowNumber; j++) {
      addedColumn.append(this.cell);
    }
  }
  var column_width = this.board.find('.column').first().width()
  this.board.width(column_width * this.colNumber);
  this.player = [{}, {}];
  this.player[0].name = $('#p1Name').val().length ? $('#p1Name').val() : "Gracz 1";
  this.player[1].name = $('#p2Name').val().length ? $('#p2Name').val() : "Gracz 2";
  this.player[0].score = this.player[1].score = 0;

  this.activePlayer = Math.random() > 0.5 ? 1 : 2;
  this.board.find('.cell').removeClass('.player-*');
  $('#game').on('click', '.column', function() {
    game.move($(this));
  })
}

game.move = function(column) {
  var cellToFill = column.find('.cell:not(div[class^="player-"], div[class*=" player-"])').last();
  if (cellToFill.length > 0) {
    cellToFill.addClass('player-' + this.activePlayer);
    game.checkEnd(column.index(), cellToFill.index(), this.activePlayer)
    this.activePlayer = (this.activePlayer === 1) ? 2 : 1;
  }
}

game.checkEnd = function(i, j, player) {
  var looper = function(i, j, player, i_iterator, j_iterator) {
    var streak = 0;
    m = i;
    n = j;
    while (m >= 0 && m < game.colNumber && m < i + 7 && m > i - 7 &&
      n >= 0 && n < game.rowNumber && n < j + 7 && n > i - 7) {
      var currentElement = game.board.find('.column').eq(m).find('.cell').eq(n);
      if (currentElement.length > 0 && currentElement.hasClass('player-' + player)) {
        streak++;
      } else {
        streak = 0;
      }
      if (streak == 4) {
        game.end();
        return true;
      }
      m = i_iterator(m);
      n = j_iterator(n);
    }
  }

  var i_horizontal = i - 3;
  i_horizontal = i_horizontal >= 0 ? i_horizontal : 0;
  looper(i_horizontal, j, player, function(i) {
    return i + 1;
  }, function(j) {
    return j;
  }); //horizontal

  var j_vertical = j - 3;
  j_vertical = j_vertical >= 0 ? j_vertical : 0;
  looper(i, j_vertical, player, function(i) {
    return i;
  }, function(j) {
    return j + 1;
  }); // vertical

  var i_diagonal1 = i - 3;
  i_diagonal1 = i_diagonal1 >= 0 ? i_diagonal1 : 0;
  var i_diff = i - i_diagonal1;
  var j_diagonal1 = j - i_diff;
  if (j_diagonal1 < 0) {
    j_diagonal1 = 0;
    var j_diff = j - j_diagonal1;
    i_diagonal1 = i - j_diff;

  }
  looper(i_diagonal1, j_diagonal1, player, function(i) {
    return i + 1;
  }, function(j) {
    return j + 1;
  }); // diagonal1

  var i_diagonal2 = i - 3;
  i_diagonal2 = i_diagonal2 >= 0 ? i_diagonal2 : 0;
  //calculate how far cursor was moved to move the second dimension at same length
  var i_diff2 = i - i_diagonal2;
  var j_diagonal2 = j + i_diff2;
  if (j_diagonal2 < 0) {
    j_diagonal2 = 0;
    //if second dimension's pointer is moved to far recalculate
    var j_diff2 = j_diagonal2 - j;
    i_diagonal2 = i - j_diff2;

  }
  looper(i_diagonal2, j_diagonal2, player, function(i) {
    return i + 1;
  }, function(j) {
    return j - 1;
  }); // diagonal2

}

game.end = function() {
  $('#board').find('.cell').removeClass('player-1').removeClass('player-2');
  this.player[this.activePlayer - 1].score++;
  $('#player1Score .score').text(this.player[0].score);
  $('#player1Score .score').text(this.player[1].score);
  alert("Player " + this.player[this.activePlayer - 1].name + " scores!");
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$board-color: #FF9457
$board-hover: #FF5C00
$cell-color: #FFF7F3
$player-1: #C1FC57
$player-2: #6979F4

*
  font-family: sans-serif
#board
  margin: 2em
  float: left
  .column
    background-color: $board-color
    float: left
    display:inline-block
    .cell
      width: 1em
      height: 1em
      margin: 0.5em
      background-color: $cell-color
      border-radius: 50%
      transition: background-color 0.3s
      &.player-1
        background-color: $player-1
      &.player-2
        background-color: $player-2
    &:hover
      background-color: $board-hover
      outline: 3px solid #FFBE9A
      position: relative
      z-index: 1
#menu
  background-color: #FFBE9A
  float: left
  width: 15em
  padding: 1em
  border-radius: 5px
  label
    display: block
    padding: .5em 1em
    &#player1
      background-color: $player-1
      input
        background-color: $player-1
    &#player2
      background-color: $player-2
      input 
        background-color: $player-2
  input
    float: right
  .score
    float: right
  #start
    border-radius: 5px