夏天到了,边吃西瓜边玩吃瓜拼图游戏吧!

786 阅读2分钟

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

1654842763346.gif

前言

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

准备

拼图准备的是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个

码上掘金

码上掘金地址