我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛
前言
夏天到了,是不是又在想吹着空调,吃着西瓜,当然这些都能实现,高考已落下帷幕,在茫茫夏天之日,也可以一手拿西瓜,一手握鼠标,再玩着西瓜拼图游戏,实现边享受和边益智的乐趣。
准备
拼图准备的是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个