拖放配对游戏 javascript

Question

我遇到了这个问题，就是让丢弃的图像与左侧的整个图像相匹配！所以基本上问题是让切片图像与左侧的整个图像匹配。

到目前为止，这是下面的代码以及 html 页面图片：

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() {


}

谢谢！

Answer 1

您需要一个二维数组来定义正确的图像位置

var matches = [
    [2, 1], // row 1
    [3, 0] // row 2
];

每张图片都会分配一个编号，称为index。
网格中的每个单元格都有索引号。例如：[0,0]、[0,1]、[1,0]、[1,1]
当您将图像拖放到单元格时，您可以使用单元格索引比较图像索引和变量 matches 以检查它是否放置在正确的位置。
如果用户完成游戏则提醒他们

拖放配对游戏 javascript

drop and drag matching game javascript

html

javascript

drag-and-drop

image

matching