新年到，快来玩拼小老虎的游戏吧-阿里云开发者社区

新年到，快来玩拼小老虎的游戏吧

2022-05-31 153

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 今天的主题是拼图小游戏，主角是虎年最火，人见人爱花见花开的到处送祝福的小老虎。

微信截图_20220531143744.png

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

每到春节，各大游戏平台都会推出春节场景的特别版，而且各种奖励不断，我也在和平精英肝了好几天，作为一个喜欢玩游戏的人，从俄罗斯方块到魂斗罗再到4399的小游戏，再到QQ飞车、CF以及现在的CSGO,我也算是个游戏老玩家了，但是其实忘不了的是4399的益智类小游戏，当年小学时在微机课上没少跟同学一起抢着玩，既然玩了那么多那自己也想写一个简单的玩玩。废话不多说，接下来进入主题，今天的主题是拼图小游戏，主角是虎年最火，人见人爱花见花开的到处送祝福的小老虎。

一.效果图

微信截图_20220531144045.png 二.实现思路

拼图游戏也叫九宫格游戏，所以是游戏主图会被切割成9等分，不然图片太大平铺不了整个table或者太小拼不起来，然后就是进入游戏主界面时初始化子图并打乱子图顺序，打乱顺序可以依靠随机数，然后就是怎么才能算拼图成功的判断，这里是给子图的div分配id，当div对应的子图id与其父级div的id一致并且相同次数累加为9则代表拼图成功，还有就是游戏的重新开始，定义一个点击事件重新刷新页面或者再次调用初始化方法都可以实现。

三.功能分解

1.把图片切割成9等分

1)拼图的主图，尺寸长宽均为600px即可

.image_game{
    background-image:url(image/888.png);
}
复制代码

2）针对1)的主图进行9等分并用随机分布子图的方式打乱顺序

//对原图进行9等分切割然后打乱顺序
$(document).ready(function(){
    for(var i=0;i<100;i++){
        var tus=document.getElementsByClassName('image_game');
        var m=parseInt(Math.random()*9);
        var n=parseInt(Math.random()*9);
        var tusmp=tus[m].parentNode;
        var tusnp=tus[n].parentNode;
        tusmp.appendChild(tus[n]);
        tusnp.appendChild(tus[m]);
    }
});
复制代码

2.动作，捕捉对图片的一系列事件，包括拖动图片，图片互相覆盖

1)抓起，也可以理解为鼠标点击到子图，给每子图分配id，

//抓起
function drag(e){
    var id=e.target.id;
    e.dataTransfer.setData("id",id);//设置传输的是被抓id；
}
复制代码

2)图片拖拽后的互换

function over(e){
    e.preventDefault();
}
复制代码

3)互换后的判断，是否完成拼图的判断

function drop(e){
    var beizhuaId=e.dataTransfer.getData("id");//接受被抓id;
    var fangID=e.target.id;//所放位置的id;
    var beizhua=document.getElementById(beizhuaId);//获取被抓对象;
    var fang=document.getElementById(fangID);//获取放的对象；
    var f_beizhua=beizhua.parentNode;//分别找到对应的父节点
    var f_fang=fang.parentNode;
    //互换子
    f_beizhua.appendChild(fang);
    f_fang.appendChild(beizhua);
    //成功的判断方法
    win();
}
复制代码

4)判断是否拼图完成：每个父和子id名字序号相同，循环 ,累加count;

function win(){
    var tus=document.getElementsByClassName('image_game');
    var count=0;
    for(var i=0;i<tus.length;i++){
        var tu=tus[i];
        var fu=tu.parentNode;
        var tu_id=tu.getAttribute("id");
        var fu_id=fu.getAttribute("id");
        if(tu_id.replace("z-","")==fu_id.replace("f-","")){
            count++;
            console.log(count);
        }else{
            return;
        }
    }
    //累加到9时即代表图已经完全拼好即游戏结束
    if(count==9){
        alert("你成功了!祝你虎年行大运！");
    }
}
复制代码