js 移动端指尖摩擦小游戏源码

原创

RandTsui 2023-03-02 16:13:18 博主文章分类：web前端 ©著作权

文章标签 javascript 移动 xml 属性值事件监听 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者RandTsui的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>
<head>
    <title>指尖摩擦</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link href="css/afd.css" rel="stylesheet" />
    <script src="js/cxc.js"></script>
    <script src="js/afd.js"></script>
</head>
<body>
   <div id="start">
       <img id="imga"/>
       <div id="d1"><img id="img1" /></div>
       <div id="d2"><img id="img2" /></div>
       <div id="d3"><img id="img3" /></div>
       <div id="d4"><img id="img4" /></div>
       <div id="d5"><img id="img5" /></div>
       <div id="d6"></div>
   </div>
    <div id="select">
        <img id="imgb" />
        <div id="dd1"><img id="img6" /></div>
        <div id="dd2"><img id="img7" /></div>
        <div id="dd3"><img id="img8" /></div>
        <div id="dd4"><img id="img9" /></div>
        <div id="dd5"><img id="img10" /></div>
    </div>
    <div id="rub">
        <div id="one">
            <img id="img11" src="a/aa.jpg"/>
            <img id="img13" src="a/bb2.png"/>
            <img id="img14" src="a/bb1.png" />
        </div>
        <div id="three"></div>
    </div>
    <div id="result">
        <img id="imgc" />
        <img id="imgd" />
        <div id="da"></div>
        <div id="db"></div>
        <div id="dc"></div>
    </div> 
    <audio id="audio" style="display:none;" src="sounds/afd.mp3"></audio>
</body>
</html>

cxc.js

/* cxc.js 频繁操作公共接口 */
var $ = function (id) {
    return document.getElementById(id);
};    //通过id获取dom对象
var A = function (msg) {
    alert(msg);
};   //alert的简写
var EmptyFun = function () {
};   // 空方法
var setL = function (dom, L) {
    dom.style.left = L + "px";
};   // 设置 dom 的 left
var setT = function (dom, T) {
    dom.style.top = T + "px";
};   // 设置 dom 的 top
var setLT = function (dom, L, T) {
    dom.style.left = L + "px";
    dom.style.top = T + "px";
};    //同时设置 dom 的 left top
var getLT = function (dom) {
    return [parseInt(dom.style.left), parseInt(dom.style.top)];
};    //   返回dom的left和top值，类型为整型数组[int,int]
var setW = function (W) {
    dom.style.width = W + "px";
};     // 设置 dom 的 width
var setH = function (H) {
    dom.style.height = H + "px";
};     // 设置 dom 的 height
var setWH = function (dom, W, H) {
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};     //同时设置 dom 的 width height
var getWH = function (dom) {
    return [parseInt(dom.style.width), parseInt(dom.style.height)];
};  //    返回dom的 width 和 height 值，类型为整型数组[int,int]
var setLTWH = function (dom, L, T, W, H) {
    dom.style.left = L + "px";
    dom.style.top = T + "px";
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};   //同时设置 dom 的 left top width height
var setRTWH = function (dom, R, T, W, H) {
    dom.style.right = R + "px";
    dom.style.top = T + "px";
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};   //同时设置 dom 的 left top width height
var getLTWH = function (dom) {
    return [parseInt(dom.style.left), parseInt(dom.style.top), parseInt(dom.style.width), parseInt(dom.style.height)]
};      //  返回dom的 left top width  height 值，类型为整型数组[int,int,int,int]
var setcursor = function (dom,shape) {
    dom.style.cursor = shape;
};  //设置鼠标经过dom的指针形状
var EventsType = {//事件类型
    click:"click",
    mousedown:"mousedown",
    mouseup:"mouseup",
    mouseover:"mouseover",
    mouseleave:"mouseleave",
    mousemove:"mousemove",
    DOMContentLoaded:"DOMContentLoaded",
};
var AddEvent = function (dom, type, fun) {
    dom.addEventListener(type, fun, false);
};      //添加dom对象的事件监听方法
var AddEvent2 = function (dom, type1, fun1, type2, fun2) {
    dom.addEventListener(type1, fun1, false);
    dom.addEventListener(type2, fun2, false);
};     //一次添加dom的两个事件监听方法
var AddEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
    dom.addEventListener(type1, fun1, false);
    dom.addEventListener(type2, fun2, false);
    dom.addEventListener(type3, fun3, false);
}; //一次添加dom的三个事件监听方法
var DelEvent = function (dom, type, fun) {
    dom.removeEventListener(type, fun, false);
};  // 删除dom对象的事件监听方法
var DelEvent2 = function (dom, type1, fun1, type2, fun2) {
    dom.removeEventListener(type1, fun1, false);
    dom.removeEventListener(type2, fun2, false);
}; //一次删除dom对象的两个事件监听方法
var DelEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
    dom.removeEventListener(type1, fun1, false);
    dom.removeEventListener(type2, fun2, false);
    dom.removeEventListener(type3, fun3, false);
}; //一次删除dom对象的三个事件监听方法
var inArray = function (str, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (str == arr[i]) {
            return true;
        }
    }
    return false;
}; //  判断字符串str是否存在于数组arr
var cannotselect = function () {
    window.getSelection().removeAllRanges();
};    //页面元素（文字、图片等）不能被选中
var setStyle = function (dom, styleName, styleValue) {
    dom.setAttribute("style", styleName + ":" + styleValue + ";");
};  //设置dom的 一个style 属性值
var setStyle2 = function (dom, styleName1, styleValue1, styleName2, styleValue2) {
    dom.setAttribute("style", styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";");
};//一次设置dom的 两个style 属性值
var delStyle = function (dom, styleName) {
    dom.removeAttribute("style", styleName);
};//删除dom的 一个style 属性值
var delStyle2 = function (dom, styleName1, styleName2) {
    dom.removeAttribute("style", styleName1);
    dom.removeAttribute("style", styleName2);
};//一次删除dom的 两个style 属性值
var setAttr = function (dom, attrName, attrValue) {
    dom.setAttribute(attrName, attrValue);
};// 设置dom的 一个属性值
var setAttr2 = function (dom, attrName1, attrValue1, attrName2, attrValue2) {
    dom.setAttribute(attrName1, attrValue1);
    dom.setAttribute(attrName2, attrValue2);
};//一次设置dom的 两个属性值
var delAttr = function (dom, attrName) {
    dom.removeAttribute(attrName);
};//删除dom的 一个属性值
var delAttr2 = function (dom, attrName1, attrName2) {
    dom.removeAttribute(attrName1);
    dom.removeAttribute(attrName2);
};//删除dom 的两个属性值
var Hide = function (dom) {
    dom.style.display = "none";
};//   隐藏dom
var Hide2 = function (dom1, dom2) {
    dom1.style.display = "none";
    dom2.style.display = "none";
};//   隐藏2个dom
var Hide3 = function (dom1,dom2,dom3) {
    dom1.style.display = "none";
    dom2.style.display = "none";
    dom3.style.display = "none";
};//   隐藏3个dom
var Show = function (dom) {
    dom.style.display = "inline";
};  //  显示dom
var Show3 = function (dom1, dom2, dom3) {
    dom1.style.display = "inline";
    dom2.style.display = "inline";
    dom3.style.display = "inline";
};//   显示3个dom
/* cxc.js 频繁操作公共接口 */

/* AJAX 接口 */
var url, method, msg;
var xmlReq = new XMLHttpRequest();
var AJAX = function (url, method, msg, callback) {
    xmlReq.open(method, url, true);
    xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlReq.onreadystatechange = function () {
        if (xmlReq.readyState == 4) {
            if (xmlReq.status == 200) {
                callback();
            }
            else {
                A("ajax status is " + xmlReq.status);
            }
        }
    };
    xmlReq.send(msg);
};
/* AJAX 接口 */

/* 入口 */
var start = function (fun) {
    var begin = function () {
        DelEvent(document, EventsType.DOMContentLoaded, begin);
        fun();
    };
    AddEvent(document, EventsType.DOMContentLoaded, begin);
};
/* 入口 */

afd.js

var W = window.innerWidth, H = window.innerHeight;
var dW = W * 0.18, dH = W * 0.06;
var f1 = false, f2 = false, f3 = false;
var flag = true;
var num = 0;
var imgdL = (W - W * 0.9) / 2;
var imgdT = (W * 1.63 - W * 0.9 * 1.45) / 2;
var d = true;
var point = function (x,y) {
    this.x = x;
    this.y = y;
};
var playsound = function () {
    $("audio").play();
};
var getimg = function () {
    var n = Math.floor(Math.random() * 3 + 1);
    return "imgs/c" + n + ".gif";
};
var fun1 = function () {
    f3 = true;
    animation6(Math.floor(Math.random() * 5 + 1));
    DelEvent(document, "touchstart", fun1);
    setTimeout(function () {
        AddEvent(document, "touchstart", fun2);
    }, 100);
};
var fun2 = function () {
    DelEvent(document, "touchstart", fun2);
    Show($("imgc"));
    Hide($("imgd"));
    $("imgc").src = getimg();
    Show($("da")); Show($("db")); Show($("dc"));
};
var animation1 = function (dom) {
    var L1 = W * 0.78, T1 = W * 0.66;
    var L = W * 0.81, T = W * 0.69;
    var a = (L - L1) / 3, b = (T - T1) / 3;
    var show = function () {
        L = L - a;
        T = T - b;
        if (L < L1) {
            L = W * 0.81, T = W * 0.69;
        }
        setLT(dom, L, T);
        setTimeout(show, 200);
    };
    setLTWH(dom, L, T, 100, 100);
    setTimeout(show, 200);
};
var animation3 = function (dom, L, T, W, H) {
    var min = 6, max = -6, a = 6;
    var r = 0 + a, f = 0;
    var show = function () {
        if (f == 0) {
            r = r + a;
        } else {
            r = r - a;
        }
        if (r > min) {
            f = 1;
            r = min - a;
        }
        if (r < max) {
            f = 0;
            r = max + a;
        }
        setStyle(dom, "transform", "rotate(" + r + "deg)");
        setLTWH(dom, L, T, W, H);
        setTimeout(show, 100);
    };
    setStyle(dom, "transform", "rotate(" + r + "deg)");
    setLTWH(dom, L, T, W, H);
    setTimeout(show, 100);
};
var animation4 = function () {
    playsound();
    Show($("img11"));
    setLTWH($("img11"), 0, 0, W, W * 1.63);
    setTimeout(function () {
        animation5($("img13"));
    }, 3000);
};
var animation5 = function (dom) {
    var imgW = W * 0.9, imgH = imgW / (450 / 122);
    var endL = W * 0.05, endT = W * 0.9;
    var L = -endL * 6, n = (endL - L) / 7;
    var show = function () {
        L += n;
        if (L < endL) {
            setLTWH(dom, L, endT, imgW, imgH);
            setTimeout(show, 100);
        } else {
            setTimeout(function () {
                Hide(dom);
                Show($("img14"));
                L = -endL * 6;
                var show1 = function () {
                    L += n;
                    if (L < endL) {
                        setLTWH($("img14"), L, endT, imgW, imgH);
                        setTimeout(show1, 100);
                    }
                    AddEvent(document, "touchstart", fun1);
                }
                setLTWH($("img14"), L, endT, imgW, imgH);
                setTimeout(show1, 100);
            }, 2000);
        }
    }
    setLTWH(dom, L, endT, imgW, imgH);
    Show(dom);
    setTimeout(show,100);
};
var animation6 = function (i) {
    Show($("result"));
    $("imgd").src = "imgs/d" + i + ".jpg";
    Show($("imgd"));
    setLTWH($("imgd"), imgdL, imgdT, W * 0.9, W * 0.9 * 1.45);
    var time = 20;
    var W1 = W * 0.8, H1 = W * 0.8 * 1.45;
    var W2 = W * 0.9, H2 = W * 0.9 * 1.45;
    var a = (W2 - W1) / 3, b = (H2 - H1) / 3;
    var L1 = (W - W * 0.8) / 2, T1 = (W * 1.63 - W * 0.8 * 1.45) / 2;
    var c = true;
    var show = function () {
        if (c) {
            W2 = W2 - a, H2 = H2 - b;
            if (W2 < W1) {
                W2 = W1;
                c = false;
                time = 60;
            }
        }
        else {
            W2 = W2 + a, H2 = H2 + b;
            if (W2 > W * 0.9) {
                if (d) {
                    d = false;
                    animation6(i);
                }
                else {
                    return;
                }
            } 
        }
        setLTWH($("imgd"), (W - W2) / 2, (W * 1.63 - H2) / 2, W2, H2);
        setTimeout(show, time);
    };
    setLTWH($("imgd"), (W - W2) / 2, (W * 1.63 - H2) / 2, W2, H2);
    setTimeout(show, time);
};
var setrub = function (fun, dom) {
    $("three").innerHTML = "";
    Show($("rub")); Show($("three"));
    Hide($("one")); Hide($("img11")); Hide($("img13")); Hide($("img14"));
    var img = new Image();
    img.onload = function () {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = W;
        canvas.height = W * 1.63;
        $("three").appendChild(canvas);
        ctx.drawImage(this, 0, 0, 500, 815, 0, 0, W, W * 1.63);
        ctx.globalCompositeOperation = "destination-out";
        canvas.addEventListener('touchend', function (e) {
            flag = true;
        }, 1);
        canvas.addEventListener('touchmove', function (e) {
            num++;
            if (num > 160) {
                num = 0;
                if (f3) {
                    $("imgc").src = getimg();
                    Show($("result"));
                    return;
                }
                Hide($("three"));
                Show(dom);
                setTimeout(function () {
                    fun();
                }, 00);
                return;
            }
            if (flag) {
                flag = false;
                p1 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
                return;
            }
            p2 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
            k = (p2.y - p1.y) / (p2.x - p1.x);
            b = p1.y - k * p1.x;
            var d = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
            var _num = d * 0.2;
            var x = p1.x, y = p1.y;
            var n = (p2.x - p1.x) / _num;
            for (var i = 0; i < _num; i++) {
                ctx.beginPath();
                ctx.arc(x, y, 25, 0, 2 * Math.PI);
                ctx.fill();
                x += n;
                y = k * x + b;
            }
            p1 = p2;
        });

    };
    img.src = "imgs/b1.jpg"; 
};
var INITDOM = function () {
    setLTWH(document.body, 0, 0, W, H);

    /*         start          */
    setLTWH($("start"), 0, 0, W, W * 1.63);
    setLTWH($("imga"), 0, 0, W, W * 1.63);
    $("imga").src = "imgs/a1.jpg";
    setLTWH($("d1"), W * 0.345, W * 1.222, dW, dH);
    setLTWH($("d2"), W * 0.528, W * 1.222, dW, dH);
    setLTWH($("d3"), W * 0.722, W * 1.222, dW, dH);
    setLTWH($("d4"), W * 0.529, W * 1.348, dW, dH);
    setLTWH($("d5"), W * 0.715, W * 1.348, dW, dH);

    setLTWH($("img1"), dH * 0.055, dH * 0.075, dH * 0.8, dH * 0.8);
    setLTWH($("img2"), dH * 0.07, dH * 0.075, dH * 0.8, dH * 0.8);
    setLTWH($("img3"), dH * 0.055, dH * 0.075, dH * 0.8, dH * 0.8);
    setLTWH($("img4"), dH * 0.072, dH * 0.07, dH * 0.8, dH * 0.8);
    setLTWH($("img5"), dH * 0.055, dH * 0.075, dH * 0.8, dH * 0.8);
    $("img1").src = $("img2").src = $("img3").src = $("img4").src = $("img5").src = "imgs/bt.png";
    Hide($("img1")); Hide($("img2")); Hide($("img3")); Hide($("img4")); Hide($("img5"));
   
    /*         select         */
    setLTWH($("select"), 0, 0, W, W * 1.63);
    setLTWH($("imgb"), 0, 0, W, W * 1.63);
    $("imgb").src = "imgs/a2.png";
    setLTWH($("dd1"), W * 0.345, W * 1.027, dW, dH);
    setLTWH($("dd2"), W * 0.528, W * 1.027, dW, dH);
    setLTWH($("dd3"), W * 0.715, W * 1.027, dW, dH);
    setLTWH($("dd4"), W * 0.528, W * 1.177, dW, dH);
    setLTWH($("dd5"), W * 0.715, W * 1.177, dW, dH);

    setLTWH($("img6"), dH * 0.055, dH * 0.075, dH * 0.8, dH * 0.8);
    setLTWH($("img7"), dH * 0.07, dH * 0.075, dH * 0.8, dH * 0.8);
    setLTWH($("img8"), dH * 0.09, dH * 0.079, dH * 0.8, dH * 0.8);
    setLTWH($("img9"), dH * 0.17, dH * 0.1, dH * 0.8, dH * 0.8);
    setLTWH($("img10"), dH * 0.055, dH * 0.1, dH * 0.8, dH * 0.8);
    $("img6").src = $("img7").src = $("img8").src = $("img9").src = $("img10").src = "imgs/bt.png";
    Hide($("select")); Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));

    /*         rub         */
    setLTWH($("rub"), 0, 0, W, W * 1.63);
    setLTWH($("one"), 0, 0, W, W * 1.63);
    setLTWH($("three"), 0, 0, W, W * 1.63);
    Hide($("rub"));

    /*         result         */
    setLTWH($("result"), 0, 0, W, W * 1.63);
    setLTWH($("imgc"), 0, 0, W, W * 1.63);
    setLTWH($("da"), W * 0.1, W * 1.1, W * 0.2, W * 0.25);
    setLTWH($("db"), W * 0.4, W * 1.1, W * 0.2, W * 0.25);
    setLTWH($("dc"), W * 0.7, W * 1.1, W * 0.2, W * 0.25);
    Hide($("da")); Hide($("db")); Hide($("dc"));
    Hide($("result")); Hide($("imgd")); Hide($("imgc"));
    
};
var EVENTS = function () {
    animation1($("d6"));

    AddEvent($("d1"), "touchstart", function () {
        f1 = true;
        Show($("img1")); Hide($("img2")); Hide($("img3"));
        Show($("img6")); Hide($("img7")); Hide($("img8"));
    });
    AddEvent($("d2"), "touchstart", function () {
        f1 = true;
        Hide($("img1")); Show($("img2")); Hide($("img3"));
        Hide($("img6")); Show($("img7")); Hide($("img8"));
    });
    AddEvent($("d3"), "touchstart", function () {
        f1 = true;
        Hide($("img1")); Hide($("img2")); Show($("img3"));
        Hide($("img6")); Hide($("img7")); Show($("img8"));
    });
    AddEvent($("d4"), "touchstart", function () {
        f2 = true;
        Show($("img4")); Hide($("img5"));
        Show($("img9")); Hide($("img10"));
    });
    AddEvent($("d5"), "touchstart", function () {
        f2 = true;
        Hide($("img4")); Show($("img5"));
        Hide($("img9")); Show($("img10"));
    });
    AddEvent($("d6"), "touchstart", function () {
        if (!f1 || !f2) {
            Show($("select"));
            return;
        }
        setrub(animation4,$("one"));
    });
    AddEvent($("dd1"), "touchstart", function () {
        f1 = true;
        Show($("img1")); Hide($("img2")); Hide($("img3"));
        Show($("img6")); Hide($("img7")); Hide($("img8"));
        if (f1 && f2) {
            setTimeout(function () {
                Hide($("select"));
                Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));
            }, 500);
        }
    });
    AddEvent($("dd2"), "touchstart", function () {
        f1 = true;
        Hide($("img1")); Show($("img2")); Hide($("img3"));
        Hide($("img6")); Show($("img7")); Hide($("img8"));
        if (f1 && f2) {
            setTimeout(function () {
                Hide($("select"));
                Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));
            }, 500);
        }
    });
    AddEvent($("dd3"), "touchstart", function () {
        f1 = true;
        Hide($("img1")); Hide($("img2")); Show($("img3"));
        Hide($("img6")); Hide($("img7")); Show($("img8"));
        if (f1 && f2) {
            setTimeout(function () {
                Hide($("select"));
                Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));
            }, 500);
        }
    });
    AddEvent($("dd4"), "touchstart", function () {
        f2 = true;
        Show($("img4")); Hide($("img5"));
        Show($("img9")); Hide($("img10"));
        if (f1 && f2) {
            setTimeout(function () {
                Hide($("select"));
                Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));
            }, 500);
        }
    });
    AddEvent($("dd5"), "touchstart", function () {
        f2 = true;
        Hide($("img4")); Show($("img5"));
        Hide($("img9")); Show($("img10"));
        if (f1 && f2) {
            setTimeout(function () {
                Hide($("select"));
                Hide($("img6")); Hide($("img7")); Hide($("img8")); Hide($("img9")); Hide($("img10"));
            }, 500);
        }
    });
    AddEvent($("da"), "touchstart", function () {
        location.reload();
    });
    AddEvent($("db"), "touchstart", function () {
        alert("快将此链接分享给小伙伴吧！");
    });
    AddEvent($("dc"), "touchstart", function () {
        var geturl = function () {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/wkfind/i) == 'wkfind') {
                return "http://game.o2o.com.cn/";
            } else {
                return "http://wkfind.o2o.com.cn:8080/app/apk/download";
            }
        };
        window.location.href = geturl();
    });
};
var END = function () {
    AddEvent(document, "touchmove", function (ev) { ev.preventDefault() });

};
window.onload = function () {
    INITDOM();
    EVENTS();
    END();
};

afd.css

*{
    padding:0px;
    margin:0px;
}
body{
    overflow:hidden;
}
#start{
    position:absolute;
    overflow:hidden;
}
#imga, #imgb, #imgc, #imgd {
    position: absolute;
}
#d1, #d2, #d3, #d4, #d5 {
    position: absolute;
}
#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img13, #img14{
    position: absolute;
    background-size: cover;
}
#d6 {
    position: absolute;
    border-radius: 20px;
    background-size: cover;
    background-image: url('../imgs/hand.png');
}
#select{
    position:absolute;
    overflow:hidden;
}
#dd1, #dd2, #dd3, #dd4, #dd5{
    position: absolute;
}
#rub, #one, #three {
    position: absolute;
    overflow: hidden;
    background-color: #1b1a1f;
}
#result{
    position:absolute;
    overflow:hidden;
    background-color:white;
}
#da,#db,#dc{
    position:absolute;
}