JavaScript Tic tac腳趾，如何檢查圖像的位置？

嘿傢伙我仍然是一個noobie與JavaScript，所以我希望你們能夠幫助！我能夠創建一個簡單的html5 tic tac toe遊戲。我在如何檢查三個X或O是否在同一條線上結束遊戲時遇到了麻煩。我雖然也許我應該比較圖像源，所以我把它保存到一個多維數組..似乎不是100％，所以如果有人可以幫助我會很感激它！我有以下代碼： http://jsfiddle.net/AnthonyFigi/v3vfcLws/5/JavaScript Tic tac腳趾，如何檢查圖像的位置？

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
/* Selects all the id's starting with 'div'*/ 
.holder #drag1, .holder #drag2{ 
    background-color:rgba(204, 204, 204, 0.7); 
    transition:opacity 0.3s ease-in 0s; 
} 
.holder #drag2{ 
    opacity:0.0; 
} 
.holder{ 
    clear:both; 
    padding:3em; 
} 
[id^="div"] { 
    width: 80px; 
    height: 80px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
    float:left; 
    transition:background-color 0.3s linear 0s; 
} 
[id^="row"]{ 
    clear:both; 
} 
</style> 
<script type="text/javascript"> 

function allowDrop(ev) { 
    /* The default handling is to not allow dropping elements. */ 
    /* Here we allow it by preventing the default browser behaviour. */ 
    ev.preventDefault(); 
} 
function drag(ev) { 
    /* Here we specify what should be dragged. */ 
    /* This data will be dropped once the mouse button is released.*/ 
    /* Here,we set the data type 'text' also we want to drag the element itself, so we set it's ID.(ev.target.id) */ 
    ev.dataTransfer.setData("Text",ev.target.id); 
} 
function drop(ev) { 
    /* Here we get the id of the image and store it is data*/ 
    var data=ev.dataTransfer.getData("Text"); 
    /* Here we 'append' (add after) them image to the target element*/ 
    /* We get the element to image by id stored in var data, then we only COPY it from DOM*/ 
    /* The image is NOT moved in DOM*/ 
    ev.target.appendChild(document.getElementById(data).cloneNode(true)); 
    /* Here we get the image then return it's id as a String.*/ 
    /* We then check to see whether it is 'drag1' OR 'drag2'*/ 
    /* Then change the background colour of the target respectively*/ 
    if(document.getElementById(data).id == "drag1"){ 
     ev.target.style.backgroundColor="red"; 
    }else{ 
     ev.target.style.backgroundColor="yellow"; 
    } 
    ev.preventDefault(); 
    ev.target.removeAttribute("ondragover"); 
    document.getElementById(data).removeAttribute("ondragstart"); 
    document.getElementById(data).setAttribute("draggable","false"); 
    switchTurn(); 
    checkRows(); 
} 
var turn = 1; 
function switchTurn(){ 
    if(turn == 1){ 
     document.querySelector('.holder #drag1').style.opacity="0.0"; 
     document.querySelector('.holder #drag2').style.opacity="1.0"; 
     turn++; 
    }else{ 
     document.querySelector('.holder #drag1').style.opacity="1.0"; 
     document.querySelector('.holder #drag2').style.opacity="0.0"; 
     turn--; 
    } 
} 
    var array = [[], [], []]; 
    var rowNum = 0; 
function checkRows(){ 
    var rows = ["row1", "row2", "row3"]; 
    var timesRan = 0; 
    for(i=0;i < 3;i++){ 
     var img = document.getElementById(rows[rowNum]).getElementsByTagName('div')[i].getElementsByTagName('img')[0].src; 

     array[rowNum].push(img); 

     if(timesRan < 1){ 
      array[rowNum].shift(); 
      timesRan++; 
     } 
     console.log(array);    
    } 
    rowNum++; 
} 
</script> 
<title>JavaScript Drag &amp; Drop Tic-Tac-Toe</title> 
</head> 
<body> 
    <p>Drag the X and O images into the tic-tac-toe board:</p> 
    <div id="row1"> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </div> 
    <div id="row2"> 
    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </div> 
    <div id="row3"> 
    <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </div> 
    <div class="holder"> 
    <img id="drag1" src="X.png" draggable="true" 
     ondragstart="drag(event)" width="75" height="75" /> 
    <img id="drag2" src="O.png" draggable="true" 
     ondragstart="drag(event)" width="75" height="75" /> 
    </div> 
</body> 
</html>

來源

2014-11-02 Åñthø Fígùęrøæ

你的作用域是問題。確保在測試代碼時檢查控制檯。您在HTML中指定的處理程序不可訪問，因爲它們指的是全局範圍。這裏有一個工作小提琴： http://jsfiddle.net/2frkjcu7/

allowDrop = function(ev) { 
    ... 
} 

drag = function(ev) { 
    ... 
} 

drop = function(ev) { 
    ... 
}

我剛剛更改了處理程序的聲明是在全球範圍內。祝你好運。

至於外地代表所說，一個二維數組應該是一個不錯的選擇：

var field = []; 
//initialize field 
for(var y = 0; y<3; y++){ 
    field[x] = new Array(3); 
} 
//helper methods to check mark and set it 
function getMark(x,y){ 
    return field[y][x]; 
} 
function setMark(x,y,mark){ 
    field[y][x] = mark; 
}

來源

2014-11-02 14:01:45 travnik

我將如何檢查是否那裏有同一對象的3？ – 2014-11-02 18:30:12

你的意思是什麼物體？在javascript中嚴格比較是'==='，所以要檢查'a'和'b'是否相同，可以使用'a === b'表達式。關於範圍界定 - 全球範圍的使用通常是不鼓勵的，全球範圍始終是範圍鏈中的最後一個，因此速度很慢，它也可以從任何地方訪問，因此您通過在全球範圍內工作來污染每個範圍。通常庫使用全局作用域來公開入口點，就像說jQuery可能使用'$'作爲全局變量，以便您可以在代碼中的任何位置訪問它。 – travnik 2014-11-02 23:19:34

JavaScript Tic tac腳趾，如何檢查圖像的位置？

回答

相關問題