javascript - 如何洗牌 15 人的益智游戏？

Question

你介意帮我洗一下这个 15 的益智游戏吗:

HTML:

<table id="table1">
    <tr id="tr1">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content1" draggable="true" ondragstart="drag(event)">
                <p id="p1">1</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content2" draggable="true" ondragstart="drag(event)">
                <p id="p1">2</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content3" draggable="true" ondragstart="drag(event)">
                <p id="p1">3</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content4" draggable="true" ondragstart="drag(event)">
                <p id="p1">4</p>
            </div>
        </td>
    </tr>
    <tr id="tr2">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content5" draggable="true" ondragstart="drag(event)">
                <p id="p1">5</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content6" draggable="true" ondragstart="drag(event)">
                <p id="p1">6</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content7" draggable="true" ondragstart="drag(event)">
                <p id="p1">7</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content8" draggable="true" ondragstart="drag(event)">
                <p id="p1">8</p>
            </div>
        </td>
    </tr>
    <tr id="tr3">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content9" draggable="true" ondragstart="drag(event)">
                <p id="p1">9</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content10" draggable="true" ondragstart="drag(event)">
                <p id="p1">10</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content11" draggable="true" ondragstart="drag(event)">
                <p id="p1">11</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content12" draggable="true" ondragstart="drag(event)">
                <p id="p1">12</p>
            </div>
        </td>
    </tr>
    <tr id="tr4">
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content13" draggable="true" ondragstart="drag(event)">
                <p id="p1">13</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content14" draggable="true" ondragstart="drag(event)">
                <p id="p1">14</p>
            </div>
        </td>
        <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="div_content15" draggable="true" ondragstart="drag(event)">
                <p id="p1">15</p>
            </div>
        </td>
        <td id="divdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
</table>

Javascript:

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

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

CSS:

body {
    margin:0;
    padding:0
}
#table1 {
    border: 1px dotted #303030;
}
#divdrag, #divdrop {
    float:left;
    width:80px;
    height:80px;
    margin:10px;
    padding:0px;
    border:1px solid #aaaaaa;
    background-color:#333;
}
td div {
    background-color:#ccc;
    width:80px;
    height:80px;
    color:#191919;
}
#p1 {
    font-size:70px;
    text-align:center;
    margin:0 auto;
}

我尝试了很多方法让这个游戏有一个有效的随机播放功能，但没有成功，所以我放弃了:/ 从我尝试过的所有这些功能来看，它们都不起作用。我认为问题是由于缺少 DIV 容器而不是使用表数据引起的，但我不确定。 我感谢并代表纯 javascript 或其库 - jquery 中的任何类型的帮助代码。 提前致谢! fiddle :http://jsfiddle.net/2tESd/4/

Answer 1

您的标签提到了 jQuery，并且使用 jQuery 是最简单的解决方案。将以下函数添加到您的代码中:

$(document).ready(function() {

    var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    var idx;
    $("div[id^='div_content'] > p").each(function() {
         idx = Math.floor(Math.random() * arr.length);
         $(this).text(arr[idx]);
         arr.splice(idx, 1);
    })
})

它声明值数组(1 到 15)，然后循环遍历板的所有元素，选择随机值并将其从数组中删除以避免重复。

演示:http://jsfiddle.net/2tESd/6/

也就是说 - 请修改您的 HTML，您不能有多个具有相同 ID 的 HTML 元素 - 这可能会导致麻烦。