我正在努力为Connect4做我的赢取功能，但我觉得有点难倒了，我试过的所有东西都还没起作用。 我正在做这个课程项目，所以我真的很想学习如何做这个，我想我刚刚编码了这么多这周我的大脑被炸了。 如有任何建议，不胜感激，谢谢！
null
const noPlayer = 0; //no player
let currentPlayer = 1; //default player
const numRows = 7; //rows
const numCols = numRows; //columns
const board = Array.from(Array(numCols), (column) => Array(numRows).fill(0)); //board array
function playerChange() {
//player change function
currentPlayer = -currentPlayer;
}
const playerClasses = {
//taken/open space classes
[-1]: `tree`, //tree
[noPlayer]: `none`, //no player
[1]: `deer`, //deer
};
function drawBoard() {
//creating board
const $container = $(".container");
$container.html("");
for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
board.forEach((column, columnIndex) => {
const playerId = column[rowIndex];
const playerClass = playerClasses[playerId];
$container.append(
//appends all data to container
`<div data-row="${rowIndex}" data-col="${columnIndex}" class="cell ${playerClass}"></div>`
);
});
}
}
drawBoard();
$("button").on("click", function () {
location.reload();
});
$(".container").on("click", ".cell", function (clicky) {
const targetRow = $(clicky.currentTarget).data("row");
const targetCol = $(clicky.currentTarget).data("col");
const currentVal = board[targetCol][targetRow];
if (currentVal !== noPlayer) {
return;
}
const takenRow = board[targetCol].findIndex((none) => none !== noPlayer);
const lowestRow = takenRow === -1 ? numRows - 1 : takenRow - 1;
board[targetCol][lowestRow] = currentPlayer;
drawBoard();
playerChange();
});
//WRITE WINNING CONDITIONS DOWN HERE /*general page styling*/
body {
background-image: url("https://images.hdqwalls.com/wallpapers/minimalist-landscape-to.jpg");
font-family: "Amatic SC", cursive;
}
/*page heading styling*/
h1 {
font-size: 75px;
align-items: center;
text-align: center;
text-shadow: 2px 2px #412846;
color: white;
}
/*help with centering*/
section {
text-align: center;
justify-content: center;
}
/*styling for button*/
button {
transition-duration: 0.4s;
background-color: rgb(78, 29, 214);
font-family: "Amatic SC", cursive;
color: white;
text-align: center;
padding: 5px 5px;
border: none;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px 1px rgb(24, 0, 70);
box-shadow: 0 10px 15px 0 rgb(24, 0, 70);
outline: none;
}
/*styling for button hover*/
button:hover {
box-shadow: 0 10px 15px 0 rgb(24, 0, 70);
background-color: rgb(192, 128, 252);
color: rgb(24, 0, 70);
}
/*styling for footer*/
footer {
font-size: 20px;
bottom: 0;
width: 100%;
height: 0%;
color: rgb(218, 198, 255);
padding-top: 15px;
}
/*styling for connect 4 board*/
.container {
display: grid;
grid-template-columns: repeat(7, auto);
width: 600px;
margin: 50px auto;
justify-content: center;
align-items: center;
text-align: center;
}
/*styling for individual cells on board*/
.cell {
font-family: "Major Mono Display", monospace;
width: 100px;
height: 100px;
border: 1px solid rgb(218, 198, 255);
font-size: 20px;
color: rgb(24, 0, 70);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: center;
}
.cell.deer {
background-image: url("https://i.ya-webdesign.com/images/reindeer-black-antlers-png-picture-8.png");
}
.cell.tree {
background-image: url("https://www.pngkey.com/png/full/24-242635_white-pine-tree-clipart-clipart-free-pine-tree.png");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script defer src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>c o n n e c t 4</title>
</head>
<body>
<section>
<!--PAGE HEADING-->
<h1>C O N N E C T 4</h1>
<!--CONNECT 4 GAME BOARD-->
<!--class cell for general-->
<div class="container"></div>
<!--RESTART GAME BUTTON-->
<button>Restart Game</button>
<!--PAGE FOOTER-->
<footer>Made by Falon B. Landers</footer>
</section>
</body>
</html>null
看看这个帖子吧！ 我想发表评论，而不是对此作出回答，但我还没有足够的声誉。 希望能帮到你。
下面是如何实现这一点的一个示例:
结果是[index，direction]的列表
null
let map = [
1, 0, 0, 0, 0, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0,
1, 0,-1, 1, 0, 0, 0, 0, 0,
1,-1, 0, 0, 1, 0, 0, 1, 0,
-1, 0, 0, 0, 0, 1, 1, 0,-1,
0, 0, 0, 0, 0, 1, 1, 0,-1,
-1,-1,-1, 0, 1, 0, 0, 0, 0,
]
// how many column do we have:
let col = 9
// we dont need all directions!
let movingDirections = [1, col, col+1, col-1]
function checkWinning(sign){
let wins = []
for (let index = 0; index< map.length; index++){
if(map[index]===sign){ // on a correct sign!
let found = checkAllDirection(sign, index)
if(found){
wins.push(found)
}
}
}
return wins;
}
function checkAllDirection(sign, index){
for(let q=0; q< movingDirections.length; q++){
let dir = movingDirections[q];
let found = checkDirection(sign, index, dir)
if(found){
// if found we return index and the direction
return [index, dir]
}
}
}
function checkDirection(sign, index, dir){
let oldIndex = index
for(let x=1; x<4; x++){// four of them?
let nextIndex = index + dir * x;
if(!testDir(dir, oldIndex, nextIndex)){
//new line - not correct!
return false;
}
if(map[nextIndex] !== sign){
// not correct sign
return false;
}
oldIndex = nextIndex;
}
return true;
}
function row(index){
return Math.floor(index/col)
}
function column(index){
return index%col
}
function testDir(dir, index1, index2){
let row1 = row(index1)
let row2 = row(index2)
let col1 = column(index1)
let col2 = column(index2)
if(dir === 1){
return row2 === row1 && col2 === col1+1;
}
if(dir === col){
return row2 === row1+1 && col2 === col1;
}
if(dir === col+1){
return row2 == row1+1 && col2 === col1+1;
}
if(dir === col-1){
return row2 == row1+1 && col2 === col1-1;
}
}
let test1 = checkWinning(1)
console.log(`Test for 1 found: ([index, direction])`)
console.log(test1)
let test2 = checkWinning(-1)
console.log(`Test for -1 found:`)
console.log(test2)