菜单

移步端微信微信公众号做题小游戏踩的小坑

2019年5月3日 - JavaScript

       
 后天集团收取三个在微信公众号中要开垦八个做题的小游戏,里面大约内容是做八道题,根据答对有个别题,最终生成一个图片格式的聘书。微信暗许长按图片能够发给好友,点击分享能够享受到朋友圈,不过不可能一贯将图纸分享到对象圈,要求先保存图片到地面才得以后朋友圈发,或许分享带链接的地点,微信暗中同意分享朋友圈链接是没有缩略图的,自定义能够增进。

html

<div class="dog"></div>
<footer>
    <ul></ul>
</footer>
<script src="app.js"></script>

        <meta name=”viewport”
content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”
/>”

app.js

$(function () {
/***************************************/   

/*              滑动事件                */

/***************************************/   
    lockScroll();
    //随机生成dog结构
    var arr1 = [];
    for(var i=0;i<25;i++){
        getx1(arr1);
    }
    function getx1(arr1){
        for(var i=0;i>-1;i++){
            var flag = true;
            var num1 = Math.floor(Math.random()*25)+1;
            for(var i in arr1){
                if(arr1[i] == num1){
                    flag= false;
                    break;
                }
            }
            if(flag == true){
                //console.log(num1);
                $(".dog").append("<div class='a"+num1+"'>"+num1+"</div>");
                arr1.push(num1);
                return;
            }
        }
    }
    //随机生成底部mini dog结构
    var arr2 = [];
    for(var i=0;i<25;i++){
        getx2(arr2);
    }
    function getx2(arr2){
        for(var i=0;i>-1;i++){
            var flag = true;
            var num2 = Math.floor(Math.random()*25)+1;
            for(var i in arr2){
                if(arr2[i] == num2){
                    flag= false;
                    break;
                }
            }
            if(flag == true){
                //console.log(num2);
                $("footer ul").append("<li class='a"+num2+"'>"+num2+"</li>");
                arr2.push(num2);
                return;
            }
        }
    }
    //开始拖曳
    var pressX = 0,
        pressY = 0;
    var obj = $('footer ul li');//触发页面
    var a,b,c;

    //手指按下时
    obj.bind('touchstart', function (event) {
        var touch = event.targetTouches[0];
        pressX = touch.pageX;
        pressY = touch.pageY;
        var current = $(this).attr("class");//获取当前结构class
        var top = $(".dog div."+current).offset().top;//获取目标结构top值
        var left = $(".dog div."+current).offset().left;//获取目标结构left值
        $(this).removeAttr('style');
        console.log(top,left);
        a = top;
        b = left;
        c = current;
    }, false);

    //手指滑动时
    obj.bind('touchmove', function (event) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        var deltaX = touch.pageX - pressX;
        var deltaY = touch.pageY - pressY;
        $(this).css({"-webkit-transform":"translate3d("+deltaX+"px,"+deltaY+"px,0)"})
    }, false);

    //手指离开时
    obj.bind('touchend', function (event) {
        var t = $(this).offset().top;
        var l = $(this).offset().left;  
        console.log(t,l);           
        if(t>a-25 && t<a+25 && l>b-25 && l<b+25){
            console.log("匹配");
            $(this).remove();
             $(".dog div."+c).addClass("old");
        }else{
            console.log("不匹配");
            $(this).css({"-webkit-transition":"0.3s ease -webkit-transform"});
            $(this).css({"-webkit-transform":"translate3d(0,0,0)"})         
        }
        var o = $(".dog").children(".old").length;//获取已匹配的个数
        if(o == 25){
            alert("结束")
            obj.unbind();//解除绑定
        }
    }, false);

    //禁止页面touchmove
    function lockScroll(){
        $('body').bind('touchmove',function(e){
            e.preventDefault();
        });         
    }
});

        那段代码相信大家都不面生,过多的不说明了, 笔者把那段代码修改成
“<meta name=”viewport”
content=”user-scalable=no” />”
 
美妙的事体就产生了,再一次生成图片的时候图片居然和html同样清晰,小编屡屡试了不少次,对页面没什么影响,ok,消除,额手称庆啊!这些坑作者用了二日时间消除

拖动小游戏.png

       
 之后下班回到家,又做了个demo.各类测试。各样调解,依然战败,后来把页面顺便又看了三遍,突然开采head中有诸如此类一句代码 

css

body {background: #333;font-family: "Microsoft Yahei"}
.dog {width:7rem;height:7rem;overflow: hidden;margin:0.5rem auto;}
.dog div {background: #14a72b;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}
.dog .old {background:#be8824; }
footer {position: fixed;width:7rem; bottom:0;left:0.25rem;height: 1.4rem;}
footer ul li{background: #be8824;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}

       

图片 1

         
首先项目应用的是vue.js写的分界面,数据都以放开js中的,里面包车型客车题都以单选,每当有入选的选项就能跳到第三页,就那样推算,知道最终一题,有入选的就能够产出提交按键,提交以后,根据答题对的个数,剖断相应的地点,然后将地点回显到html页面上,然后通过
“html2canvas.js”
这么二个canvas插件将图纸生成放到最顶层就可以,那时候会现出贰个问题,生成的图样不明晰,朕也是在互连网种种学科超看,绝大许多人说将页面放大到两倍,生成图片减少就能够,可是小编试了好数13回末尾退步送别了那几个方案,决定吐弃采取清晰的图样。后来思维,客户看到料定回不乐意,如何做!
咋办! 

此番来个拖动的小游戏吧,格子随机,这里以编号标记,其实便是里面包车型客车class,编号对应,尾部小格子就可以拖曳到地点对应地点,+一分。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图