JavaScript Tic tac toe, how can I check the position of an image?
Hey guys i'm still a noby with javascript so hope you guys can help! I was able to create a simple html5 tic tac toe game. I'm just having trouble figuring out how to check if three X's or O's are on the same line to finish the game. I might need to compare the source of the image, so I saved it in a multidimensional array. It doesn't seem to be 100%, so if anyone can help I would 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 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 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 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 & 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>
`
+3
source to share
1 answer
Your problem was a problem. Remember to check the console when you test your code. The handlers you specified in HTML are not available because they are global scope. Fiddle works here: http://jsfiddle.net/2frkjcu7/
allowDrop = function(ev) {
...
}
drag = function(ev) {
...
}
drop = function(ev) {
...
}
I just changed your handler declarations globally. Good luck with your game.
As far as the representation of the field is concerned, a 2d array should fit well:
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;
}
0
source to share