玩游戏的人 很多时候都会遇到翻牌子  开宝箱。

总有人傻傻的在哪里还纠结很久到底点哪一个！ 纠结  指不定翻哪一个会多一点，你明明看到那个卡片的奖项多 。

那我就告诉你好了  其实很多时候在你点开那个页面的时候你的翻牌结果已经随着你点开而请求到了。

接下来 就是一些动画效果 然后告诉你的中奖结果是什么。 其实就很像你看的那种街头，赌碗 一个样子。

为什么 你的大号 总是什么奖都抽不到  小号总是能够抽到一些东西。

其实就是游戏策划对用户的一些粘度数据的分析   还有就是对你用户的衰减做的一些统计分析做出来的。

为什么  原来就是简简单单的开宝箱  现在 又加上了 碎片  符  等一些外在的东西。

那就是加强你对游戏的粘度  宝箱里面装的东西总是一些价值不菲的 装备 能买但是很贵 ，游戏策划会给你点好处  让你开宝箱

等你开了一块  前期让你能够很容易的拿到这件成品的百分30左右  然后 难度升级 你就打啊 打  最后等你合成这些东西的时候

你所合成的 屠龙刀早就打折降价了， 你自己心里想LZ是靠实力一刀一刀砍出来的 和后面这些打折了 购买的不一样 心里还特高兴 。

碎片  ，符  不就是让你觉得 加了这些东西  在你开宝箱的时候 几率会加大  ，你就会更加期待。

毕竟用户的在线时长 可以做很多事   你所消费的几率也会加大。

好了 附上一个 canvas 刮刮乐吧

开始的想法

1.设置两个canvas 的不同的 z-index 来设置其前后 形成遮罩层的效果 后面的一个canvas 实现绘图功能 前面一个canvas实现清除刮奖涂层的功能 当然也可以用一个canvas 在你别清除了时候边绘制（那样会过于占用资源 而且自我觉得实现麻烦没有采用） 
2.一个div用来显示图片或者文字 canvas设置z-index做蒙版在上面 然后实现刮得效果。

其中有借鉴为博友的文章 ：http://www.cnblogs.com/puyongsong/p/6027533.html

<!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;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;  "></div>

                        <div id="div_two" style="height: 100px; width: 100px; float: left;  line-height: 1.5 !important;">></div>

                        <div id="div_three" style="height: 100px; width: 100px; float: right;  "></div>

                        <div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; "></div>

                        <div id="div_five" style="height: 100px; width: 100px; float: left;  "></div>

                        <div id="div_six" style="height: 100px; width: 100px; float: left;  "></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>

接着就是页面的js  由于是在Cshtml 中写的  所以会js在最后  如果你是做成手机 你当然会放在页尾 元素先加载  动画效果什么的后行

//页面加载完成之后就加载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();

    };

你会问 为什么没有请求的过程  我咋知道我的图片要显示什么

毕竟 现在网上段子都说了  一段脚本会引发血案  我还是把它写成一个文件 然后加密 混淆什么的 毕竟那样 还是加了一些难度了

//----------------------------③

(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) {

                      //弹出中奖金额

                }

            })

        }

    }

解释 解释： 
③ ：首先将其封装之后你可以多个地方调用 这个显而易见 然后优先执行 你也是懂得 
② : 这是一个计算 你的触摸到的canvas的坐标位置 
① ：这里是引入另一个文件中的某个方法 
①=》很多时候我们会在书写js文件的时候去引入另一个文件中的方法 
两种解决方案 ： 一：把要引用的文件直接copy过来 写到这个文件当中去（吃亏不讨好 手机里当然是越小越好咯）。 
二： 在js文件中动态引入 添加一个script的js标签。 
注意事项： 由于是script标签 最好是在页面的body中引入。

好了 来说个手游的 套路  ： 那就是你看到的结果很多时候都是服务端 生成的 你想去更改 抓包什么的  然后客服 索求币

人家数据库一查 没有这条数据   而且一个游戏一局中的每次请求都是有唯一的ID  很多时候还会加上上下文判断  从客户端入手的事情还是少想

游戏  玩玩就好  别太投入。

附上效果图

 
 
 
好文要顶 关注我 收藏该文  

H5 Canvas刮刮乐的更多相关文章

  1. 游戏的套路你知道吗？ H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  2. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  3. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  4. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  5. canvas刮刮乐游戏等

    裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...

  6. canvas 写一个刮刮乐抽奖

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. canvas之刮刮乐

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  9. canvas 实现刮刮乐

    在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...

随机推荐

  1. js 获取 通过 ”？“ 或者 ”&“ url 传过来参数值

    请先 引用 jQuery的js <script> String.prototype.GetValue=function(para) { var reg = new RegExp(" ...

  2. 以前编写的inno setup脚本,涵盖了自定义安装界面,调用dll等等应用 (转)

    以前编写的inno setup脚本,涵盖了自定义安装界面,调用dll等等应用 (转) ; Script generated by the Inno Setup 脚本向导. ; SEE THE DOCU ...

  3. java break语句的三种用法

    1.用于switch语句当中,用于终止语句 2.用于跳出循环,此为不带标签的break语句,相当与goto的作用 e.g while(i<j&&h<k){ if(h< ...

  4. 简单介绍Android应用特色及详解四大组件

    Android应用特色 Android主要有什么特色呢,有以下几个方面来体现: 四大组件 丰富的系统控件 SQLite数据库等持久化技术 地理位置定位 强大的多媒体 传感器 1,四大组件 Androi ...

  5. Light OJ 1026 - Critical Links （图论-双向图tarjan求割边,桥）

    题目大意:双向联通图, 现在求减少任意一边使图的联通性改变,按照起点从小到大列出所有这样的边 解题思路:双向边模版题 tarjan算法 代码如下: #include<bits/stdc++.h& ...

  6. Centos6.7 python2.6升级到python2.7

    查看python版本: #python -V Python 2.6.6 1.下载python 2.7.3 #wget http://python.org/ftp/python/2.7.3/Python ...

  7. ELK日志管理

    ELK一般由三部分组成:logstash(日志格式化) + elasticsearch(检索) + Kibana(前台报表展示) 官网地址:https://www.elastic.co/ 本人在这用的 ...

  8. NSPredicate谓词

    NSPredicate——谓词(is) 作用:判断条件表达式的求值返回真或假的过程 使用步骤: . 定义NSPredicate对象并指定条件 . 调用谓词的evaluateWithObject方法判断 ...

  9. LeetCode.4 两个有序数组的中位数问题

    这道题是那种典型的有显而易见的解法, 但是想要达到较优的时间复杂度的话就不是这么好做的题目. 我来说说我自己的思考过程 : 首先最先想到的是 O(m + n) 的解法, 也就是利用归并排序的归并将两个 ...

  10. 【html/css】html/css命名规范

    无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自 ...