JavaScript Tic tac toe, how do I check for the position of the image?

Question

I was able to create a simple html5 tic tac toe game. I'm just having trouble on how to go about checking if three X or O's are on the same line to end the game. I though maybe I should compare the image source so I saved it to a multidimensional array. Doesn't seem to be 100% so if anyone can help I had appreciate it!. I have the following code: http://jsfiddle.net/AnthonyFigi/v3vfcLws/5/

`

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

`

travnik · Answer 1 · 2014-11-02T23:29:46.960

0

Your scoping was the problem. Make sure to check console when you're testing your code. Handlers you have specified in HTML were not reachable because they were referring to global scope. Here's a working fiddle: http://jsfiddle.net/2frkjcu7/

allowDrop = function(ev) {
    ...
}

drag = function(ev) {
    ...
}

drop = function(ev) {
    ...
}

I just changed declarations of your handlers to be in global scope. Good luck with your game.

As far as field representation goes, a 2d array should be a good fit:

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;
}

edited Nov 02 '14 at 23:29

answered Nov 02 '14 at 14:01

travnik

690
7
18

How would i check if theres 3 of the same object? – Åñthø Fígùęrøæ Nov 02 '14 at 18:30
What objects do you mean? in javascript strict comparison is `===`, so to check if `a` and `b` are the same, you can use `a === b` expression. Regarding scoping - usage of global scope is generally discouraged, global scope is always the last in scope chain so it's slow, it is also accessible from everywhere so you are polluting every scope by working in global. Generally libraries use global scope to expose entry point, like say jQuery might use `$` as a global variable so you can access it anywhere in your code. – travnik Nov 02 '14 at 23:19

JavaScript Tic tac toe, how do I check for the position of the image?

1 Answers1