JavaScript連接四個贏得算法

我很新的web開發，所以我的代碼還不是很好。要進入Javascript，我嘗試編碼連接四點擊作品 - 在最後！但現在我不知道如何寫我的「贏取支票」功能！我已經有了一些東西，但它不起作用......也許你可以告訴我爲什麼？在此先感謝！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>

來源

2014-11-24 iamqqv

在您的代碼中，您可以用圖像重新填充表格。試試這個

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

來源

2014-11-24 14:17:38

它的工作方式我想，非常感謝，隊友！你能告訴我什麼是「target.dataset」嗎？或者我可以在哪裏閱讀更多關於它的內容？ – iamqqv 2014-11-24 14:22:14

閱讀本文或類似的東西https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset – 2014-11-24 14:25:05

JavaScript連接四個贏得算法

回答

相關問題