TRU Board Games Playground

  1. Introduction
  2. Download - libraries used in TRU Board Games Playground
  3. API
    • Each cell has
      • marks - Mark, Mark2, Mark3
      • background color
      • content
      • position - row and col
    • Board styles:
      • borderLine
      • noLine
      • centerLine
    • TRUGameBoard(n, m, board_style, height, width, cbcolor) - object constructor
      • n × m board
      • board_style - string
      • height of the board - integer for px; minimum 400
      • width of the board - integer for px; minimum 400
      • cell background color - string
    • Constants contained in the TRUGameBoard object
      • N - number of rows; board.N
      • M - number of columns
    • Functions contained in the TRUGameBoard object
      • draw(id_container) - draw the board into the HTML container of id='id_container'; E.g., board.draw('board-area');
      • cellContent(row, col) - return the cell content
      • cellContent(row, col, content) - set cell content with the default font size
      • cellContent(row, col, content, font_size) - set cell content with a specific font size
      • cellsEventListener(event_name, handler) - register an event handler on all cells; E.g, click, mouseenter/mouseleave
      • cellEventListener(row, col, event_name, handler) - register an event handler on a cell pointed by row and col; E.g, click, mouseenter/mouseleave
      • position(event_object) - return a position object, {row: ..., col: ...}, for the cell on which the event was triggered.
      • cellBackgroundColor(row, col) - return the background color of the cell pointed by row and col
      • cellBackgroundColor(row, col, cbcolor) - set the background color of the cell
      • cellMark(row, col) - return the 1st mark set in the cell, where mark is any value
      • cellMark(row, col, marker) - set a new 1st mark in the cell
      • cellMark2(row, col) - return the 2nd mark set in the cell, where mark is any value
      • cellMark2(row, col, marker) - set a new 2nd mark in the cell
      • cellMark3(row, col) - return the 3rd mark set in the cell, where mark is any value
      • cellMark3(row, col, marker) - set a new 3rd mark in the cell
      • switchCells(row0, col0, row1, col1) - switch all data stored in the two cells
    • Trial 1: Let's try to create a game board and display it. When you click a cell on the board, the color will be changed.