H5 Canvas刮刮乐

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

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

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

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

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

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

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

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

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

最新文章

热门文章