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刮刮乐的更多相关文章
- 游戏的套路你知道吗？ H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- canvas刮刮乐游戏等
裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...
- canvas 写一个刮刮乐抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas之刮刮乐
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- canvas 实现刮刮乐
在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...
随机推荐
- [转]Python学习资料和教程pdf
开发工具: Python语言集成开发环境 Wingware WingIDE Professional v3.2.12 Python语言集成开发环境 Wingware WingIDE Professio ...
- java的四种取整方法
java 中取整操作提供了四种方法:分别是: public static double ceil(double a)//向上取整 public static double floor(double ...
- udp通信的原理---makefile文件
由于UDP通信不需要事先建立连接,因此不需要TCP中的connect函数. 服务器端的步骤如下: 1. socket: 建立一个socket 2. bind: 将这个soc ...
- jQuery数组处理汇总
jQuery数组处理汇总 有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下 $.each(array, [callback])遍历,很常用 1 2 3 4 5 6 7 8 ...
- Solr Zookeeper ACL权限配置
首先注意:在配置ACL的时候,请关闭solr运行实例!!否则可能对集群造成不可恢复的损坏 开始: 1.修改solr.xml,在solrCloud节点添加,告诉solr要使用的provider: < ...
- Linux云服务器安装tomcat
安装tomcat需要安装JDK 1.上传 把下载好的tomcat压缩包(apache-tomcat-7.0.tar.gz)和jdk(jdk-7u76-linux-x64.tar.gz)压缩包上传到/u ...
- PowerDesigner 建模
File—New Model—Physical Data Model—Physical Diagram—Model name设置为test,DBMS属性设置为Microsoft SQL Server ...
- 校验两次密码一致的js代码
function checkpasswd(){ var passwd = document.getElementByIdx_x_x_xx_x('passwd').value; var repasswd ...
- git 安装与配置
Git服务器搭建 1. 环境部署 系统环境:服务器端:CentOS 6.5 ,ip:192.168.56.100 Master 客户端:CentOS 6.5 ,ip:192.168.56.101 Sl ...
- module中build.gradle文件参数含义
主要是module的build.gradle,截图如下: 01行:apply plugin: 'com.android.application' 表示该module是这个应用程序的module ...