рдПрдХ рдХрдордЬреЛрд░, рдмреЗрд╡рдХреВрдл, рд╕рдкрдиреЗ рджреЗрдЦрдиреЗ рд╡рд╛рд▓реЗ рдЯрд╛рдЗрдкрд╕реЗрдЯрд░ рдиреЗ рдПрдХ рдкреНрд░реЛрдЧреНрд░рд╛рдорд░ рдмрдирдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛ рдФрд░ рдЗрд╕рдореЗрдВ рд╕реЗ рдХреБрдЫ рднреА рдирд╣реАрдВ рдЖрдпрд╛ ... рд▓реЗрдХрд┐рди рдЙрдиреНрд╣реЛрдВрдиреЗ рдкреНрд░реЛрдЧреНрд░рд╛рдорд┐рдВрдЧ рдирд╣реАрдВ рдЫреЛрдбрд╝реА рдФрд░ рдЫреЛрдЯреЗ рдХрд╛рд░реНрдпрдХреНрд░рдореЛрдВ рдХреЗ рд╕рд╛рде рд╢реБрд░реБрдЖрдд рдХрд░рдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛ ...рдпрд╣ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╡рд┐рд╡рд░рдг рд╣реИ рдЬрд┐рд╕рдХреЗ рд╕рд╛рде рдореИрдВ рдЖ рд╕рдХрддрд╛ рд╣реВрдВред рдпрд╣ рдЗрд╕ рдЙрджреНрджреЗрд╢реНрдп рдХреЗ рд▓рд┐рдП рдерд╛ рдХрд┐ рдореИрдВрдиреЗ рдЕрдкрдиреЗ рдХреМрд╢рд▓ рдХреЛ рд╕реБрдзрд╛рд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЕрдкрдиреА рд╕рд╛рдорд╛рдиреНрдп рднрд╛рд╖рд╛ рдореЗрдВ рдирдП рдбрд┐рдЬрд╛рдЗрдиреЛрдВ рд╕реЗ рдкрд░рд┐рдЪрд┐рдд рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд░рд▓ рдХрд╛рд░реНрдпрдХреНрд░рдо рд▓рд┐рдЦрдирд╛ рд╢реБрд░реВ рдХрд┐рдпрд╛, рдФрд░ рдИрдорд╛рдирджрд╛рд░ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП, рдпрд╣ рднреА рдореБрдЭреЗ рдЦреБрд╢реА рджреЗрдиреЗ рд▓рдЧрд╛редрдпрджрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдереЛрдбрд╝рд╛ рд╡рд┐рдХрд╛рд╕ рдХрд╛ рдЕрдиреБрднрд╡ рд╣реИ, рддреЛ рд▓реЗрдЦ рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛, рдФрд░ рдпрджрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд╡рд┐рдХрд╛рд╕ рдХрд╛ рдЕрдиреБрднрд╡ рд╣реИ, рддреЛ рдХреБрдЫ рдЕрдзрд┐рдХ рд╕рд╛рд░реНрдердХ рдкрд░ рд╕рдордп рд╡реНрдпрддреАрдд рдХрд░реЗрдВредрдпрд╣ рдкреНрд░рд╢рд┐рдХреНрд╖рдг рдирд╣реАрдВ рд╣реИред рдПрдХ рдмреНрд▓реЙрдЧ рдХреА рддрд░рд╣редрдЦреЗрд▓ рдЯрд┐рдХ рдЯреАрдПрд╕реА рдХреЛ рдкреИрд░ рдХреА рдЕрдВрдЧреБрд▓реА рдХреЗ 3 рд╕рдВрд╕реНрдХрд░рдг рдмрдирд╛рдиреЗ рдХрд╛ рд▓рдХреНрд╖реНрдп рдерд╛ред1 - рд╕рдмрд╕реЗ рд╕рд░рд▓ ( рд╕реБрдВрджрд░ рджреГрд╢реНрдп рдХреЗ рдмрд┐рдирд╛, DOM рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ )2 - рдПрдХ рд╕рд╛рде рдЦреЗрд▓рдиреЗ рдХрд╛ рдЕрд╡рд╕рд░ рджреЗрдВ (рдПрдХ рдХрдВрдкреНрдпреВрдЯрд░ )3 - рдпрд╣ рд╕рдм рдХреИрдирд╡рд╕ рдкрд░ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░реЗрдВрдореИрдВ рдЯрд┐рдХ-рдЯреИрдХ-рдЯреЛ рдХрд╛ рд╡рд░реНрдгрди рдирд╣реАрдВ рдХрд░реВрдВрдЧрд╛, рдореБрдЭреЗ рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рд╣рд░ рдХреЛрдИ рдЦреЗрд▓ рдХреЗ рд╕рд┐рджреНрдзрд╛рдВрдд рдХреЛ рдЬрд╛рдирддрд╛ рд╣реИред рд╕рднреА рдЙрдкрдпреЛрдЧреА рд▓рд┐рдВрдХ (рд░рд┐рдкреЙрдЬрд┐рдЯрд░реА, рдкреНрд░рд▓реЗрдЦрди) рд▓реЗрдЦ рдХреЗ рдЕрдВрдд рдореЗрдВ рд╣реЛрдВрдЧреЗредрдпрд╣ рдХреНрдпрд╛ рдЖрдпрд╛? рд╣рдореНрдо ...рдкрд╣рд▓рд╛ рд╕рдВрд╕реНрдХрд░рдг
рдпрд╣ рд╕рдмрд╕реЗ рд╕рд░рд▓ рд╣реИред рдИрдорд╛рдирджрд╛рд░ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП, рдмрд╛рдж рдХреЗ рд╕рдВрд╕реНрдХрд░рдг рдореБрд╢реНрдХрд┐рд▓ рдирд╣реАрдВ рд╣реИрдВ ...рд╣рдореЗрдВ рдХрдВрдЯреЗрдирд░ рд╕реЗ рдПрдХ рд▓реЗрдЖрдЙрдЯ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд╣рдореЗрдВ рдЕрдкрдиреЗ рдЦреЗрд▓ рдХреЗ рдореИрджрд╛рди рдХреЛ рд░рдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред рдореИрдВрдиреЗ рдкреНрд░рддреНрдпреЗрдХ рддрддреНрд╡ рдореЗрдВ рдбреЗрдЯрд╛-рдЖрдЗрдЯрдо рдЬреЛрдбрд╝рд╛ рд╣реИ рдореИрдВрдиреЗ рд╕реЛрдЪрд╛ рдерд╛ рдХрд┐ рдореБрдЭреЗ рдПрдХ рдкрд╣рдЪрд╛рдирдХрд░реНрддрд╛ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд┐рдпрд╛ред<div class="app">
<div class="app_block" data-item="0"></div>
<div class="app_block" data-item="1"></div>
<div class="app_block" data-item="2"></div>
<div class="app_block" data-item="3"></div>
<div class="app_block" data-item="4"></div>
<div class="app_block" data-item="5"></div>
<div class="app_block" data-item="6"></div>
<div class="app_block" data-item="7"></div>
<div class="app_block" data-item="8"></div>
</div>
рдореИрдВ рдЖрдкрдХреЛ рддреБрд░рдВрдд рдЪреЗрддрд╛рд╡рдиреА рджреЗрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ! рдЗрд╕ рдХреЛрдб рдХреЛ рдХреЗрд╡рд▓ рд╕рдЪ рдХреЗ рд░реВрдк рдореЗрдВ рдирд╣реАрдВ рд▓рд┐рдЦрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЕрдиреНрдпрдерд╛ рдЧрд▓рддреА рдорд╛рдирд╛ рдЬрд╛рддрд╛ рд╣реИред рдпрд╣ рдореЗрд░рд╛ рд╕рдорд╛рдзрд╛рди рд╣реИ рдФрд░ рдЗрд╕рд╕реЗ рдЬреНрдпрд╛рджрд╛ рдХреБрдЫ рдирд╣реАрдВредрдЗрд╕рд▓рд┐рдПред рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рд╣рдореЗрдВ рд╕реЗрд▓ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдХреНрд▓рд┐рдХ рдХреЗ рджреМрд░рд╛рди рд╣рдо рдЪрд▓рддреЗ рд╣реИрдВ (рдмреЙрдЯ рднреА, рд▓реЗрдХрд┐рди рдмрджрд▓реЗ рдореЗрдВ) рдФрд░ рд╕реЗрд▓ рдХреА рдЬрд╛рдВрдЪ рдХрд░реЗрдВредvar items = document.getElementsByClassName("app_block");
var movePlayer = true;
var game = true;
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function() {
var collecion = document.querySelectorAll(".app_block:not(.active)");
if(collecion.length == 1) {
exit({win: "other"});
}
if( !this.classList.contains("active") ){
if( movePlayer) {
if(this.innerHTML == "") {
this.classList.add("active");
this.classList.add("active_x");
this.innerHTML = "x"
}
var result = checkMap();
if( result.val) {
game = false;
setTimeout(function() {
exit(result);
}, 10);
}
movePlayer = !movePlayer;
}
if(game) {
setTimeout(function() {
botMove();
}, 200);
}
}
});
}
рдмреЛрдЯ рдмреЗрддрд░рддреАрдм рдврдВрдЧ рд╕реЗ рдЪрд▓рддрд╛ рд╣реИредfunction botMove() {
var items = document.querySelectorAll(".app_block:not(.active)");
var step = getRandomInt(items.length);
items[ step ].innerHTML = "0";
items[ step ].classList.add("active");
items[ step ].classList.add("active_o");
var result = checkMap();
if( result.val) {
setTimeout(function() {
exit(result);
}, 1);
}
movePlayer = !movePlayer;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
рд╕реЗрд▓ рдХреА рдЬрд╛рдБрдЪfunction checkMap() {
var block = document.querySelectorAll(".app_block");
var items = [];
for (var i = 0; i < block.length; i++) {
items.push(block[i].innerHTML);
}
if ( items[0] == "x" && items[1] == 'x' && items[2] == 'x' ||
items[3] == "x" && items[4] == 'x' && items[5] == 'x' ||
items[6] == "x" && items[7] == 'x' && items[8] == 'x' ||
items[0] == "x" && items[3] == 'x' && items[6] == 'x' ||
items[1] == "x" && items[4] == 'x' && items[7] == 'x' ||
items[2] == "x" && items[5] == 'x' && items[8] == 'x' ||
items[0] == "x" && items[4] == 'x' && items[8] == 'x' ||
items[6] == "x" && items[4] == 'x' && items[2] == 'x' )
return { val: true, win: "player"}
if ( items[0] == "0" && items[1] == '0' && items[2] == '0' ||
items[3] == "0" && items[4] == '0' && items[5] == '0' ||
items[6] == "0" && items[7] == '0' && items[8] == '0' ||
items[0] == "0" && items[3] == '0' && items[6] == '0' ||
items[1] == "0" && items[4] == '0' && items[7] == '0' ||
items[2] == "0" && items[5] == '0' && items[8] == '0' ||
items[0] == "0" && items[4] == '0' && items[8] == '0' ||
items[6] == "0" && items[4] == '0' && items[2] == '0' )
return { val: true, win: "bot"}
return {val: false}
}
рдпрд╣рд╛рдБ рдЖрдк рдЫреЛрд░реЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рдм рдХреБрдЫ рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВред рдореИрдВрдиреЗ рдПрдХ рд╕рд░рд▓ рддрд░реАрдХрд╛ рдЪреБрдирд╛ред рдореЗрд░рд╛ рдХреНрд╖реЗрддреНрд░ рд╣рдореЗрд╢рд╛ рд╕реНрдерд┐рд░ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдХреЛрд╢рд┐рдХрд╛рдУрдВ рдХреА рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдЬрд╛рдВрдЪред рдпрд╣ рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рд╣реИ рдХрд┐ рдореИрдВ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдЬрд╛рдВрдЪ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд╕реНрддреБ рд╡рд╛рдкрд╕ рдХрд░рддрд╛ рд╣реВрдВ рдХрд┐ рдХреМрди рдЬреАрддрд╛ред рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ, рд╡реИрд▓ рдФрд░ рд╡рд┐рди рдкреНрд░реЙрдкрд░реНрдЯреАрдЬред рд╡реИрд▓ рдЦреЗрд▓ рдХреЛ рд╕рдорд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╣реИредрдЦреЗрд▓ рдХрд╛ рдЕрдВрддред
function exit(obj) {
alert(obj.win + " - game over");
location.reload();
};
рдХреНрд▓рд┐рдХ рдХреЗ рджреМрд░рд╛рди, рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдЪреЗрдХ рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдЪреЗрдХрдкреЙрдЗрдВрдЯ рд╡реИрд▓ рд▓реМрдЯрд╛ рд╣реИ: рд╕рдЪред рдпрджрд┐ рд╣рд╛рдВ, рддреЛ рдЦреЗрд▓ рдХреЛ рдкреВрд░рд╛ рдХрд░реЗрдВредрджреВрд╕рд░рд╛ рд╕рдВрд╕реНрдХрд░рдг
рдПрдХ рд╣реА рдХрдВрдкреНрдпреВрдЯрд░ рдкрд░ рджреЛ рдЦрд┐рд▓рд╛рдбрд╝реАредрдореИрдВрдиреЗ рдХреНрд▓рд┐рдХ рд╣реИрдВрдбрд▓рд░ рд╕реЗ рдПрдХ рдЕрд▓рдЧ рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ рддрд░реНрдХ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд▓рд┐рдпрд╛ рдФрд░ рдХреЙрд▓ рд╕рдВрджрд░реНрдн рдХреЛ рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ рдкрд╛рд╕ рдХрд┐рдпрд╛, рдХреНрдпреЛрдВрдХрд┐ рд╣рдореЗрдВ рдпрд╣ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдХрд┐ рдХрд┐рд╕ рдмрдЯрди рдкрд░ рдХреНрд▓рд┐рдХ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛редvar items = document.getElementsByClassName("app_block");
var movePlayer = true;
var game = true;
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function() {
var collecion = document.querySelectorAll(".app_block:not(.active)");
if(collecion.length == 1) {
exit({win: "other"});
}
if( !this.classList.contains("active") ){
if( movePlayer) {
firstPlayer(this);
} else {
secondPlayer(this);
}
}
});
}
рдореИрдВ рджреЛ рдХрд╛рд░реНрдпреЛрдВ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рд╣реВрдВ, рд▓реЗрдХрд┐рди рдЙрдирдХреЗ рдкрд╛рд╕ рдХреЛрдб рджреЛрд╣рд░рд╛рд╡ рд╣реИред рдЖрджрд░реНрд╢ рд░реВрдк рд╕реЗ, 3 рд╕реЗ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░реЗрдВред рдПрдХ рдореБрдЦреНрдп, рдФрд░ рджреЛ рд╕рдВрджрд░реНрдн рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдирд╛редfunction firstPlayer(that) {
if(that.innerHTML == "") {
that.classList.add("active");
that.classList.add("active_x");
that.innerHTML = "x"
}
var result = checkMap();
if( result.val) {
game = false;
setTimeout(function() {
exit(result);
}, 10);
}
movePlayer = !movePlayer;
}
function secondPlayer(that) {
if(that.innerHTML == "") {
that.classList.add("active");
that.classList.add("active_o");
that.innerHTML = "0"
}
var result = checkMap();
if( result.val) {
game = false;
setTimeout(function() {
exit(result);
}, 10);
}
movePlayer = !movePlayer;
}
рддреАрд╕рд░рд╛ рд╕рдВрд╕реНрдХрд░рдг
рд╢рд╛рдпрдж рдпрд╣ рд╕рдмрд╕реЗ рджрд┐рд▓рдЪрд╕реНрдк рдмрд┐рдВрджреБ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдЕрдм рдЦреЗрд▓ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдПрдХ рдЦреЗрд▓ рдХреА рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ, рди рдХрд┐ рдбреЛрдо рддрддреНрд╡реЛрдВ рдХреА рдмрд╛рддрдЪреАрддредрдореИрдВрдиреЗ рдкрд┐рдХреНрд╕реАрдЬ рдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЪреБрдирд╛ред рдореИрдВ рдЗрд╕ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЗ + рдФрд░ - рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреБрдЫ рдирд╣реАрдВ рдХрд╣ рд╕рдХрддрд╛, рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдПрдХ рдЙрджрд╛рд╣рд░рдг рджреЗрдЦрд╛ рдЬрд┐рд╕рдореЗрдВ 60,000 рддрддреНрд╡ рдереЗ рдФрд░ рд╡реЗ рд╕рднреА рдПрдирд┐рдореЗрдЯреЗрдб рдереЗред рдПрдиреАрдореЗрд╢рди рд╕рд░рд▓ рд╣реИ, рд▓реЗрдХрд┐рди рдПрдлрдкреАрдПрд╕ 50-60 рдкрд░ рд░рд╣рд╛ред рдореБрдЭреЗ рдпрд╣ рдкрд╕рдВрдж рдЖрдпрд╛ рдФрд░ рдореИрдВрдиреЗ рдкреНрд░рд▓реЗрдЦрди рдкрдврд╝рдирд╛ рд╢реБрд░реВ рдХрд┐рдпрд╛ред рдореБрдЭреЗ рддреБрд░рдВрдд рдХрд╣рдирд╛ рд╣реЛрдЧрд╛ рдХрд┐ рдЕрдВрдЧреНрд░реЗрдЬреА рднрд╛рд╖рд╛ рдХрд╛ рдореЗрд░рд╛ рдЬреНрдЮрд╛рди рдиреНрдпреВрдирддрдо рд╣реИ, рдпрд╣ рдореБрд╢реНрдХрд┐рд▓ рдерд╛, рд▓реЗрдХрд┐рди рд░реВрд╕реА рдореЗрдВ рдмрд╣реБрдд рдХрдо рд▓реЗрдЦ рд╣реИрдВ (рдпрд╛ рдореИрдВрдиреЗ рдЦрд░рд╛рдм рджреЗрдЦрд╛ рд╣реИ)ред рдореБрдЭреЗ рдкреНрд░рд╣рд╛рд░ рдХрд░рдирд╛ рдкрдбрд╝рд╛ рдФрд░ рдХрд╛рдВрдЯреЛрдВ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ Google рдЕрдиреБрд╡рд╛рджрдХ рдХреА рдорджрдж рд╕реЗредрдореИрдВрдиреЗ рдпреВрд▓рд┐рдпрд╛ рдкреБрдХреНрдирд┐рдирд╛ рджреНрд╡рд╛рд░рд╛ рдЗрд╕ рд╡рд┐рд╖рдп рдкрд░ рдХреЗрд╡рд▓ рдПрдХ рд░рд┐рдкреЛрд░реНрдЯ рджреЗрдЦреА "рдкрд┐рдХреНрд╕реА рдЬреЗрдПрд╕ рдХреЗ рд╕рд╛рде рд╡рд╕рд╛ рдПрдиреАрдореЗрд╢рди" редрд░рд┐рдкреЛрд░реНрдЯ 2014 рдХреА рд╣реИ рдФрд░ рдЖрдкрдХреЛ рдпрд╣ рд╕рдордЭрдиреЗ рдХреА рдЬрд░реВрд░рдд рд╣реИ рдХрд┐ рдПрдкреАрдЖрдИ рдмрджрд▓ рд╕рдХрддрд╛ рд╣реИред рдПрдХ рдирдЬрд╝рд░ рдбреЙрдХреНрдпреВрдореЗрдВрдЯреЗрд╢рди рдкрд░, рдФрд░ рджреВрд╕рд░реА рд╡реАрдбрд┐рдпреЛ рдкрд░ред рдЗрд╕рд▓рд┐рдП рдореИрдВрдиреЗ рдкрдврд╝рд╛рдИ рдХреАред рдЗрддрдирд╛ рд╕рд░рд▓ рдкреНрд░реЛрдЯреЛрдЯрд╛рдЗрдк рд▓рд┐рдЦрдиреЗ рдореЗрдВ 4 рдШрдВрдЯреЗ рдХрд╛ рд╕рдордп рд▓рдЧрд╛ред рдХреЛрдб рдХреЗ рдХрд░реАрдмредрд╣рдо рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЗрдирд┐рд╢рд┐рдпрд▓рд╛рдЗрдЬрд╝реЗрд╢рди рдкрд┐рдХреНрд╕реА рдмрдирд╛рддреЗ рд╣реИрдВconst app = new PIXI.Application({
width: 720,
height: 390,
resolution: window.devicePixelRation || 1,
});
document.body.appendChild(app.view);
рдФрд░ рдПрдХ рдЖрд╡рд░рдг (рдХреЛрд╢рд┐рдХрд╛рдУрдВ рдХреЗ рд╕рд╛рде рдореБрдЦреНрдп рдХрдВрдЯреЗрдирд░) рднреА рдмрдирд╛рдПрдВ рдФрд░ рдЗрд╕реЗ рд╣рдорд╛рд░реЗ рдХреИрдирд╡рд╛рд╕ рдореЗрдВ рдбрд╛рд▓реЗрдВlet wrapper = new PIXI.Container();
app.stage.addChild(wrapper);
рд▓реВрдк рдореЗрдВ, рд╣рдо рдЕрдкрдиреА рдХреЛрд╢рд┐рдХрд╛рдУрдВ рдХреЛ рдмрдирд╛рддреЗ рд╣реИрдВ, рдЙрдиреНрд╣реЗрдВ рдЖрд╡рд╢реНрдпрдХ рдЖрдХрд╛рд░, рдирд┐рд░реНрджреЗрд╢рд╛рдВрдХ рд╕реЗрдЯ рдХрд░рддреЗ рд╣реИрдВ, рдФрд░ рд╕реЗрд▓ рд╕реЗ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдорд╛рди рдХреЛ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ рдХрдВрдЯреЗрдирд░ рдХреА рдЕрдиреНрддрд░рдХреНрд░рд┐рдпрд╛рд╢реАрд▓рддрд╛ рдзреНрд╡рдЬ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрд╣ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдХрд╛рдо рдЖрдПрдЧрд╛ рдФрд░ рдХреЛрд╢рд┐рдХрд╛рдУрдВ рдкрд░ рд╣реИрдВрдбрд▓рд░ рд▓рдЯрдХрд╛рдПрдЧрд╛редfor (let i = 0; i < 9; i++) {
let container = new PIXI.Container();
let block = new PIXI.TilingSprite( PIXI.Texture.from("images/bg.png") , 240, 130);
container.x = (i % 3) * 240;
container.y = Math.floor(i / 3) * 130;
container.addChild(block);
let text = new PIXI.Text("");
text.anchor.set(0.5);
text.x = container.width / 2;
text.y = container.height / 2;
container.addChild(text);
container.interactive = true;
container.on("mousedown", function () {
addValueInBlock(this);
});
wrapper.addChild(container);
}
addValueInBlock рдкреНрд░рддреНрдпреЗрдХ рдЦрд┐рд▓рд╛рдбрд╝реА рдХреА рдкреНрд░рдЧрддрд┐ рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╣реИред рдореБрдЭреЗ рдкреНрд░рддреНрдпреЗрдХ рдкрд╛рда рдХреЗ рд▓рд┐рдП рдЕрдкрдиреА рд╕реНрд╡рдпрдВ рдХреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕рд╕реЗ рдмреЗрд╣рддрд░ рддрд░реАрдХрд╛ рдирд╣реАрдВ рдорд┐рд▓рд╛ред рд╡рд╣рд╛рдВ рд░рдВрдЧ рдмрджрд▓рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд╕рдордЭ рдирд╣реАрдВ рдЖрдпрд╛ рдХрд┐ рд░рдВрдЧ рдХреИрд╕реЗ рдмрджрд▓рд╛ рдЬрд╛рдПред рд╣рд░ рдмрд╛рд░ рдирдИ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдкрд╛рда рдХреЛ рд╕реМрдВрдкрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рд╕рд╛рде рд╣реА рдХреЛрд╢рд┐рдХрд╛рдУрдВ рдХреА рдЬрд╛рдВрдЪ рднреА рд╣реЛрддреА рд╣реИредfunction addValueInBlock(that) {
if(firstPlayer) {
if( that.children[1].text == " " ) {
that.children[1].style = {
fill: "#d64c42",
fontFamily: "Arial",
fontSize: 32,
fontWeight: "bold",
};
that.children[1].text = "x"
firstPlayer = !firstPlayer;
}
} else {
if( that.children[1].text == " " ) {
that.children[1].style = {
fill: "#e2e3e8",
fontFamily: "Arial",
fontSize: 32,
fontWeight: "bold",
};
that.children[1].text = "0"
firstPlayer = !firstPlayer;
}
}
endGame();
}
рд╕рддреНрдпрд╛рдкрди рдХреЗ рд╕рдВрдмрдВрдз рдореЗрдВ рд╣реАред checkMapред рдЬреИрд╕рд╛ рдХрд┐ рдореИрдВ рдЗрд╕реЗ рд╕рдордЭрддрд╛ рд╣реВрдВ, PixiJS рдХрд┐рд╕реА рддрддреНрд╡ рдХреЛ рдирд╛рдо рдпрд╛ рдЖрдИрдбреА рджреНрд╡рд╛рд░рд╛ рдПрдХреНрд╕реЗрд╕ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реИред рд╣рдореЗрдВ рдХрдВрдЯреЗрдирд░ рдореЗрдВ рдкреВрд░реЗ рд╕рдВрдЧреНрд░рд╣ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдХреНрд░рдордмрджреНрдз рдХрд░рдирд╛ рд╣реЛрдЧрд╛ рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕рдХреА рд╡рдЬрд╣ рд╕реЗ рдХреЛрдб рдмреЛрдЭрд┐рд▓ рд▓рдЧрддрд╛ рд╣реИред рдлрд╝рдВрдХреНрд╢рди рдкрд┐рдЫрд▓реЗ рд╡рд╛рд▓реЗ рд╕реЗ рдЕрд▓рдЧ рдирд╣реАрдВ рд╣реИ, рдорд╛рдкрджрдВрдбреЛрдВ рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЬреЛ рдЗрд╕реЗ рд╡рд╛рдкрд╕ рдХрд░рддрд╛ рд╣реИредfunction checkMap() {
let items = wrapper.children;
if ( items[0].children[1].text == "x" && items[1].children[1].text == 'x' && items[2].children[1].text == 'x' ||
items[3].children[1].text == "x" && items[4].children[1].text == 'x' && items[5].children[1].text == 'x' ||
items[6].children[1].text == "x" && items[7].children[1].text == 'x' && items[8].children[1].text == 'x' ||
items[0].children[1].text == "x" && items[3].children[1].text == 'x' && items[6].children[1].text == 'x' ||
items[1].children[1].text == "x" && items[4].children[1].text == 'x' && items[7].children[1].text == 'x' ||
items[2].children[1].text == "x" && items[5].children[1].text == 'x' && items[8].children[1].text == 'x' ||
items[0].children[1].text == "x" && items[4].children[1].text == 'x' && items[8].children[1].text == 'x' ||
items[6].children[1].text == "x" && items[4].children[1].text == 'x' && items[2].children[1].text == 'x' ) {
return {active: true, win: "player 1"};
}
if ( items[0].children[1].text == "0" && items[1].children[1].text == '0' && items[2].children[1].text == '0' ||
items[3].children[1].text == "0" && items[4].children[1].text == '0' && items[5].children[1].text == '0' ||
items[6].children[1].text == "0" && items[7].children[1].text == '0' && items[8].children[1].text == '0' ||
items[0].children[1].text == "0" && items[3].children[1].text == '0' && items[6].children[1].text == '0' ||
items[1].children[1].text == "0" && items[4].children[1].text == '0' && items[7].children[1].text == '0' ||
items[2].children[1].text == "0" && items[5].children[1].text == '0' && items[8].children[1].text == '0' ||
items[0].children[1].text == "0" && items[4].children[1].text == '0' && items[8].children[1].text == '0' ||
items[6].children[1].text == "0" && items[4].children[1].text == '0' && items[2].children[1].text == '0' ) {
return {active: true, win: "player 2"};
}
return {active: false};
}
рдЦреИрд░, рдЕрдВрддрд┐рдо рджреЛ рдХрд╛рд░реНрдп рдЦреЗрд▓ рдХреЛ рд╕рдорд╛рдкреНрдд рдХрд░рдиреЗ рдФрд░ рдХреИрдирд╡рд╛рд╕ рдХреЛ рд╕рд╛рдл рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╣реИрдВред рдореБрдЭреЗ рдРрд╕рд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ рдХрд┐ рдпрд╣рд╛рдБ рдХреА рд╡реНрдпрд╛рдЦреНрдпрд╛ рдЕрддрд┐рд╢реНрдпреЛрдХреНрддрд┐рдкреВрд░реНрдг рд╣реИредfunction endGame() {
var result = checkMap();
console.log(result);
if( result.active ) {
setTimeout(function() {
alert(result.win + " - win");
clearMap();
}, 100);
}
}
function clearMap() {
console.log("sdf");
let items = wrapper.children;
for(let i = 0; i < items.length; i++) {
console.log( items[i].children[1].text );
items[i].children[1].text = "";
firstPlayer = true;
}
}
рд╕рдВрдХреНрд╖реЗрдк рдореЗрдВ, рд╡рд┐рдХрд╛рд╕ рдХреЛ рдХрдИ рдЪрд░рдгреЛрдВ рдореЗрдВ рдкреВрд░рд╛ рдХрд░рдирд╛ рджрд┐рд▓рдЪрд╕реНрдк рдерд╛ред рдпрд╣ рдПрдХ рдЖрджрд░реНрд╢ рд╡рд┐рдХрд╛рд╕ рдЪрдХреНрд░ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЬреЛ рд╢реБрд░реВ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдЙрд╕рдХреЗ рд╕рд╛рдередрдкрдврд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж рдФрд░ рдЬрд▓реНрдж рд╣реА рдорд┐рд▓рддреЗ рд╣реИрдВредрд╕рдВрджрд░реНрдн
рдЬреАрдердм рдХреАрд░рд┐рдкреЛрд░реНрдЯред рдкрд┐рдХреНрд╕реАрдЬ рд╡реЗрдмрд╕рд╛рдЗрдЯ