бросить и перетащить игру соответствия javascript - PullRequest
Новая
       10

бросить и перетащить игру соответствия javascript

0 голосов
/ 03 декабря 2018

У меня есть проблема, которая заключается в том, что сброшенные изображения сопоставляются с целым изображением на левой стороне!так что в основном проблема заключается в том, чтобы нарезанные изображения совпали с целым изображением слева.

этот код ниже вместе с изображением HTML-страницы:

the matching drop and drag game

HTML ниже: 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../images/favicon_week2-1.ico" type="image/gif">
    <title>week8-1</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/homework.css">
    <link rel="stylesheet" href="css/spectrum.css">
    <link rel="stylesheet" href="css/slicknav.css">
    <link rel="stylesheet" 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() {


}

Спасибо!

1 Ответ

0 голосов
/ 03 декабря 2018
  1. Вам необходим двумерный массив для определения правильных положений изображения 
var matches = [
    [2, 1], // row 1
    [3, 0] // row 2
];
Каждому изображению будет присвоен номер, называемый index. Каждая ячейка в сетке будет иметь индексный номер.Пример: [0,0], [0,1], [1,0], [1,1] Когда вы перетаскиваете изображение в ячейку, вы можете сравнить индекс изображения и переменную matches используя индекс ячейки, чтобы проверить, находится ли он в правильном положении. Оповещение пользователя о завершении игры
...