JavaScript 连接四个获胜算法答案

【问题标题】：JavaScript Connect Four Winning AlgorithmJavaScript 连接四个获胜算法
【发布时间】：2014-12-15 21:06:30
【问题描述】：

我对 Web 开发还很陌生，所以我的编码还不是那么好。为了进入 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>

【问题讨论】：

标签： javascript

【解决方案1】：

在您的代码中，您使用图像来补充您的表格。试试这个

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>
...

【讨论】：

它按我想要的方式工作，非常感谢，伙计！您能告诉我“target.dataset”是什么吗？或者我可以在哪里阅读更多相关信息？
阅读这篇文章或类似的文章developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset