Fatal编程技术网
  • javascript/
  • Javascript 如何洗牌一个15人的益智游戏？

Javascript 如何洗牌一个15人的益智游戏？

javascript jquery html

Javascript 如何洗牌一个15人的益智游戏？,javascript,jquery,html,Javascript,Jquery,Html,你介意帮我洗牌这个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)">

你介意帮我洗牌这个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>

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));
}

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;
}
CSS:

<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>

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));
}

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:

您的标签提到了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），然后循环遍历电路板的所有元素，选择随机值并将其从数组中删除，以避免重复

演示：

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

您的标签提到了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），然后循环遍历电路板的所有元素，选择随机值并将其从数组中删除，以避免重复

演示：

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

您的标签提到了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），然后循环遍历电路板的所有元素，选择随机值并将其从数组中删除，以避免重复

演示：

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

您的标签提到了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），然后循环遍历电路板的所有元素，选择随机值并将其从数组中删除，以避免重复

演示：

这就是说-一定要修改你的HTML，你不能有多个HTML元素具有相同的id-这可能会导致麻烦。

解决方案也会洗牌空白方块并更新
内容\u 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;    
}

解决方案也会洗牌空白方块，并更新
内容\u 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;    
}

解决方案也会洗牌空白方块，并更新
内容\u 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;    
}

解决方案也会洗牌空白方块，并更新
内容\u 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;    
}

这太棒了！我会尽我所能完全理解你的代码！非常感谢你！基本上是将数字数组随机化，然后使用跟踪索引的
each
在该数组上循环，然后使用与
num
数组中的数字相同的索引更新单元格的html…除非数字为16，并将该单元格留空。您确定这只生成有效的谜题吗？这太棒了！我会尽我所能完全理解你的代码！非常感谢你！基本上是将数字数组随机化，然后使用跟踪索引的
each
在该数组上循环，然后使用与
num
数组中的数字相同的索引更新单元格的html…除非数字为16，并将该单元格留空。您确定这只生成有效的谜题吗？这太棒了！我会尽我所能完全理解你的代码！非常感谢你！基本上是将数字数组随机化，然后使用跟踪索引的
each
在该数组上循环，然后使用与
num
数组中的数字相同的索引更新单元格的html…除非数字为16，并将该单元格留空。您确定这只生成有效的谜题吗？这太棒了！我会尽我所能完全理解你的代码！非常感谢你！基本上是将数字数组随机化，然后使用跟踪索引的
each
在该数组上循环，然后使用与
num
数组中的数字相同的索引更新单元格的html…除非数字为16，并将该单元格留空。您确定这只生成有效的谜题吗？非常感谢！！！我真的很感激你的工作。上帝保佑你，伙计，很高兴它能帮上忙。我猜@charlietfl解决方案更优雅，更适合您，尽管它来得晚。祝你游戏顺利结束！你确定这只会产生有效的谜题吗？非常感谢！！！我真的很感激你的工作。上帝保佑你，伙计，很高兴它能帮上忙。我猜@charlietfl解决方案更优雅，更适合您，尽管它来得晚。祝你游戏顺利结束！你确定这只会产生有效的谜题吗？非常感谢！！！我真的很感激你的工作。上帝保佑你，伙计，很高兴它能帮上忙。我猜@charlietfl解决方案更优雅，更适合您，尽管它来得晚。祝你游戏顺利结束！你确定这只会产生有效的谜题吗？非常感谢！！！我真的很感激你的工作。上帝保佑你，伙计，很高兴它能帮上忙。我猜@charlietfl解决方案更优雅，更适合您，尽管它来得晚。祝你游戏顺利结束！你确定这只会产生有效的谜题吗？