JavaScript 刮刮乐

效果图

思路

1、设置所需要的样式和排版

2、通过set()得到一个不重复的52个元素的数组。

3、声明一个包含各种奖项的数内容数组。

4、封装函数，由于一共是10行，前面3行都是8列，后面第4行开始逐渐减1，所以需要用到两个循环。

5、声明一个变量来计数，利用九九乘法表的思路来实现，外层循环代表行，每一次创建一个tr，然后计数器++

6、内层循环代表列，每一次没别创建一个td，添加进行里。

7、当计数器==3时，表示前面3行已经完成，需要添加进总的表格里，并要开始执行第二个循环。

8、第二个循环和第一个循环类似，只是我们需要实现递减，所以只需要更改循环条件即可，最后拼接进表格

9、注意，一定是拼接，不是赋值，不然会把前面的覆盖。

10、然后给每个tr设置弹性盒子，居中，刮刮乐的号码池就出现。

11、获取所有的td，然后通过循环把包含52个元素的数组，一次把值赋给每一个td

12、在每一个tr的后面拼接一个div，用来装每一行中奖的奖项，这时候就需要用到计时器。

13、由于数组是下标0开始，所有每一次计时++后，在数组元素赋值给div是，需要访问下标-1；

14、通过定位添加一个中奖号码框，直接赋值随机数（1-99）.

15、在html通过canvas设置画布蒙板

16、然后给整个画布大小的区域填充颜色。

17、绑定事件，利用清除得到当前鼠标相对于事件源的位置，逐一清除。

HTML

 <div id="game"><h1>中国福利彩票 好运十倍</h1><table id="prize"></table><div id="lucky"><h3>中奖号码</h3><p></p></div><canvas width = "520" height = "540" id = "canvas"  ></canvas></div>

CSS

 #game {width: 600px;height: 680px;border: 1px solid;margin: 20px auto;background-image: url(./1.jpg);background-position: 100% 100%;position: relative;}h1,h3 {text-align: center;color: rgb(230, 245, 23);}table {width: 448px;height: 500px;margin-left: 41px;}tr {display: flex;justify-content: center;}/* table>tr:nth-child(3){margin-left: 41px;} */td {width: 50px;height: 50px;border: 1px solid;text-align: center;line-height: 50px;font-size: 25px;background-color: rgba(242, 245, 70, 0.555);font-family: "num";}
@font-face{font-family: "num";src: url(./包图小白体.ttf);
}#lucky {height: 100px;width: 100px;border: 1px solid;position: absolute;bottom: 60px;left: 60px;background-color: rgba(240, 114, 114, 0.527);}p {font-size: 25px;text-align: center;font-family: "num";}.money{line-height: 50px;text-align: center;font-size: 25px;color: gold;font-weight: bold;font-family: "num";}#canvas{position: absolute;  top: 86px;left: 42px;}

JS

let money=["￥20","￥20","￥30","￥80","￥100","￥150","￥200","￥2W","￥5W","￥30W"];
/* 随机号码 */
let i = new Set();
while (i.size < 52) {i.add(random(1, 99));
}
let arr = [...i]; /* 渲染表格 */
function render(){let cont=0;for(let i=1;i<=3;i++){cont++;let row = document.createElement(`tr`)for (let j = 1; j <= 8; j++){let columns = document.createElement(`td`);row.appendChild(columns);}row.innerHTML+=`<div class=money>${money[cont-1]}</div>`;prize.appendChild(row)}if(cont==3){for(let i=1;i<=7;i++){cont++;let row = document.createElement(`tr`)for (let j = 7; j >=i; j--){let columns = document.createElement(`td`);row.appendChild(columns);}row.innerHTML+=`<div  class=money>${money[cont-1]}</div>`;prize.appendChild(row)}}
}
render()/* 获得数字 */
let tds=document.querySelectorAll('td');
let p=document.querySelector('p');
for(let i=0;i<arr.length;i++){
tds[i].innerText=arr[i];
}
p.innerText=random(1, 99);/* 画布 */
let pen = canvas.getContext("2d");   // 创建上下文 context 对象
pen.fillStyle='rgb(69, 71, 71)';
pen.fillRect(0, 0, 520, 540);
/* 鼠标按下 */
canvas.onmousedown = function(event) { //鼠标按下事件  document.onmousemove = function(event) { //鼠标移动事件，因为需要先按下在移动let X = event.offsetX-20; //获取当前鼠标相对于事件源的位置  let Y = event.offsetY-20;pen.clearRect(X,Y,40,40);}
}
document.onmouseup = function() { //鼠标松开事件，当松开鼠标就直接清空移动事件this.onmousemove = null;
}

JavaScript 刮刮乐相关推荐

刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
微信公众平台开发（55）刮刮乐
微信公众平台开发微信公众平台开发模式企业微信公众平台刮刮乐作者:方倍工作室地址:http://www.cnblogs.com/txw1958/p/weixin-55-ScratchTic ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
js 实现刮刮乐卡片效果
需要用到的知识点 1.canvas globalCompositeOperation : 设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上 ,这个属性是重点 2.canvas getIm ...
Canvas 实现刮刮乐 js实现刮刮乐
Canvas 实现刮刮乐 js实现刮刮乐 **思路: (1)首先需要一个盒子定位,确定刮刮乐区域想要放在哪里 (2)定位盒子里有个放内容的盒子,也就是放奖品的 (3)用一个画布(canvas)把上面的 ...
移动端-刮刮乐的实现方式
原创:转载请备明链接程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被 ...
完美实现刮刮乐抽奖（该有的都有），html+css+jquery实现
1.项目目录源码下载 static (静态文件) css (样式) font (字体) image (图片) js (脚本代码,刮刮卡效果,中奖处理) picture (图片) awards.htm ...
Android涂鸦技术及刮刮乐示例分析
概述: 很早之前就想研究一下Android中的涂鸦,其实也说不上是研究了,毕竟都是一些相对比较简单的知识点.下面就对基于画布(Canvas)和触摸事件(onTouchEvent)来实现涂鸦和刮刮乐. ...
iOS 仿支付宝刮刮乐效果
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样. 实现思路, 其实很简单的三步: 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label 设置遮挡在外面的Imag ...

JavaScript 刮刮乐

HTML

CSS

JS

JavaScript 刮刮乐相关推荐

最新文章

热门文章