拖放匹配游戏javascript答案

【问题标题】：drop and drag matching game javascript拖放匹配游戏javascript
【发布时间】：2018-12-03 09:13:06
【问题描述】：

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

这是下面的代码以及 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() {


}

谢谢！

【问题讨论】：

请点击edit然后sn-p编辑器[<>]创建minimal reproducible example
我们不能使用 Jquery 创建它吗？

标签： javascript html image drag-and-drop matching

【解决方案1】：

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

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

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

【讨论】：