0

everyone! Yesterday, I started making a tic-tac-toe game for a website I wanted to make. After about 10 hours of working on it, I came up with about 150 lines of code just for the simple game. As usual when I make a large chunk of code, something, which I can't identify, went wrong. My whole entire code didn't work. Because of the large chunk of code, I copy pasted my code into a jsFiddle project, url shown below. My question is: can I use arrays or something of that type to lessen the number of if statements and redundancies? If anyone one can also help me create a faster, more efficient, code, I would be very thankful. Thanks in advance!

jsfiddle.net/justinpchang/3L6tp/

2
  • 2
    If you're looking at improving code quality in general, you could go here: codereview.stackexchange.com
    – Ian
    Jun 21, 2013 at 17:26
  • I would suggest you to NEVER write your id tag that way you do (id = "something"). Proper way: id="something".
    – Jeff Noel
    Jun 21, 2013 at 17:30

3 Answers 3

3

Have you tried running it through JSLint? It validates your code and looks for potential bugs. It will also hurt your feelings.

8
  • 2
    Up-vote for your humorous and truthful answer. Jun 21, 2013 at 17:22
  • half of the problems on jslint was spaces that their compiler didn't like. Jun 21, 2013 at 17:23
  • 1
    JSHint is more forgiving/configurable. I like JSLint though :)
    – Ian
    Jun 21, 2013 at 17:25
  • 1
    @justinpchang Fix the errors in your jsfiddle and click on the "JSHint" button. Its suggestions are a bit more reasonable.
    – JJJ
    Jun 21, 2013 at 17:30
  • 1
    @justinpchang You gotta learn how to use it :) JSLint has no idea what jQuery is, so you have to declare it in the globals textbox, or annotate it properly
    – Ian
    Jun 21, 2013 at 17:30
2

Why not have something like this :

/* This represents the current game, declare it upon starting a new game*/
var board = [['-','-','-'],['-','-','-'],['-','-','-']];

function notTaken(board,row,col) {
    return (board[row][col] == '-');
}

function hasX(board,row,col) {
    return (board[row][col] == 'x');
} // have a similar function for O

This eliminates a lot of redundancy in your code. Also, with HTML5 you can add custom attributes to your div elements which will specify the row and column of the cell. So top-mid div for example would have attributes "data-row" and "data-col" and values 0 and 1 respectively. I think the attribute names have to start with "data-" but I'm not sure.

Oh and one other thing: Never compare booleans to true or false, it is redundant. instead of doing: (some_bool != false) Just do: (some_bool)

Since booleans can only be true or false anyways. Similarly: (some_bool == false) Can just be written as: !(some_bool)

Hope this helps.

0
0

By copy/pasting code all over the place you defeat the purpose of programming... Try to find a pattern in your code, and make functions to do the same thing with different variables. Then it will be more readable and extensible.

Not the answer you're looking for? Browse other questions tagged or ask your own question.