Ciao @KillerWorm ho una pagina ma non saprei se gli elementi sono già definiti nel DOM, ti incollo il codice e ti linko la pagina http://android0.altervista.org/Tris-js-original.html.
codice:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, shrink-to-fit=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>Tic-Tac-Toe Game written in Javascript</title>
<style>
body {
background: #ffffff;
font: normal 16px courier, arial;
text-align: center;
}
.tic-tac-toe .scoreboard {
margin: auto;
}
.tic-tac-toe .scoreboard .score {
text-align: center;
font-size: 80px
}
.tic-tac-toe .scoreboard .score.X {
color: #238EE1;
}
.tic-tac-toe .scoreboard .score.O {
color: #FF1010;
}
.tic-tac-toe .board table {
cell-spacing: 0px;
border-spacing: 0px;
border-collapse: collapse;
margin-top: 30px;
margin-bottom: 30px;
margin: 30px auto;
}
.tic-tac-toe .board td {
border: 4px solid #000;
height: 100px;
width: 100px;
text-align: center;
font: 200 60px helvetica neue, arial;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tic-tac-toe .board tr:first-child td {
border-top: none
}
.tic-tac-toe .board tr:last-child td {
border-bottom: none
}
.tic-tac-toe .board tr td:first-child {
border-left: none;
}
.tic-tac-toe .board tr td:last-child {
border-right: none;
}
.tic-tac-toe .board td.X {
color: #238EE1;
}
.tic-tac-toe .board td.O {
color: #FF1010;
}
</style>
<script src="https://code.jquery.com/jquery-1.0.js"></script>
</head>
<body dir="ltr" style="background:#ffffff;">
<h1 class="title"> Tic-Tac-Toe scritto in Javascript </h1>
<div class="game-panel">
<div class="tic-tac-toe">
<table class="scoreboard">
<tbody><tr>
<td> Giocatore 1 </td>
<td width="30"> </td>
<td> Giocatore 2 </td>
</tr>
<tr>
<td class="score X">0</td>
<td> </td>
<td class="score O">0</td>
</tr>
</tbody></table>
<div class="board"><table><tbody><tr><td row="0" column="0"></td><td row="0" column="1"></td><td row="0" column="2"></td></tr><tr><td row="1" column="0"></td><td row="1" column="1"></td><td row="1" column="2"></td></tr><tr><td row="2" column="0"></td><td row="2" column="1"></td><td row="2" column="2"></td></tr></tbody></table></div>
<button class="btn-reset"> Reset </button>
<select class="grid-options">
<option value="2"> 2 X 2 </option>
<option value="3" selected=""> 3 X 3 </option>
<option value="4"> 4 X 4 </option>
<option value="5"> 5 X 5 </option>
<option value="6"> 6 X 6 </option>
</select>
</div>
</div>
<script>
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 = mark(e);
})
}
}
function mark(e) {
var evt = e || event;
var td = evt.target || evt.srcElement;
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++;
(function($) {
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();
}
})(jQuery);
}
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);
}
}</script>
<script>
TicTacToe('.game-panel');
</script>
</body>
</html>
Nella pagina ho utilizzato una funzione anonima self-invoking (IIFE) e non saprei se gli elementi sono già definiti nel DOM. Grazie per la cordialità e disponibilità.
.
Rispondi quotando
tutti gli elementi del DOM mi pare vengano creati prima che sia eseguito quello script. Quindi non serve nessun ready in questo caso ma non serve nemmeno quella IIFE a mio parere.
