JavaScript连接四赢算法
JavaScript连接四赢算法
提问于 2014-11-24 14:06:35
我对网络开发非常陌生，所以我的编码还不太好。为了进入Javascript，我尝试代码连接四个点击作品--终于！但现在我真的不知道怎么写我的“检查赢”的功能！我已经有东西了，但不管用.也许你能告诉我为什么？提前感谢！
<!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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-24 14:17:38
在您的代码中，您用图像复制表。尝尝这个
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>
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27106716
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号