This is not a complete review, just a couple of points that jumped out at me:
JavaScript
Naming
Short variable names are hard to understand.
While ctx
, e
, etc are somewhat standard, r
, lineW
, w
, coor
, b
, t
, c
, b
, s
, p
, mArr
, ver
, etc are not and it is very hard to understand what they represent.
Will you in six month still understand what gameBoard = function (t, c, r)
is without searching in the code? I would guess not. But if you use gameBoard = function (tileWidth, columnCount, rowCount)
, it is immediately clear what it does.
So my recommendation would be: find good variable names for the one character names, and write out the abbreviated names (ver
, hor
, etc).
Some function names also do not express well what they do: draw
might be better named drawGameField
and moveO
better drawO
(same for moveX
).
Bugs
If I set row and column count to a number different from 3, it seems that nobody can win.
Long functions
The move
function is definitely too long. I would at least extract the two red redraws to their own function.
Saving fields in local variables
In your move
method, you save fields in local variables:
var width = this.TILEWIDTH,
ctx = this.CTX,
board = this.board,
blen = board.length;
Why are you doing this instead of using the fields directly? This seems unnecessary and confusing.
Functions of Board
Why are some functions not part of board? move
is, but moveX
and moveO
are not, for example. This seems odd.
Comments
Comments on functions are especially important when the variable names are not too good. But even if you change them, I would still like some comments.
For example: What is the acceptable range for tile width? If I use for example 50, the board does not look good anymore.
Another example: What happens if I set row and column to 4 instead of 3?
And one last example: What does draw
draw? Everything? Or only the game field, but not the players choices?
Reset
I extracted your init code in a function:
var b;
// Initialize Game
function init() {
b = new Board("game", 3, 3),
resetcon = document.getElementById("reset");
b.draw();
b.updateScoreBoard();
//Add event listeners for click or touch
window.addEventListener("click", clickTouch, false);
window.addEventListener("touchstart", clickTouch, false);
resetcon.addEventListener("click", clickTouchReset, false);
resetcon.addEventListener("touchstart", clickTouchReset, false);
}
init();
And changed your reset function like this:
Board.prototype.reset = function(x) {
this.CANVAS.width = this.CANVAS.width; // clear canvas
init();
};
And I removed this.reset();
from move
. Now the reset works without reloading each time.
CSS
I would put this in an external css file, and format it properly (each attribute on its own line, etc.). If you care about performance, minify with a tool later instead of writing harder to read code.