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。提前致谢！小提琴：http://jsfiddle.net/2tESd/4/

Answer 1

你的标签提到jQuery并且使用jQuery是最简单的解决方案。在代码中添加folloving函数：

$(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元素 - 这可能会导致麻烦。

Answer 2

解决方案也将空方块洗牌并更新content_id

$(function(){
    var nums=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];        
    nums.sort(function(){
       return (Math.round(Math.random())-0.5);
    });
    var $cells=$('#table1 td').empty();

    $.each(nums, function(i,num){         
           $cells.eq(i).html( num < 16 ? cellHtml( num) :'' ) ;
    });
});

function cellHtml( num){
    var html='<div id="div_content'+num+'" draggable="true" ondragstart="drag(event)">'+
                '<p class="p1">'+num+'</p>'+
            '</div>';    
    return html;    
}

的 DEMO

编辑：替代解决方案

$(function(){ var $cells=$('#table1 td'), $cellClones=$cells.clone(); $cellClones.sort(function(){ return (Math.round(Math.random())-0.5); }); $cells.each(function(i,el){ $(this).replaceWith( $cellClones[i]); }) })

的 DEMO

如何洗牌15的益智游戏？

2 个答案: