停止游戏并检查/显示获胜者的功能逻辑

时间:2018-09-08 20:14:53

标签: javascript html css

我从事井字游戏已有一段时间了,checkForWin()函数中的逻辑一直困扰着我。此函数可以很好地检查每个可能的获胜组合,但是alert('game over')消息中存在一个滞后,假设一旦获胜组合成功就触发了滞后。

  这是有趣的部分,当您要单击该方块以赢得游戏时,alert()square.innerHTML = x或o之前开火。如果您查看我的代码,那么如果游戏还没有结束或正方形不为空,则第一件事就是this.innerHTML = playerTurn;,然后checkForWin();

  无论如何要解决此问题,我必须setTimeout(checkForWin, 1000)才能在单击获胜举动后将警报消息延迟1秒。这是主要问题,setTimeout并没有帮助我,现在当您单击获胜举动时,什么也没有发生!!!现在回合已经切换,并且如果其他玩家在上一回合之后继续前进并且已经获胜,那就是alert('Game Over');

const winCombos = [
     [0, 1, 2],
     [3, 4, 5],
     [6, 7, 8],
     [0, 3, 6],
     [1, 4, 7],
     [2, 5, 8],
     [0, 4, 8],
     [6, 4, 2]
];

let playerTurn = 'x';
let gameEnded = false;
const cells = document.querySelectorAll('td');

for(i = 0; i < 9; i++) {
     cells[i].addEventListener('click', runGame);
}

function runGame() {
     if(gameEnded===true||this.innerHTML!=='') {
          return;
     }
     this.innerHTML = playerTurn;
     setTimeout(checkForWin, 1000);
     switchTurn();
}

function checkForWin() {
     for(let i = 0; i < winCombos.length; i++) {
          const c0 = document.getElementById('c' + winCombos[i][0]);
          const c1 = document.getElementById('c' + winCombos[i][1]);
          const c2 = document.getElementById('c' + winCombos[i][2]);

          if(c0.innerHTML===playerTurn&&c1.innerHTML===playerTurn&&c2.innerHTML===playerTurn) {
               gameEnded = true;
               alert('Game Over');
          }
     }
}

function switchTurn() {
     if(playerTurn === 'x') {
          playerTurn = 'o'
     } else if(playerTurn === 'o') {
          playerTurn = 'x';
     }
}
td {
	border:  2px solid #333;
	height:  100px;
	width:  100px;
	text-align:  center;
	vertical-align:  middle;
	font-family:  "Comic Sans MS", cursive, sans-serif;
	text-transform: capitalize;
	font-size:  70px;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	position: absolute;
	left: 50%;
	margin-left: -155px;
	top: 220px;
}

table tr:first-child td {
	border-top: 0;
}

table tr:last-child td {
	border-bottom: 0;
}

table tr td:first-child {
	border-left: 0;
}

table tr td:last-child {
	border-right: 0;
}

.endgame {
  display: none;
  width: 200px;
  top: 120px;
  background-color: red;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
	<title>tic tac toe</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<table>
		<tr>
			<td class="cell" id="c0"></td>
			<td class="cell" id="c1"></td>
			<td class="cell" id="c2"></td>
		</tr>
		<tr>
			<td class="cell" id="c3"></td>
			<td class="cell" id="c4"></td>
			<td class="cell" id="c5"></td>
		</tr>
		<tr>
			<td class="cell" id="c6"></td>
			<td class="cell" id="c7"></td>
			<td class="cell" id="c8"></td>
		</tr>
		<div class="endgame">
			<div class="text">Cant see this text</div>
		</div>
	</table>

	<script type="text/javascript" src="script2.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以做的是,无需在<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="container"> <div class="row "> <div class="col-md-4"> <div class="card h-100 border-dark"> <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"><a href="http://localhost/alfa/selam/" title="Selam">Selam</a></h5> <p class="card-text"></p> <p>dsff nmfgmnf</p> <p></p> <a href="http://localhost/alfa/selam/" class="btn btn-dark btn-sm">More..</a> </div> </div> </div> <div class="col-md-4"> <div class="card h-100 border-dark"> <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"><a href="http://localhost/alfa/merhaba-dunya/" title="Merhaba dünya!">Merhaba dünya!</a></h5> <p class="card-text"></p> <p>The standard Lorem Ipsum passage, used since the 1500s “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse […]</p> <p></p> <a href="http://localhost/alfa/merhaba-dunya/" class="btn btn-dark btn-sm">More..</a> </div> </div> </div> </div> </div>函数上调用setInterval,只需编辑checkForWin函数的内部即可。

checkForWin

只需在if (c0.innerHTML===playerTurn&&c1.innerHTML===playerTurn&&c2.innerHTML===playerTurn) { gameEnded = true; setInterval(function() { alert('Game Over'); }, 1000); } 中更改此行:

runGame

对此:

setTimeout(checkForWin, 1000);

此外,为什么在checkForWin(); 函数的底部有else if有条件? switchTurn变量只能是playerTurnx,不是吗?只需使用o语句即可。