Редактирование: Крестики-нолики на js
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 13: | Строка 13: | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
− | var | + | var area = document.getElementById('area'); |
+ | var cell = document.getElementsByClassName('cell'); | ||
+ | var currentPlayer = document.getElementById('curPlyr'); | ||
+ | var player = "x"; | ||
+ | var stat = { | ||
+ | 'x': 0, | ||
+ | 'o': 0, | ||
+ | 'd': 0 | ||
+ | } | ||
+ | var winIndex = [ | ||
+ | [1,2,3], | ||
+ | [4,5,6], | ||
+ | [7,8,9], | ||
+ | [1,4,7], | ||
+ | [2,5,8], | ||
+ | [3,6,9], | ||
+ | [1,5,9], | ||
+ | [3,5,7] | ||
+ | ]; | ||
− | + | for(var i = 1; i <= 9; i++) { | |
− | + | area.innerHTML += "<div class='cell' pos=" + i + "></div>"; | |
+ | } | ||
− | + | for (var i = 0; i< cell.length; i++) { | |
− | + | cell[i].addEventListener('click', cellClick, false); | |
− | [ | + | } |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | function cellClick() { | |
− | |||
− | |||
− | + | var data = []; | |
− | + | ||
− | + | if(!this.innerHTML) { | |
− | + | this.innerHTML = player; | |
− | + | }else { | |
− | + | alert("Ячейка занята"); | |
− | + | return; | |
− | |||
} | } | ||
− | |||
− | + | for(var i in cell){ | |
− | + | if(cell[i].innerHTML == player){ | |
− | + | data.push(parseInt(cell[i].getAttribute('pos'))); | |
− | + | } | |
− | |||
} | } | ||
− | |||
− | + | if(checkWin(data)) { | |
− | + | stat[player] += 1; | |
− | + | restart("Выграл: " + player); | |
− | + | }else { | |
− | + | var draw = true; | |
− | } | + | for(var i in cell) { |
− | + | if(cell[i].innerHTML == '') draw = false; | |
− | + | } | |
− | + | if(draw) { | |
− | + | stat.d += 1; | |
− | + | restart("Ничья"); | |
− | |||
− | if ( | ||
− | |||
− | |||
} | } | ||
} | } | ||
− | + | player = player == "x" ? "o" : "x"; | |
− | + | currentPlayer.innerHTML = player.toUpperCase(); | |
} | } | ||
− | function | + | function checkWin(data) { |
− | for ( | + | for(var i in winIndex) { |
− | + | var win = true; | |
− | + | for(var j in winIndex[i]) { | |
− | + | var id = winIndex[i][j]; | |
− | + | var ind = data.indexOf(id); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | if(ind == -1) { | |
− | + | win = false | |
− | + | } | |
− | + | } | |
− | |||
− | |||
− | |||
− | } | ||
− | |||
− | |||
− | |||
− | |||
− | } | ||
− | + | if(win) return true; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
return false; | return false; | ||
− | |||
} | } | ||
− | |||
− | + | function restart(text) { | |
− | function | + | |
− | + | alert(text); | |
− | + | for(var i = 0; i < cell.length; i++) { | |
− | + | cell[i].innerHTML = ''; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | updateStat(); | ||
+ | } | ||
− | + | function updateStat() { | |
+ | document.getElementById('sX').innerHTML = stat.x; | ||
+ | document.getElementById('sO').innerHTML = stat.o; | ||
+ | document.getElementById('sD').innerHTML = stat.d; | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</div> | </div> |