Skip to main content
Code Review

Return to Answer

Commonmark migration
Source Link
Source Link
tim
  • 25.3k
  • 3
  • 31
  • 76

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.

lang-html

AltStyle によって変換されたページ (->オリジナル) /