我对网络开发很陌生，所以我的编码还不是很好。 为了进入Javascript，我尝试编写Connect Four代码 点击作品 - 最后！但现在我真的不知道如何写我的＆＃34;检查胜利＆＃34;功能！ 我已经有了一些东西，但它没有用......也许你可以告诉我为什么？ 提前谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>4 Gewinnt</title>
<style>
table {
margin-left: auto;
margin-right: auto;
width:600px;
height:600px;
background-color:white;
border:1px solid black;
}
</style>
<script>
var player = 0;
var fieldArrayRed = [];
var fieldArrayYellow = [];
empty = new Image();
empty.src = "empty.jpg";
red = document.createElement("img");
red.setAttribute("width", "1024");
red.setAttribute("alt", "Flower");
red.setAttribute("height", "768");
red.setAttribute("src", "red.jpg");
yellow = new Image();
yellow.src = "yellow.jpg";
var playerRed = red.src;
var playerYellow = yellow.src;
function putStoneInCell(elem) {
var colRow = elem.id.split("-");
var zeile = colRow[1];
var spalte = colRow[2];
var isRun = 0;
for (var i = 6; i > 0; i--) {
var countElem = document.getElementById('c-'+(i)+'-'+spalte);
if(countElem.getAttribute('data-occupied') == 0){
console.log('setze Stein in Feld ' + countElem.id);
if(player == 0){
player = playerRed;
countElem.innerHTML = '<img src="red.jpg" alt="" />';
countElem.setAttribute('data-occupied','1', 0);
} else if (player == playerRed){
player = playerYellow;
countElem.innerHTML = '<img src="yellow.jpg" alt="" />';
countElem.setAttribute('data-occupied', '2', 0);
} else if (player == playerYellow) {
player = playerRed
countElem.innerHTML = '<img src="red.jpg" alt="" />';
countElem.setAttribute('data-occupied', '1', 0);
}
break;
}
}
// Check rows
for (var row = 0; row <= 7; ++row) {
var count = 0;
for (var col = 0; col <= 8; ++col) {
if(countElem.getAttribute('data-occupied') != 0 && countElem == 1 || countElem == 2) {
++count;
}
else count = 1;
}
}
}
}
</script>
</head>
<body>
<table id="gameboard" border = 4 style="table-layout:fixed">
<tr>
<td id="c-1-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-1-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
<tr>
<td id="c-2-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-2-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
<tr>
<td id="c-3-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-3-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
<tr>
<td id="c-4-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-4-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
<tr>
<td id="c-5-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-5-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
<tr>
<td id="c-6-1" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-2" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-3" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-4" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-5" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-6" data-occupied="0" onclick="putStoneInCell(this)"></td>
<td id="c-6-7" data-occupied="0" onclick="putStoneInCell(this)"></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
在您的代码中，您可以使用图像补充表格。 试试这个
function addImage(event) {
if(event.target.dataset != undefined || event.target.dataset.state == 'red') {
event.target.innerHTML="<img src='red.jpg' />";
event.target.dataset.state = 'red';
} else {
event.target.innerHTML="<img src='yellow.jpg' />";
event.target.dataset.state = 'yellow';
}
}
...
<table id="gameboard" border=1>
<tr> <!-- Row - Zeile - Spalte (von oben nach unten)-->
<td id="r-1-1" onclick="addImage(event);"></td>
...