JavaScript Connect Four Winning Algorithm

Я довольно новичок в веб-разработке, поэтому мое кодирование еще не так хорошо. Чтобы войти в Javascript, я пытаюсь код Connect Four Нажав на работу - наконец! Но теперь я действительно не знаю, как написать свою функцию «проверить на победу»! У меня уже есть что-то, но это не работает ... может быть, вы можете мне объяснить, почему? Спасибо заранее!JavaScript Connect Four Winning Algorithm

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

Прочтите эту статью или что-то подобное https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset –

JavaScript Connect Four Winning Algorithm

ответ

Смежные вопросы