Two completely identical parts can be identified in the code provided. They even have comments: You won. and You lost.The only difference is the number compared (1.0) and the resulting text.The same part can therefore be considered as:vinner = checkState(1, 'win');
if(!vinner) vinner = checkState(0, 'low');
where checkState will be as follows:function checkState(player, text){
if (arr1[0] === player && arr1[1] === player && arr1[2] === player) {
$("#vin").text(text);
$("#a0").css("background-color", "red");
$("#a1").css("background-color", "red");
$("#a2").css("background-color", "red");
return true;
} else if (arr1[3] === player && arr1[4] === player && arr1[5] === player) {
$("#vin").text(text);
$("#a3").css("background-color", "red");
$("#a4").css("background-color", "red");
$("#a5").css("background-color", "red");
return true;
} else if (arr1[6] === player && arr1[7] === player && arr1[8] === player) {
$("#vin").text(text);
$("#a6").css("background-color", "red");
$("#a7").css("background-color", "red");
$("#a8").css("background-color", "red");
return true;
} else if (arr1[0] === player && arr1[3] === player && arr1[6] === player) {
$("#vin").text(text);
$("#a0").css("background-color", "red");
$("#a3").css("background-color", "red");
$("#a6").css("background-color", "red");
return true;
} else if (arr1[1] === player && arr1[4] === player && arr1[7] === player) {
$("#vin").text(text);
$("#a1").css("background-color", "red");
$("#a4").css("background-color", "red");
$("#a7").css("background-color", "red");
return true;
} else if (arr1[2] === player && arr1[5] === player && arr1[8] === player) {
$("#vin").text(text);
$("#a2").css("background-color", "red");
$("#a5").css("background-color", "red");
$("#a8").css("background-color", "red");
return true;
} else if (arr1[0] === player && arr1[4] === player && arr1[8] === player) {
$("#vin").text(text);
$("#a0").css("background-color", "red");
$("#a4").css("background-color", "red");
$("#a8").css("background-color", "red");
return true;
} else if (arr1[2] === player && arr1[4] === player && arr1[6] === player) {
$("#vin").text(text);
$("#a2").css("background-color", "red");
$("#a4").css("background-color", "red");
$("#a6").css("background-color", "red");
return true;
}
}
It may be noted that the numbers in the sectors coincide with the figures provided ifand the blocks themselves. if Only these figures are different, so they can be classified as:function checkCombo(player, text, point1, point2, point3){
if (arr1[point1] === player && arr1[point2] === player && arr1[point3] === player) {
$("#vin").text(text);
$("#a2").css("background-color", "red");
$("#a4").css("background-color", "red");
$("#a6").css("background-color", "red");
return true;
}
return false;
}
And function checkState Accept:function checkState(player, text){
return (checkCombo(player, text, 0, 1, 2) // winCombo[0] = [0, 1, 2]
|| (checkCombo(player, text, 3, 4, 5) // winCombo[1] = [3, 4, 5]
|| (checkCombo(player, text, 6, 7, 8) // winCombo[2] = [6, 7, 8]
|| (checkCombo(player, text, 0, 3, 6) // winCombo[3] = [0, 3, 6]
|| (checkCombo(player, text, 1, 4, 7) // winCombo[4] = [1, 4, 7]
|| (checkCombo(player, text, 2, 5, 8) // winCombo[5] = [2, 5, 8]
|| (checkCombo(player, text, 0, 4, 8) // winCombo[6] = [0, 4, 8]
|| (checkCombo(player, text, 2, 4, 6); // winCombo[7] = [2, 4, 6]
}
It can now be seen that the parameters points matches the existing winCombo.Consequently, a cycle may be used instead of manual overhead:for(var i=0; i<winCombo.length;i++){
if(checkCombo(player,text,winCombo[i][0],winCombo[i][1],winCombo[i][2])) return true;
}
It's not very convenient for indexes to be transmitted, so you can simply transfer the body itself. winCombofor(var i=0; i<winCombo.length;i++){
if(checkCombo(player,text,winCombo[i])) return true;
}
This will change the function checkCombofunction checkCombo(player, text, line){
if (arr1[line[0]] === player && arr1[line[1]] === player && arr1[line[2]] === player) { ... }
return false;
}
What's if - for each component of the mass line The condition is checked, the masses have a special method. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/every ♪ The condition can be rewritten as follows:if(line.every(point=>arr1[point]===player))
We will further note that the functions that are simply checking whether the completed line is still in the form of a text and closing cells. They can be placed in an external function checkStatein this case checkCombo Simplified to read:function checkCombo(player, line){
return line.every(point=>arr1[point]===player);
}
And that expression can also be exteriorated and removed:function checkState(player, text){
for(var i=0; i<winCombo.length;i++){
if(winCombo[i].every(point=>arr1[point]===player))) {
$("#vin").text(text);
...
return true;
}
}
return false;
}
It is possible to use the fact that id The components match the numbers in the same body winComboTherefore, it can be based on a suitable sector, for example:winCombo[i].map(point=>`#a${point}`).join(',');
With a closer look, the cycle inside can be observed. checkState Just checking if there's there. winCombo at least one element satisfying the condition and produces some action with the found element. For this, the masses have a special function. https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/find If used,return winCombo.find(combo=> combo.every(point=> arr1[point]==player));
The installation of the text and the painting of the cells may be displayed outside.In the end, it is. checkState You can also remove one condition.Texts can be stored in the facility, then the final version of the verification may be:var players={
'0':'you low',
'1':'you win'
}
for(var player in players){
vinner = winCombo.find(combo=> combo.every(point=> arr1[point]==player));
if(vinner){
$("#vin").text(players[player]);
$(vinner .map(point=>`#a${point}`).join(',')).css("background-color", "red");
break;// дальше нет смысла проверять
}
}
Outcome:(function addLink(links) {
links.reduce((head, l) => {
var el = document.createElement('link');
el.href = l;
el.rel = "stylesheet";
head.insertBefore(el, head.firstElementChild);
return head;
}, document.querySelector('head'))
})(["https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css", "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css", "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"].reverse());
$(document).ready(function() {
var flag;
var vinner;
var winCombo = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var arr1 = [3, 3, 3, 3, 3, 3, 3, 3, 3];
var testArr = [];
var nar1;
function rand() {
return nar1[Math.floor(Math.random() * nar1.length)];
}
$(".xo").click(function() {
if (vinner === true) {
return false;
}
if (flag === undefined) {
alert('To start, click Start GAME and select "X" or "O"')
}
var a = $(this).text();
var b = parseInt($(this).attr("data-value"));
if (a === "") { //если пустая клетка
$(this).text(flag);
testArr.push(b);
arr1[b] = 1;
nar1 = arr.filter(el => testArr.indexOf(el) === -1);
var randNumb = rand();
idItem = '#a' + randNumb;
testArr.push(randNumb);
var f_map = {
"X": "O",
"O": "X"
}
$(idItem).html(f_map[flag]);
arr1[randNumb] = 0;
}
var players = {
'0': 'you low',
'1': 'you win'
};
for (var player in players) {
vinner = winCombo.find(combo => combo.every(point => arr1[point] == player));
if (vinner) {
$("#vin").text(players[player]);
$(vinner.map(point => `#a${point}`).join(',')).css("background-color", "red");
break; // дальше нет смысла проверять
}
}
})
//сброс поля
$("#reset").click(function() {
$(".xo").css("background-color", "#C1B2E9");
$("#vin").text("");
$(".xo").text("");
arr1 = [3, 3, 3, 3, 3, 3, 3, 3, 3];
testArr = [];
vinner = false;
})
//старт игры
$("#start").click(function() {
vinner = false;
$(".xo").css("background-color", "#C1B2E9");
$("#vin").text("");
$(".xo").text("");
arr1 = [3, 3, 3, 3, 3, 3, 3, 3, 3];
testArr = [];
$("#table").hide(1300);
var tes = setTimeout(function() {
var div = document.createElement('div');
div.className = "alert row cointeiner ";
div.innerHTML = "<p>choose</p><button id='qX' class='btn knop1'>X</button><p>or</p><button id='qO' class='btn knop1'>O</button>";
document.body.appendChild(div);
$("#qX").click(function() {
$(".xo").text("");
$("#table").show(1300);
flag = "X";
div.parentNode.removeChild(div);
})
$("#qO").click(function() {
$(".xo").text("");
$("#table").show(1300);
flag = "O";
div.parentNode.removeChild(div);
})
}, 1400);
})
});body {
background: url("http://www.dinosaurlifestyle.com/prod_img/zoom/GGLFS013000_04_L.jpg") no-repeat;
color: black;
background-size: 100%;
font-family: 'Pacifico', cursive;
}
.xo {
width: 33%;
height: 100px;
padding: 0.3%;
border: 2px solid black;
font-size: 40px;
text-align: center;
}
#table {
padding: 0.3%;
background: #C1B2E9;
margin-top: 10%;
}
.row {
margin: auto;
}
.knop {
background-color: #E9E060;
font-size: 20px;
border-radius: 38px;
margin: auto;
}
.knop:hover {
background: #FFA91E;
cursor: pointer;
border-radius: 40px;
box-shadow: 10px 0px 10px 0px #00FFA9;
}
.alert {
background-color: red;
margin: auto;
width: 70%;
padding: 0.3%;
margin-top: 10%;
font-size: 60px;
}
.knop1 {
background-color: #69DB5E;
font-size: 50px;
border-radius: 45%;
margin: auto;
}
#vin {
font-size: 150px;
text-align: center;
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Frijole|Lobster|Pacifico|Monoton" rel="stylesheet">
<div id="vin"></div>
<div class="container" id="table">
<div class="row">
<button type="button" id="start" class="btn knop">Start GAME</button>
<button type="button" id="reset" class="btn knop">RESET</button>
</div>
<div class="row">
<div class="xo" id="a0" data-value="0"></div>
<div class="xo" id="a1" data-value="1"></div>
<div class="xo" id="a2" data-value="2"></div>
</div>
<div class="row">
<div class="xo" id="a3" data-value="3"></div>
<div class="xo" id="a4" data-value="4"></div>
<div class="xo" id="a5" data-value="5"></div>
</div>
<div class="row">
<div class="xo" id="a6" data-value="6"></div>
<div class="xo" id="a7" data-value="7"></div>
<div class="xo" id="a8" data-value="8"></div>
</div>
</div>
