js 移动端 指尖摩擦小游戏源码
2016-03-29 13:29
639 查看
<!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 的 leftvar setT = function (dom, T) {dom.style.top = T + "px";}; // 设置 dom 的 topvar setLT = function (dom, L, T) {dom.style.left = L + "px";dom.style.top = T + "px";}; //同时设置 dom 的 left topvar 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 的 widthvar setH = function (H) {dom.style.height = H + "px";}; // 设置 dom 的 heightvar setWH = function (dom, W, H) {dom.style.width = W + "px";dom.style.height = H + "px";}; //同时设置 dom 的 width heightvar 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 heightvar 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 heightvar 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是否存在于数组arrvar 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";};// 隐藏domvar Hide2 = function (dom1, dom2) {dom1.style.display = "none";dom2.style.display = "none";};// 隐藏2个domvar Hide3 = function (dom1,dom2,dom3) {dom1.style.display = "none";dom2.style.display = "none";dom3.style.display = "none";};// 隐藏3个domvar Show = function (dom) {dom.style.display = "inline";}; // 显示domvar 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.jsvar 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;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在 Linux 中如何移动文件
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解