游戏的套路你知道吗？ H5 Canvas刮刮乐
zizihjk
7年前
<p>玩游戏的人 很多时候都会遇到翻牌子 开宝箱。</p> <p>总有人傻傻的在哪里还纠结很久到底点哪一个！ 纠结 指不定翻哪一个会多一点，你明明看到那个卡片的奖项多 。</p> <p>那我就告诉你好了 其实很多时候在你 <em>点开</em> 那个页面的时候你的翻牌结果已经随着你 <strong>点开</strong> 而请求到了。</p> <p>接下来 就是一些动画效果 然后告诉你的中奖结果是什么。 其实就很像你看的那种街头，赌碗 一个样子。</p> <p>为什么 你的 大号 总是什么奖都 抽不到 小号 总是 能够抽到 一些东西。</p> <p>其实就是游戏策划对用户的一些粘度数据的分析 还有就是对你用户的衰减做的一些统计分析做出来的。</p> <p>为什么 原来就是简简单单的 开宝箱 现在 又加上了 碎片 符 等一些外在的东西。</p> <p>那就是加强你对游戏的粘度 宝箱里面装的东西总是一些价值不菲的 装备 能买但是很贵 ，游戏策划会给你点好处 让你开宝箱</p> <p>等你开了一块 前期让你能够很容易的拿到这件成品的百分30左右 然后 难度升级 你就打啊 打 最后等你合成这些东西的时候</p> <p>你所合成的 屠龙刀早就打折降价了， 你自己心里想LZ是靠实力一刀一刀砍出来的 和后面这些打折了 购买的不一样 心里还特高兴 。</p> <p>碎片 ，符 不就是让你觉得 加了这些东西 在你开宝箱的时候 几率会加大 ，你就会更加期待。</p> <p>毕竟用户的在线时长 可以做很多事 你所消费的几率也会加大。</p> <p>好了 附上一个 canvas 刮刮乐吧</p> <p>开始的想法</p> <p>1.设置两个canvas 的不同的 z-index 来设置其前后 形成遮罩层的效果 后面的一个canvas 实现绘图功能 前面一个canvas实现清除刮奖涂层的功能 当然也可以用一个canvas 在你别清除了时候边绘制（那样会过于占用资源 而且自我觉得实现麻烦没有采用）</p> <p>2.一个div用来显示图片或者文字 canvas设置z-index做蒙版在上面 然后实现刮得效果。</p> <p>其中有借鉴为博友的文章 ：http://www.cnblogs.com/puyongsong/p/6027533.html</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta id="viewport" name="viewport" content="width=640,user-scalable=no,minimal-ui" /> <!--禁止用户缩放--> </head> <body> <div style="width:640px;margin:auto;"> <!--刮刮乐--> <div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;"> <div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">即兴彩票</div> <div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column; position:relative;"> <!--这里其实是为另一个做的准备 但是代码就不上了 --> @*<div style=" width: 300px;height: 200px; position:absolute;"> <div style=" width: 300px;height: 200px; z-index: 1; "> <div id="div_one" style="height: 100px; width: 100px; float: left; background-color: #0480BE;"></div> <div id="div_two" style="height: 100px; width: 100px; float: left; background-color:#004444"></div> <div id="div_three" style="height: 100px; width: 100px; float: right; background-color: #005580; "></div> <div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; background-color: #149BDF;"></div> <div id="div_five" style="height: 100px; width: 100px; float: left; background-color: #008800;"></div> <div id="div_six" style="height: 100px; width: 100px; float: left; background-color: #149BDF;"></div> </div> </div> <canvas id="canvas2" width="300px" height="200px" style="top:0;left:0;z-index:2; position: relative;"> sorry 您的浏览器不支持canvas该组件 </canvas> </div>*@ <div id="canvasArea" style="width:300px;height:200px;position:relative;"> <div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:30px;color:indianred;"> <div id="div_img"> <img id="winpic" src="~/GIF/0.jpg" style="border-radius:50px"> </div> </div> <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"> sorry 您的浏览器不支持canvas该组件 </canvas> </div> </div> </div> <div id="bg_div" style=" color:red "> <!--display:none;--> <div id="show"> <label id="winResult">缺那么点运气</label> </div> </div> <script src="~/Scripts/ISWin.js"></script> </body> </html> </code></pre> <p>接着就是页面的js 由于是在Cshtml 中写的 所以会js在最后 如果你是做成手机 你当然会放在页尾 元素先加载 动画效果什么的后行</p> <pre> <code class="language-javascript">//页面加载完成之后就加载canvas的上下文 //添加触摸事件和触摸滑动事件 window.onload = function () { var canvas = document.getElementById("canvas"); context = canvas.getContext("2d");//这里没有给var 是让其成为全局变量都可以访问 canvas.addEventListener('touchstart', touch, false); canvas.addEventListener('touchend', touchend, false); draw(); } //更改图片 在页面加载的时候就先把图片加载出来 function changepic() { Scratch.ProducingPic("/Potiker/Frist", 'winpic', 'div_img'); } function ISwin() { ShowDiv(bg_div); } function ShowDiv(show_div) { //这里是写死的 纯属故意 var img = document.getElementById('winpic'), result = '12.jpg'; var name = img.src.substring(img.src.lastIndexOf('/') + 1).toString(); if (name === result) { $("#winResult").text("哇偶你中奖了"); } else { $("#winResult").text("遗憾了 ！没中奖了"); } setTimeout(function () { ClearCanvas() }, 800); setTimeout(function () { CloseDiv(bg_div) }, 1200); $("#bg_div").css("display", "block"); }; //关闭层 其实也可以用css来控制 function CloseDiv(bg_div) { $("#bg_div").hide(); draw(); }; </code></pre> <p>你会问 为什么没有请求的过程 我咋知道我的图片要显示什么</p> <p>毕竟 现在网上段子都说了 一段脚本会引发血案 我还是把它写成一个文件 然后加密 混淆什么的 毕竟那样 还是加了一些难度了</p> <pre> <code class="language-javascript">//----------------------------③ (function () { // 事件绑定 window.bindHandler = (function () { if (window.addEventListener) {// 标准浏览器 return function (elem, type, handler) { // elem:节点 type:事件类型 handler:事件处理函数 // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意：ie没有这个参数 elem.addEventListener(type, handler, false); } } else if (window.attachEvent) {// IE浏览器 return function (elem, type, handler) { elem.attachEvent("on" + type, handler); } } }()); // 事件解除 window.removeHandler = (function () { if (window.removeEventListener) {// 标准浏览器 return function (elem, type, handler) { elem.removeEventListener(type, handler, false); } } else if (window.detachEvent) {// IE浏览器 return function (elem, type, handler) { elem.detachEvent("on" + type, handler); } } }()); //添加清除事件及动作 （获取canvas 动作） }()); //刮奖 var brush1 = function (event) { // ----------------------------② var x = event.touches[0].clientX - canvas.getBoundingClientRect().left; var y = event.touches[0].clientY - canvas.getBoundingClientRect().top; // ---------------------------- context.clearRect(x, y, 20, 20); //console.log(x, y); }; /// 鼠标按下时 - 绑定鼠标跟随事件 function touch() { bindHandler(canvas, 'touchmove', brush1, false); changepic(); } // 停止刮奖功能 - 解绑鼠标跟随事件 function touchend() { removeHandler(canvas, "mousemove", brush1, false); ISwin(); } //更改图片 在页面加载的时候就先把图片加载出来 function changepic() { Scratch.Frist("/Potiker/Frist"); } //测试绘制圆形遮罩 function draw() { context.fillStyle = '#A9AB9D'; context.beginPath(); context.arc(150, 102, 50, 0, Math.PI * 2, true); context.closePath(); context.fill(); } // 改进意见： 逐步清除 function ClearCanvas() { context.clearRect(100, 50, 5 * 22, 5 * 22); } //这里是引入一个手机文件里面封装了一个XHRHttpResquset ① new_element = document.createElement("script"); new_element.setAttribute("type", "text/javascript"); new_element.setAttribute("src", "../Scripts/inc.js"); document.body.appendChild(new_element); var Scratch = { //请求客户信息 Frist: function (url) { Ajax({ method: 'get', type: 'json', url: url, callback: function (data) { } }) }, //用户点击绘制后 请求新的图片路径并赋值 //如果错误则调用 创建一张谢谢参与的图片 ProducingPic: function (url, picid, piclocation) { var path; Ajax({ method: 'get', type: 'json', url: url, callback: function (data) { console.log(data); if (data[1].static == "ok") { path = data[0].img; } else { path = '';//请重新登录的图片 } document.getElementById('' + picid).remove(); var imglocation = document.getElementById('' + piclocation); var img = document.createElement('img'); //设置 img 属性，如 id img.setAttribute("id", "" + picid); img.style.borderRadius = "50px"; //设置 img 图片地址 img.src = "../GIF/" + path; imglocation.appendChild(img); } }) }, //生成刮奖结果 Result: function (url) { Ajax({ method: 'GET', type: 'json', url: this.url, callback: function (data) { //弹出中奖金额 } }) } } </code></pre> <p>解释 解释：</p> <p>③ ：首先将其封装之后你可以多个地方调用 这个显而易见 然后优先执行 你也是懂得 </p> <p>② : 这是一个计算 你的触摸到的canvas的坐标位置 </p> <p>① ：这里是引入另一个文件中的某个方法 </p> <p>①=》很多时候我们会在书写js文件的时候去引入另一个文件中的方法 </p> <p>两种解决方案 ： 一：把要引用的文件直接copy过来 写到这个文件当中去（吃亏不讨好 手机里当然是越小越好咯）。 </p> <p>二： 在js文件中动态引入 添加一个script的js标签。 </p> <p>注意事项： 由于是script标签 最好是在页面的body中引入。</p> <p>好了 来说个手游的 套路 ： 那就是你看到的结果很多时候都是服务端 生成的 你想去更改 抓包什么的 然后客服 索求币</p> <p>人家数据库一查 没有这条数据 而且一个游戏一局中的每次请求都是有唯一的ID 很多时候还会加上上下文判断 从客户端入手的事情还是少想</p> <p>游戏 玩玩就好 别太投入。</p> <p>附上效果图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7d8e0033108b3963b158f80ae9e50ba3.png"> <img src="https://simg.open-open.com/show/a6286b875c849baf568d2ea442f2b8fe.png"></p> <p> </p> <p>来自：http://www.cnblogs.com/SWSHBON/p/6073159.html</p> <p> </p>