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 属性，如 idimg.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刮刮乐相关推荐

H5 canvas制作刮刮卡效果并计算清理结果
简要步骤如下 1.绘制底图载体任意DOM CANVAS 图片皆可 2.canvas绘制交互区域纯色或图片皆可 3.设定混合模式 "destination-out" 关键 4.根 ...
html5 刮刮乐源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能舍 ...
简单的Canvas刮刮乐带动画效果的实例
今天做了个刮刮乐领奖品的小活动,感觉挺有用的,整理在这儿记录下上个效果图先: 加了个简单的 css 动画效果下面贴上主要代码: index.html <!DOCTYPE html> & ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
骏飞H5幸运刮刮乐源码多级分佣+upupw直接架设+H5微信登陆公众号接入管理员
简介: 骏飞H5幸运刮刮乐源码多级分佣+upupw直接架设+H5微信登陆公众号接入管理员网盘下载地址: http://kekewl.net/pWg5xjUEhkm0 图片:
canvas之刮刮乐
canvas之刮刮乐 canvas合成说到刮刮乐,先让我们了解一下canvas合成. 透明度合成 globalAlpha globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上 ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
canvas实现简单的刮刮乐功能
canvas实现刮刮乐效果平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品,对此突然产生了些许兴趣于是就琢磨着该如何实现,最终还是选择了can ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...

H5 Canvas刮刮乐

H5 Canvas刮刮乐相关推荐

最新文章

热门文章