Ad

Drop And Drag Matching Game Javascript

I have this problem which is getting the dropped images matched with the whole image on left side! so basically the issue is getting the sliced images matched with the whole image on the left.

this's the code below so far along with html page image:

the matching drop and drag game

HTML below:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" target="_blank" rel="nofollow noreferrer" href="../images/favicon_week2-1.ico" type="image/gif">
    <title>week8-1</title>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/normalize.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/homework.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/spectrum.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/slicknav.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="css/jquery-ui.css">
    <script src="js/week8.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="/js/jquery.slicknav.min.js"></script>
    <script src="chapter06.js"></script>
</head>
<body>

  <header>
    <img src="images/rummage_sale_week2-1.png" class="logo" alt="Logo">
    <h2>Image Puzzle</h2>
  </header>

  <main>
    <section>
        <p>Drag the blocks to make the complete image in the grid as shown below:</p>
            <img src="images/FinishedImage.JPG" width="120" height= "120">
            <br>

            <div id="group">
                <div id="twoBoxesTop">
                    <div id="div1" ondrop="dropIt(event)" ondragover="beingDropped(event)"></div>
                    <div id="div2" ondrop="dropIt(event)" ondragover="beingDropped(event)"></div>
                </div>
                <br>
                <div id="twoBoxesBot">
                    <div id="div3" ondrop="dropIt(event)" ondragover="beingDropped(event)"></div>
                    <div id="div4" ondrop="dropIt(event)" ondragover="beingDropped(event)"></div>
                </div>
            </div>
            <h2 id="result"></h2>
            <br>
            <div id="imgDiv">

                <img id="drag1" src="images/rummage_sale_week2-1.png" draggable="true" ondragstart="dragIt(event)" width="100" height="100">
                <br>
                <img id="drag2" src="images/jpegat20012quality.jpg" draggable="true" ondragstart="dragIt(event)" width="100" height="100">
                <br>
                <img id="drag3" src="images/rsImage.jpg" draggable="true" ondragstart="dragIt(event)" width="100" height="100">
                <br>
                <img id="drag4" src="images/rsImage02.jpg" draggable="true" ondragstart="dragIt(event)" width="100" height="100">
            </div>
            <button type="button" class="checkPuzzle">Check Puzzle</button>
    </section>
    <aside>

    </aside>
  </main>

  <footer>
    <p>&copy; 2018 Bill</p>
  </footer>
</body>
</html>

JS:

function beingDropped(ev){
    ev.preventDefault();
}

function dragIt(ev) {
    ev.dataTransfer.setData("text",ev.target.id);
    document.getElementById("demo").innerHTML = "The square element was dragged!";

}

function dropIt(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    document.getElementById("demo").innerHTML = "The square element was dropped";

}


//still stuck with it
function checkPuzzle() {


}

Thanks!

Ad

Answer

  1. You need a 2-d array to define the correct image positions
var matches = [
    [2, 1], // row 1
    [3, 0] // row 2
];
  1. Every image will be assigned to a number, called index.
  2. Every cell in the grid will have index number. Ex: [0,0], [0,1], [1,0], [1,1]
  3. When you drop an image to a cell, you can compare the image index and the variable matches using cell index to check if it is placed in the correct position.
  4. Alert user if they complete the game
Ad
source: stackoverflow.com
Ad