JavaScript Tic tac 발가락, 어떻게 이미지의 위치를 확인합니까?

안녕 얘들 아 나는 아직 자바 스크립트로 noobie 그래서 너희들이 도울 수 있기를 바랍니다! 나는 간단한 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을 확인합니다 :

는 지금까지 필드 표현이가는대로, 2 차원 배열이 잘 맞는해야 하는가? –

어떤 물건을 의미합니까? 은 javascript strict 비교에서'==='이므로'a'와'b'가 같은지 확인하기 위해'a === b' 표현식을 사용할 수 있습니다. 범위 지정 - 전역 범위의 사용은 일반적으로 권장되지 않습니다. 전역 범위는 항상 범위 체인의 마지막 부분이므로 속도가 느리며 모든 곳에서 액세스 할 수 있으므로 전역에서 작업하여 모든 범위를 오염시킵니다. 일반적으로 라이브러리는 전역 변수를 사용하여 엔트리 포인트를 노출합니다. 예를 들어 jQuery는 전역 변수로'$ '를 사용하여 코드의 어느 위치에서나 액세스 할 수 있습니다. – travnik

JavaScript Tic tac 발가락, 어떻게 이미지의 위치를 ​​확인합니까?

답변

관련 문제

JavaScript Tic tac 발가락, 어떻게 이미지의 위치를 확인합니까?