简易刮刮乐源码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>demo</title> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> *{             padding: 0;             margin: 0;             list-style: none;          }          body{             background: #df412b;             position: relative;          }         .banner1{             display: block;             width: 100%;             height: auto;             overflow: hidden;            visibility: hidden;          }         .ggl{             position: relative;             width: 85.6%;             height: 90px;             margin: -5px auto;             background: url(img/ggl.png) no-repeat center center;             background-size: 100% 100%;          }          .canvas{            position:absolute;            top:2px;            left:2.5%;            width:95%;            height:82px;            line-height:82px;            text-align:center;            z-index: 2;

}         .info{            position:absolute;            top:2px;            left:2.5%;            width:95%;            height:82px;            text-align:center;         }         .info span{            display: block;            font-size: 18px;         }         #prompt{            line-height: 40px;         }         .btn{            position: relative;            width: 50%;            height: 35px;            line-height: 35px;            background: #df412b;            color: #fff;            border-radius: 5px;            margin: 0 auto;            z-index: 1;         }         .guize{            display: block;            width: 85.6%;            height: auto;            margin: 5% auto 10% auto;            border-radius: 5px;         }         .num{            width: 100%;            height: 30px;            line-height: 30px;            text-align: center;            font-size:14px;            margin-top: 5%;         }         #ok, #no{display: none;}         .pop{            position: fixed;            left: 0;            top: 0;            z-index: 3;            width: 100%;            height: 100%;            background: rgba(0,0,0,0.6);            display: none;         }         .pop img{            width: 100%;            height: auto;            overflow: hidden;            margin: 15% auto;         }       </style> </head> <body> <img src="img/banner1.png" class="banner1"/> <div class="ggl" id="top"> <div class="info" id="prize"> <span id="prompt"></span> <span class="btn" id="ok">领取奖品</span> <span class="btn" id="no">再来一次</span> </div> <canvas id="c1" class="canvas"></canvas> </div> <div class="num"> 您还有<span class="num1"></span>次刮卡机会 </div> <!--<img src="img/guize.png" class="guize" />-->

<!-- 遮罩层1抽奖次数已经用完--> <div class="pop pop1"> <img src="img/pop1.png" /> </div> <div class="pop pop2"> <img src="img/pop2.png" id="pop2" /> </div> <script> //控制刮卡次数 var t = 1;          //初始化所有数据并且随机产生奖品 var initialize = function () {            //剩余刮卡次数 $(‘.num1‘).html(4-t);            //随机数 function getRandomNum(lbound, ubound) {               return (Math.floor(Math.random() * (ubound - lbound)) + lbound);            }            var r = getRandomNum(1,100);            var btn = document.getElementsByClassName("btn");            for(var i=0; i<btn.length; i++){               btn[i].style.zIndex = ‘1‘;            }            document.getElementById("no").style.display = "none";            document.getElementById("ok").style.display = "none";

//初始化涂抹面积 isOk = 0;

if(r<t*33){               document.getElementById("prompt").innerHTML="恭喜您,中奖了!" var ok =document.getElementById("ok");               ok.style.display = "block";               //点击领取奖品 ok.onclick = function () {// window.location.href="prize.html" alert("逗你玩,别当真哦~");               };            }else{               document.getElementById("prompt").innerHTML="很遗憾,未中奖!" document.getElementById("no").style.display = "block";            }         };

var c1;             //画布 var ctx;         //画笔 var ismousedown;   //标志用户是否按下鼠标或开始触摸 var isOk=0;          //标志用户是否已经刮开了一半以上 var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是为了不同分辨率上配合@media自动调节刮的宽度

 /* 页面加载后开始初始化画布 */ window.onload = function(){

initialize();            c1 = document.getElementById("c1");

//这里很关键,canvas自带两个属性width、height,我理解为画布的分辨率,跟style中的width、height意义不同。 //最好设置成跟画布在页面中的实际大小一样 //不然canvas中的坐标跟鼠标的坐标无法匹配 c1.width=c1.clientWidth;            c1.height=c1.clientHeight;            ctx = c1.getContext("2d");

//PC端的处理 c1.addEventListener("mousemove",eventMove,false);            c1.addEventListener("mousedown",eventDown,false);            c1.addEventListener("mouseup",eventUp,false);

//移动端的处理 c1.addEventListener(‘touchstart‘, eventDown,false);             c1.addEventListener(‘touchend‘, eventUp,false);             c1.addEventListener(‘touchmove‘, eventMove,false);

//初始化 initCanvas();         }

//初始化画布,画灰色的矩形铺满 function initCanvas(){            //网上的做法是给canvas设置一张背景图片,我这里的做法是直接在canvas下面另外放了个div。 //c1.style.backgroundImage="url(中奖图片.jpg)"; ctx.globalCompositeOperation = "source-over";            ctx.fillStyle = ‘#aaaaaa‘;            ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);            ctx.fill();

ctx.font = "Bold 30px Arial";            ctx.textAlign = "center";            ctx.fillStyle = "#999999";            ctx.fillText("刮刮乐",c1.width/2,50);

//把这个属性设为这个就可以做出圆形橡皮擦的效果 //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法 ctx.globalCompositeOperation = ‘destination-out‘;         }

//鼠标按下 和 触摸开始 function eventDown(e){            e.preventDefault();            ismousedown=true;         }

//鼠标抬起 和 触摸结束 function eventUp(e){            e.preventDefault();

//得到canvas的全部数据 var a = ctx.getImageData(0,0,c1.width,c1.height);            console.log(a.data);            console.log(a.data.length);            var j=0;            for(var i=3;i<a.data.length;i+=4){                  if(a.data[i]==0)j++;            }

//当被刮开的区域等于一半时,则可以开始处理结果 if(j>=a.data.length/8){               isOk = 1;            }            ismousedown=false;         }

//鼠标移动 和 触摸移动 function eventMove(e){             e.preventDefault();            if(ismousedown) {                if(e.changedTouches){                   e=e.changedTouches[e.changedTouches.length-1];                }            var topY = document.getElementById("top").offsetTop;            var oX = c1.offsetLeft,                oY = c1.offsetTop+topY;

var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,               y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

//画360度的弧线,就是一个圆,因为设置了ctx.globalCompositeOperation = ‘destination-out‘; //画出来是透明的 ctx.beginPath();                ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);

//下面3行代码是为了修复部分手机浏览器不支持destination-out //我也不是很清楚这样做的原理是什么 c1.style.display = ‘none‘;                c1.offsetHeight;                c1.style.display = ‘inherit‘; 

ctx.fill();            }

if(isOk){               var btn = document.getElementsByClassName("btn");               for(var i=0; i<btn.length; i++){                  btn[i].style.zIndex = ‘3‘;               }               document.getElementsByClassName("btn")[0].style.zIndex="3";            }         }

//没有中奖再来一次 $("#no").click(function() {            if(t>3){               //因该弹出遮罩层提示您的次数已经用完了 $(‘.pop1‘).show();               $(‘.pop1 img‘).click(function(){                  $(‘.pop1‘).hide();               })            }else{               t++;               //初始化按钮 document.getElementById("no").style.display = "none";               document.getElementById("ok").style.display = "none";               window.onload();               initCanvas();

}         });

</script>

</body>

</html>
时间: 2024-10-31 19:47:32

简易刮刮乐源码的相关文章

清晰易懂TCP通信原理解析(附demo、简易TCP通信库源码、解决沾包问题等)

目录 说明 TCP与UDP通信的特点 TCP中的沾包现象 自定义应用层协议 TCPLibrary通信库介绍 Demo演示 未完成功能 源码下载 说明 我前面博客中有多篇文章讲到了.NET中的网络编程,与TCP和UDP相关的有: 1.http://www.cnblogs.com/xiaozhi_5638/p/3167794.html 2.http://www.cnblogs.com/xiaozhi_5638/p/3169641.html 3.http://www.cnblogs.com/xiaoz

简易计算器c语言源码,

本人新学, 用的都是最基本的语句, 程序功能不完善, 有以下问题, 1.大数据无法计算, 2.较大整型数据输出为浮点型,(因为是老师布置的作业,有要求含实数的算术计算输出要含小数.) 3.无法用()提升运算优先级, 欢迎提出改进意见 代码附上: void fun1()//算术运算函数{ char a[20][30],b[20]; double c[20],s; int i,j,k,flag; system("cls");// printf("输入算术式\n格式如:31+42*

16Aspx.com源码2014年7月详细

        Web电子商务网(三层)V2.0源码 2014-07-31   [VS2010] 源码介绍: Web电子商务网(三层)V2.0源码 源码描述: 一.源码特点     采用三层架构开发,购物车功能 二.功能介绍     前台集成了产品在线展示,用户注册.在线调查.在线投稿     后台有类别管理\图书管理\订单管理\会员管理\配送范围管理\邮件列表\广告管理\友情链接管理等     后台添加图书时自动生成缩略图和文字水印     主要参考了petshop的设计架构.使用了Asp.n

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

Tomcat源码解读:我们发起的HTTP请求如何到达Servlet的

在上一节中,了解了Tomcat服务器启动的整个过程,现在来了解一下Tomcat如何接收到HTTP请求,并将请求送达至Servlet,Servlet处理后,响应信息又是如何返回给浏览器的呢?这两个问题是接下来要研究的课题,本节先研究第一个问题. 了解一点点网络知识的人,都会知道TCP连接通信是基于Socket的,上一节也有提到这点.通过上一节的说明,可以了解到Tomcat服务器在内部已经使用Endpoint类封装了Socket. 本篇会包含大量的源码解读说,由于篇幅原因,就将源码折叠起来,如果想了

cocos2d-x 手游源码站

尊重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/37829061 1.魔幻方块 链接:魔幻方块源码 关键词:魔幻方块源码 源代码 Cocos2d-x2.0 游戏源码 益智 休闲 游戏 游戏类型:休闲益智 游戏使用引擎:Cocos2d-x V2.0 代码平台:Windows VS2012 版权说明:该游戏由本人开发,买家购买后可任意使用代码(但不能转卖.不能使用相关资源文件用于商业用途). 游戏版本:V

安卓开发之刮刮乐实例教程

刮奖在生活中常常见到,网上现在也有各种各样的抽奖活动,下面我们就要实现一个刮刮乐程序,可以完美满足 大家的虚荣心,哈哈,下面就开始吧,100%中奖的喔! 下面先来看看效果图: 让我们来看看它的布局: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <RelativeLayout      android:layout_width="match_parent"      android:layout_heigh

Android涂鸦技术及刮刮乐示例分析

概述: 很早之前就想研究一下Android中的涂鸦,其实也说不上是研究了,毕竟都是一些相对比较简单的知识点.下面就对基于画布(Canvas)和触摸事件(onTouchEvent)来实现涂鸦和刮刮乐. 参考: http://blog.csdn.net/lmj623565791/article/details/40162163 此人的博客的确很好,想学习的同学也可以去参考一下这个大牛的其他博客. http://blog.csdn.net/t12x3456/article/details/104329

20行js代码制作网页刮刮乐

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的为了效果加了些CSS样式 CSS部分 <style type=&qu