Database System Concepts
Database System Concepts
7th Edition
ISBN: 9780078022159
Author: Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher: McGraw-Hill Education
Bartleby Related Questions Icon

Related questions

bartleby

Concept explainers

Question

why isint this working in javascript 

var rows = 3;
var columns = 3;

var currTile;
var otherTile; //blank tile

var turns = 0;

// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
var imgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"];

window.onload = function() {
for (let r=0; r < rows; r++) {
for (let c=0; c < columns; c++) {

//<img id="0-0" src="1.jpg">
let tile = document.createElement("img");
tile.id = r.toString() + "-" + c.toString();
tile.src = imgOrder.shift() + ".jpg";

//DRAG FUNCTIONALITY
tile.addEventListener("dragstart", dragStart); //click an image to drag
tile.addEventListener("dragover", dragOver); //moving image around while clicked
tile.addEventListener("dragenter", dragEnter); //dragging image onto another one
tile.addEventListener("dragleave", dragLeave); //dragged image leaving anohter image
tile.addEventListener("drop", dragDrop); //drag an image over another image, drop the image
tile.addEventListener("dragend", dragEnd); //after drag drop, swap the two tiles

document.getElementById("board").append(tile);

}
}
}

function dragStart() {
currTile = this; //this refers to the img tile being dragged
}

function dragOver(e) {
e.preventDefault();
}

function dragEnter(e) {
e.preventDefault();
}

function dragLeave() {

}

function dragDrop() {
otherTile = this; //this refers to the img tile being dropped on
}

function dragEnd() {
if (!otherTile.src.includes("9.jpg")) {
return;
}

let currCoords = currTile.id.split("-"); //ex) "0-0" -> ["0", "0"]
let r = parseInt(currCoords[0]);
let c = parseInt(currCoords[1]);

let otherCoords = otherTile.id.split("-");
let r2 = parseInt(otherCoords[0]);
let c2 = parseInt(otherCoords[1]);

let moveLeft = r == r2 && c2 == c-1;
let moveRight = r == r2 && c2 == c+1;

let moveUp = c == c2 && r2 == r-1;
let moveDown = c == c2 && r2 == r+1;

let isAdjacent = moveLeft || moveRight || moveUp || moveDown;

if (isAdjacent) {
let currImg = currTile.src;
let otherImg = otherTile.src;

currTile.src = otherImg;
otherTile.src = currImg;

turns += 1;
document.getElementById("turns").innerText = turns;
}


}
Turns: 0
expand button
Transcribed Image Text:Turns: 0
Expert Solution
Check Mark
Knowledge Booster
Background pattern image
Computer Science
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
Recommended textbooks for you
Text book image
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Text book image
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Text book image
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
Text book image
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Text book image
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Text book image
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education