• 1000 диагональ от первого круга снизу первого столбца и первого круга снизу второго столбца. Вывод моего заголовка1 изменяется во всех других случаях, но не в этом случае. Пожалуйста, помогите мне исправить ошибку. Попробуйте запустить фрагмент кода, чтобы понять мою проблему. Спасибо !!!
var player1 = prompt("Player 1 Enter Your Name, You Are Orange");
var player1Color = 'rgb(255, 165, 0)';
var player2 = prompt("Player 2 Enter Your Name, You Are Green");
var player2Color = 'rgb(34, 139, 34)';
var table = $('table tr');
function changeColor(rowIndex, colIndex, color){
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color', color);
}
function returnColor(rowIndex, colIndex){
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color');
}
function checkBottom(col){
for(var row = 5; row > -1; row--){
var reportColor = returnColor(row, col);
if(reportColor === 'rgb(128, 128, 128)'){
return row;
}
}
}
function checkColorMatch(one, two, three, four){
return one === two && one === three && one === four && one !== 'rgb(128, 128, 128)' && one !== undefined;
}
function horizontalWinCheck(){
for(var row = 0; row < 6; row++){
for(var col = 0; col < 4; col++){
if(checkColorMatch(returnColor(row, col), returnColor(row, col + 1), returnColor(row, col + 2), returnColor(row, col + 3))){
return true;
}else{
continue;
}
}
}
}
function verticalWinCheck(){
for(var col = 0; col < 7; col++){
for(var row = 0; row < 3; row++){
if(checkColorMatch(returnColor(row, col), returnColor(row + 1, col), returnColor(row + 2, col), returnColor(row + 3, col))){
return true;
}else{
continue;
}
}
}
}
function diagonalWinCheck(){
for(var col = 0; col < 5; col++){
for(var row = 0; row < 7; row++){
if (checkColorMatch(returnColor(row, col), returnColor(row + 1, col + 1), returnColor(row + 2, col + 2), returnColor(row + 3, col + 3))) {
console.log("Diag");
return true;
}else if(checkColorMatch(returnColor(row, col), returnColor(row - 1, col + 1), returnColor(row - 2, col + 2), returnColor(row - 3, row + 3))){
console.log("Diag");
return true;
}else {
continue;
}
}
}
}
var currentPlayer = 1;
var currentName = player1;
var currentColor = player1Color;
$('h3').text(currentName + " It's Your Turn Start The Game");
$('.board button').on('click', function(){
var col = $(this).closest('td').index();
var availBottom = checkBottom(col);
changeColor(availBottom, col, currentColor);
if (horizontalWinCheck() || verticalWinCheck() || diagonalWinCheck()){
$('h1').text(currentName + " You Won The Game!!!");
}
currentPlayer = currentPlayer * -1;
if (currentPlayer === 1) {
currentName = player1;
$('h3').text(currentName + " It's Your Turn");
currentColor = player1Color;
}else{
currentName = player2;
$('h3').text(currentName + " It's Your Turn");
currentColor = player2Color;
}
})
.board button{
width: 80px;
height: 80px;
border: 2px solid black;
background-color: gray;
margin: 2px;
border-radius: 90px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Connect Four</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="design.css">
</head>
<body>
<div class="container" align="center">
<h1>Welcome To Connect Four</h1>
<h2>Connect Four Cirles to Win The Game</h2>
<h3>Let's Start!!!</h3>
<table class="board">
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
</table>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>