-1
Я хочу составить табло для игры с тик-таковым, что мне нужно закодировать для школы, но я изо всех сил пытаюсь выбрать определенную часть стола, а затем остальную часть табло ,Javascript выберите конкретную часть таблицы
<h1>Scores</h1>
<table class="rounds-info">
<tr>
<td><img width="15" height="15" alt="" title="" src="img/cross.jpg" /> Player 1</td>
<td>0</td>
</tr>
<tr>
<td><img width="15" height="15" alt="" title="" src="img/circle.jpg" /> Player 2</td>
<td>0</td>
</tr>
<tr>
<td>Total rounds</td>
<td>0</td>
</tr>
Мне нужно выбрать td победителем, который можно найти, используя document.winner. document.winner печатает либо 1, либо 2 в зависимости от того, кто выиграл.
а также когда игрок выиграл, он должен увеличить общий раунд на один.
Я надеюсь, что кто-то может мне помочь.
Это весь код:
<head>
<title>Boter, Kaas en Eieren</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body onload="startGame();">
<div id="mainContainer">
<h1>Boter, Kaas & Eieren</h1>
<div id="speelveld">
<table border="0">
<tr>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
</tr>
<tr>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
</tr>
<tr>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
<td><img alt="" title="" src="img/empty.jpg" /></td>
</tr>
</table>
</div> <!-- EINDE SPEELVELD CONTAINER -->
<div id="game-info">
<h1>Aan beurt</h1>
<div id="message">Messages here.</div>
<table class="players-turn" border="0">
<tr>
<td><img width="25" height="25" alt="" title="" src="img/cross.jpg" /></td>
<td>Speler</td>
<td>1</td>
</tr>
</table> <!-- EINDE SPELER AAN ZET TABEL -->
<h1>Scores</h1>
<table class="rounds-info">
<tr>
<td><img width="15" height="15" alt="" title="" src="img/cross.jpg" /> Speler 1</td>
<td>0</td>
</tr>
<tr>
<td><img width="15" height="15" alt="" title="" src="img/circle.jpg" /> Speler 2</td>
<td>0</td>
</tr>
<tr>
<td>Aantal rondes</td>
<td>0</td>
</tr>
</table> <!-- EINDE INFO TABEL -->
<button class="game-button">Start spel</button>
</div> <!-- EINDE GAME-INFO CONTAINER -->
</div> <!-- EINDE MAINCONTAINER -->
<script type="text/javascript" src="js/bke.js"></script>
</body>
Код JavaScript является:
var game = document.getElementById('speelveld');
//var squares = game.getElementsByTagName('td');
var squares = document.getElementById('speelveld').getElementsByTagName('img');
var player_images = [ 'img/empty.jpg', 'img/cross.jpg', 'img/circle.jpg' ];
var startGameButton = document.getElementsByClassName('game-button')[0];
var turn_player_number = document.getElementsByClassName('players-turn');
var turn_player_number = document.getElementsByClassName('players-turn')[0].getElementsByTagName('td')[2];
var turn_player_image = document.getElementsByClassName('players-turn')[0].getElementsByTagName('img')[0];
//var roundsInfo = document.getElementsByClassName('rounds-info')[0].getElementsByTagName('td');
startGameButton.addEventListener('click', refreshGame);
for (var i = 0; i < squares.length; i ++) {
squares[i].addEventListener('click', nextMove);
}
function startGame() {
document.turn = 1;
document.winner = null;
setMessage(document.turn + "e speler begint met spelen.");
setTurnInfo(document.turn);
}
function setTurnInfo(player){
turn_player_number.innerHTML = player;
turn_player_image.src = player_images[player];
//document.getElementById("message").innerText = msg;
setMessage("Speler " + document.turn + " is aan de beurt");
}
function setMessage(msg){
document.getElementById("message").innerText = msg;
}
function nextMove() {
//console.log(document.winner, this.src.search('empty'));
if (document.winner != null){
setMessage("Speler " + document.turn + " heeft al gewonnen.")
} else if(this.src.search('empty') >= 0) {
this.src = player_images[document.turn];
//this.src = 'img/' + document.turn + '.jpg';
switchTurn();
} else {
setMessage("Kies een ander speelvak.");
// setMessage(document.turn);
}
}
function switchTurn() {
if (checkForWinner(document.turn)) {
setMessage("Gefeliciteerd speler " + document.turn + " heeft gewonnen!");
document.winner = document.turn;
} else if (document.turn == 1) {
document.turn = 2;
setTurnInfo(document.turn)
} else {
document.turn = 1;
setTurnInfo(document.turn)
}
}
function checkForWinner(player) {
var result = false;
if(checkRow(1,2,3, player) ||
checkRow(4,5,6, player) ||
checkRow(7,8,9, player) ||
checkRow(1,4,7, player) ||
checkRow(2,5,8, player) ||
checkRow(3,6,9, player) ||
checkRow(1,5,9, player) ||
checkRow(3,5,7, player)) {
result = true;
}
return result;
}
function checkRow (a, b, c, player) {
var result = false;
if (getBox(a).search(player_images[player]) >= 0 &&
getBox(b).search(player_images[player]) >= 0 &&
getBox(c).search(player_images[player]) >= 0){
result = true;
}
return result;
}
function getBox(number) {
return squares[number - 1].src;
//return document.getElementById("s" + number).innerText
}
function refreshGame(number) {
for (var i = 0; i < squares.length; i++) {
squares[i].src = player_images[0];
}
document.winner = null;
}
Кажется, вы просите выполнить упражнение для вас ... Пожалуйста, покажите нам свой код, мы можем начать с этого, чтобы обсудить и помочь. Пожалуйста, прочитайте [как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/questions/41699215/add-remove-class-of-multiple-li-in-angularjs). – Andrea