夏天到了，边吃西瓜边玩吃瓜拼图游戏吧！我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛前言夏天到了，是不是又

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

夏天到了，是不是又在想吹着空调，吃着西瓜，当然这些都能实现，高考已落下帷幕，在茫茫夏天之日，也可以一手拿西瓜，一手握鼠标，再玩着西瓜拼图游戏，实现边享受和边益智的乐趣。

准备

拼图准备的是800px * 800px，因此每个模块是200px * 200px,所以先创建一个div并给每个div设定宽高为200px

<div id="t1"></div>
div {
    width: 200px;
    height: 200px;
}

上边说到每个图是200px * 200px，所以需要共四行四列，这边通过table列表形式比较容易画出来，由于太多，这边用循环方式渲染

<table style="border-collapse: collapse;border: 1px solid black;border-spacing:0;padding: 0;">
    <tr v-for = 'item in table'>
        <td v-for = 'val in item.children'>
            <div :id="'t'+val.id" ondragover="openSize(event)" ondrop="sethuoqu(event)">
                <div :id="x+val.id" class="tu" draggable="true" ondragstart="setdrag(event)"></div>
            </div>
        </td>
    </tr>
</table>

拖动逻辑

上述给每个div绑定了拖动和抓起的事件draggable和ondragstart，抓起时，需要获取当前抓取的ID设置给当前的event对象，用于保存抓取的过程

function setdrag(e) {
    e.dataTransfer.setData("id", e.target.id);
}

保存抓取的过程后，再次松手则进行释放被抓去的模块，这就需要获取被抓去模块的ID，和获取要即将释放的模块位置的ID

function sethuoqu(e) {
    var zhuid = e.dataTransfer.getData("id");
    var fangID = e.target.id;
    var zhua = document.getElementById(beizhuaId)
    var fID = document.getElementById(fangID)
}

获取要释放的ID后，则需要分别获取它的父级对象ID,然后进行互换它们的子级

var f_beizhua = zhua.parentNode;
var f_fang = fID.parentNode;
f_beizhua.appendChild(fID);
f_fang.appendChild(zhua);

输赢运算

获取每个表格的元素，然后循环运算对比每个父级和每个子级的ID一致，则赢得，否则继续运算

var tuArr = document.getElementsByClassName('tu');
for (var i = 0; i < tuArr.length; i++) {
    var tu = tuArr[i];
    var fu = tu.parentNode;
    var tu_id = tu.getAttribute("id");
    var fu_id = fu.getAttribute("id");
}

保存两个相同的次数，如果等于表格的数量则判的赢

var num = 0
if(tu_id.replace("z-", "") == fu_id.replace("f-", "")){
    num++
}
if(num == tuArr.length){
    //你赢了
'}

重置按钮

重置按钮，通过生成随机数方式，获取每个表格，最后遍历给它打乱顺序，让他们互相插入每个表格，让多个表格的模块进行互换

var num = 50
for (var i = 0; i < num; i++) {
    var tusad = document.getElementsByClassName('tu');
    var tusp = tusad[parseInt(Math.random() * 16)].parentNode;
    var tusq = tusad[parseInt(Math.random() * 16)].parentNode;
    tusp.appendChild(tusad[parseInt(Math.random() * 16)]);
    tusq.appendChild(tusad[parseInt(Math.random() * 16)]);
}

注意！这里随机生成16以下随机数，是因为所有的表格加起来之后16个

码上掘金

码上掘金地址