Учим Java Script: Учим JavaScript. 31. Крестики-нолики

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="game"></div>
</body>
</html>

style.css
#game {
width: 150px;
height: 150px;
background: orangered;
}

.block {
width: 50px;
height: 50px;
float: left;
border: 1px solid white;
box-sizing: border-box;
line-height: 50px;
text-align: center;
font-size: 40px;
text-transform: uppercase;
}

1.js
for(var i=0; i<9; i++) {
document.getElementById('game').innerHTML+='<div class="block"></div>';
}

var hod = 0;

document.getElementById('game').onclick = function(event) {
//console.log(event);

if(event.target.className == 'block') {
if(hod % 2 == 0) {
event.target.innerHTML = 'x';
}
else {
event.target.innerHTML = '0';
}
hod++;
checkWinner();
}
}

function checkWinner() {
var allblock = document.getElementsByClassName('block');
console.log(allblock);
// КРЕСТИКИ
// Горизонталь.
if(allblock[0].innerHTML=='x' && allblock[1].innerHTML=='x' && allblock[2].innerHTML=='x') {
alert('Победили крестики!');
}

if(allblock[3].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[5].innerHTML=='x') {
alert('Победили крестики!');
}

if(allblock[6].innerHTML=='x' && allblock[7].innerHTML=='x' && allblock[8].innerHTML=='x') {
alert('Победили крестики!');
}

// Вертикаль.
if(allblock[0].innerHTML=='x' && allblock[3].innerHTML=='x' && allblock[6].innerHTML=='x') {
alert('Победили крестики!');
}

if(allblock[1].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[7].innerHTML=='x') {
alert('Победили крестики!');
}

if(allblock[2].innerHTML=='x' && allblock[5].innerHTML=='x' && allblock[8].innerHTML=='x') {
alert('Победили крестики!');
}

// Диагональ
if(allblock[0].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[8].innerHTML=='x') {
alert('Победили крестики!');
}

if(allblock[2].innerHTML=='x' && allblock[4].innerHTML=='x' && allblock[6].innerHTML=='x') {
alert('Победили крестики!');
}

// НОЛИКИ.
// Горизонталь.
if(allblock[0].innerHTML=='0' && allblock[1].innerHTML=='0' && allblock[2].innerHTML=='0') {
alert('Победили нолики!');
}

if(allblock[3].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[5].innerHTML=='0') {
alert('Победили нолики!');
}

if(allblock[6].innerHTML=='0' && allblock[7].innerHTML=='0' && allblock[8].innerHTML=='0') {
alert('Победили нолики!');
}

// Вертикаль.
if(allblock[0].innerHTML=='0' && allblock[3].innerHTML=='0' && allblock[6].innerHTML=='0') {
alert('Победили нолики!');
}

if(allblock[1].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[7].innerHTML=='0') {
alert('Победили нолики!');
}

if(allblock[2].innerHTML=='0' && allblock[5].innerHTML=='0' && allblock[8].innerHTML=='0') {
alert('Победили нолики!');
}

// Диагональ
if(allblock[0].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[8].innerHTML=='0') {
alert('Победили нолики!');
}

if(allblock[2].innerHTML=='0' && allblock[4].innerHTML=='0' && allblock[6].innerHTML=='0') {
alert('Победили нолики!');
}

}

Учим Java Script

среда, 2 августа 2017 г.

Учим JavaScript. 31. Крестики-нолики

Комментариев нет:

Отправить комментарий

среда, 2 августа 2017 г.

Учим JavaScript. 31. Крестики-нолики

Комментариев нет:

Отправить комментарий

среда, 2 августа 2017 г.