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

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

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

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

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

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

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

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

等你开了一块  前期让你能够很容易的拿到这件成品的百分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;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>

接着就是页面的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. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  2. H5 Canvas刮刮乐

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

  3. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  4. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. canvas刮刮乐游戏等

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

  7. canvas刮刮乐和画笔

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

  8. canvas刮刮乐

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

  9. 同学帮帮 h5 刮刮卡组件：Txbb.Scratch

    同学帮帮 h5 刮刮卡组件,简洁.无依赖,支持 globals 和 amd 两种调用方式. 暂时只能用在移动端 使用方法 <div id="J-Scratch">< ...

随机推荐

  1. hibernate入门案例

    最近准备学ssh,今天学了一下hibernate,用的是hibernate4,现在已经出5了:配置文件很容易写错,写配置文件的时候尽量复制. 需要的jar包如下:(jar包我是直接放在项目工程里面了, ...

  2. oracle存储过程

    1.存储过程定义 储存程序 (Stored Procedure),又可称预储程序或者存储过程,是一种在数据库中存储复杂程序,以便外部程序调用的一种数据库对象,它可以视为数据库中的一种函数或子程序.-- ...

  3. css-css权威指南学习笔记7

    第11章 表布局 1.border-spacing,单元格边框间距,可以有两个或一个值,两个值前者表示水平间距,后者垂直间距. 2.border-collapse值为collapse时不可设置padd ...

  4. 他（he）（钟神）

    他[问题描述]一张长度为N的纸带,我们可以从左至右编号为0 −N(纸带最左端标号为0) .现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字N, ...

  5. SOA 实现：服务设计原则

    http://www.ibm.com/developerworks/cn/webservices/ws-soa-design/ 引言 面向服务的体系结构(Service-Oriented Archit ...

  6. validate表单验证插件

    1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...

  7. [Android]学习笔记之布局

    5大布局,其中前3个是常用的,第四个绝对布局已经提示deprecated ![](http://images2015.cnblogs.com/blog/194303/201611/194303-201 ...

  8. 如何在Texstudio内加载语法检查词典？

    如何在Texstudio编辑软件内加载"语法检查词典"? How to make dictionary work in TexStudio I am using TexStudio ...

  9. Zabbix自定义监控8080端口的连接数

    Zabbix自定义监控8080端口的连接数 一 zabbix自定义监控实现思路 实际上我们要想使用zabbix来监控一些服务的原理很简单,步骤分别是:1.写一个脚本用于获取待监控服务的一些状态信息2. ...

  10. web性能优化

    常用方法 压缩源码和图片 JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩 ...