Ciao andreadev per prima riga all'interno della funzione mark intendi questo:
$('td').click(function() {
e ultima riga all'interno della funzione mark intendo questo:
if (didWin(current_mark)) {
alert(current_mark + ' vince la partita!');
scores[current_mark]++;
updateScoreboard();
empty();
} else if (moves === Math.pow(grid_size, 2)) {
alert("Pareggio!");
empty();
}
})
}
Ho provato ma visualizzo l'errore che mark e TicTacToe non sono definiti.
Poi ho provato ad definire l'evento onclick direttamente sulla funzione "mark":
function TicTacToe(selector) {
var main_element = $(selector)[0],
score_X = $('.score.X')[0],
score_O = $('.score.O')[0],
board = $('.board')[0],
grid_options = $('.grid-options')[0],
reset_btn = $('.btn-reset')[0];
var grid_size = 3,
moves = 0,
scores = {
X: 0,
O: 0
},
data = {};
$('.grid-options').change(function(e) {
grid_size = $(this).val();
init();
});
init();
$('.btn-reset').click(function(e) {
reset_btn = init();
});
function paint() {
var table = '<table>';
for (var i = 0; i < grid_size; i++) {
table += '<tr>';
for (var j = 0; j < grid_size; j++) {
table += '<td row="' + i + '" column="' + j + '"></td>';
}
table += "</tr>";
}
$(board).html(table);
var columns = $('td');
for (i = 0; i < columns.length; i++) {
$(columns[i]).click(function(e) {
td = $('td');
})
}
}
$('td').click(function mark(e) {
var td = $(this);
if ($(td).html()) {
return;
}
var row = $(td).attr('row'),
column = $(td).attr('column');
var current_mark = moves % 2 === 0
? 'X'
: 'O';
$(td).html(current_mark);
$(td).addClass(current_mark);
data[row + '' + column] = current_mark;
moves++;
if (didWin(current_mark)) {
alert(current_mark + ' vince la partita!');
scores[current_mark]++;
updateScoreboard();
empty();
} else if (moves === Math.pow(grid_size, 2)) {
alert("Pareggio!");
empty();
}
})
function didWin(mark) {
var vertical_count = 0,
horizontal_count = 0,
right_to_left_count = 0,
left_to_right_count = 0;
for (var i = 0; i < grid_size; i++) {
vertical_count = 0;
horizontal_count = 0;
for (var j = 0; j < grid_size; j++) {
if (data[i + '' + j] == mark) {
horizontal_count++;
}
if (data[j + '' + i] == mark) {
vertical_count++;
}
}
if (data[i + '' + i] == mark) {
left_to_right_count++;
}
if (data[(grid_size - 1 - i) + '' + i] == mark) {
right_to_left_count++;
}
if (horizontal_count == grid_size || vertical_count == grid_size) {
return true;
}
}
if (left_to_right_count == grid_size || right_to_left_count == grid_size) {
return true;
}
return false;
}
function empty() {
moves = 0;
paint();
data = {};
}
function init() {
empty();
scores = {
X: 0,
O: 0
};
updateScoreboard();
}
function updateScoreboard() {
$('.score.X').html(scores.X);
$('.score.O').html(scores.O);
}
}
Funziona al primo click ma il problema che quando si cambia la dimensione della griglia o quando la partita è terminata le caselle non sono più cliccabili e penso il problema possa dipendere dall'evento onclick sulla funzione "mark". Allego il link della pagina aggiornato . Quello che sto cercando di fare è sostituire event.target con l'evento onclick per riempire le caselle con "X" o "O" ma non saprei come fare. Grazie per la cordialità.