移动端开心刮刮乐HTML5特效

最新推荐文章于 2025-05-05 10:33:31 发布
最新推荐文章于 2025-05-05 10:33:31 发布
阅读量908 收藏 13
点赞数 20
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147336820
版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端开心刮刮乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation;
        }
        
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #FFD700;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            padding: 15px;
        }
        
        .container {
            position: relative;
            width: 100%;
            max-width: 400px;
            height: 200px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .prize {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #FF416C, #FF4B2B);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            font-weight: bold;
            z-index: 1;
        }
        
        .scratch-area {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #888;
            z-index: 2;
            cursor: url('data:image/png;base64,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'), auto;
        }
        
        .result {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 3;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #FFD700;
            font-weight: bold;
            text-align: center;
        }
        
        .result h2 {
            font-size: 28px;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .result p {
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .btn-restart {
            padding: 8px 20px;
            background: #FFD700;
            color: #FF4B2B;
            border: none;
            border-radius: 20px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .credit {
            margin-top: 20px;
            color: #333;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 style="color: #FF4B2B; margin-bottom: 20px;">开心刮刮乐</h1>
    
    <div class="container">
        <div class="prize">刮开涂层查看奖品</div>
        <canvas class="scratch-area" id="scratchCanvas"></canvas>
        <div class="result" id="result">
            <h2 id="prizeText">恭喜您!</h2>
            <p id="prizeDesc">获得一等奖!</p>
            <button class="btn-restart" οnclick="restartScratch()">再玩一次</button>
        </div>
    </div>
    
    <div class="credit">游戏提供：www.5cq.website</div>

    <script>
        // 奖品配置
        const prizes = [
            { name: "一等奖", desc: "获得100元现金红包!", color: "#FF0000", bg: "#FFD700", chance: 5 },
            { name: "二等奖", desc: "获得50元优惠券!", color: "#FF4500", bg: "#FFA500", chance: 15 },
            { name: "三等奖", desc: "获得20元优惠券!", color: "#4169E1", bg: "#87CEEB", chance: 30 },
            { name: "参与奖", desc: "谢谢参与!", color: "#2E8B57", bg: "#98FB98", chance: 50 }
        ];
        
        // 初始化变量
        const canvas = document.getElementById('scratchCanvas');
        const ctx = canvas.getContext('2d');
        const resultDiv = document.getElementById('result');
        const prizeText = document.getElementById('prizeText');
        const prizeDesc = document.getElementById('prizeDesc');
        
        let isDrawing = false;
        let currentPrize = null;
        
        // 设置画布大小
        function resizeCanvas() {
            const container = document.querySelector('.container');
            canvas.width = container.offsetWidth;
            canvas.height = container.offsetHeight;
            
            // 初始化刮刮卡涂层
            initScratchLayer();
        }
        
        // 初始化刮刮卡涂层
        function initScratchLayer() {
            ctx.fillStyle = '#888';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 添加纹理
            ctx.fillStyle = '#999';
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 3 + 1;
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2);
                ctx.fill();
            }
            
            // 添加文字
            ctx.fillStyle = '#666';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('刮开此处查看奖品', canvas.width / 2, canvas.height / 2);
        }
        
        // 随机选择奖品
        function selectPrize() {
            const totalChance = prizes.reduce((sum, prize) => sum + prize.chance, 0);
            let random = Math.random() * totalChance;
            let accumulated = 0;
            
            for (const prize of prizes) {
                accumulated += prize.chance;
                if (random <= accumulated) {
                    return prize;
                }
            }
            
            return prizes[prizes.length - 1]; // 默认返回最后一个
        }
        
        // 开始刮卡
        function startScratching(e) {
            isDrawing = true;
            
            // 第一次触摸时确定奖品
            if (!currentPrize) {
                currentPrize = selectPrize();
                prizeText.textContent = currentPrize.name;
                prizeText.style.color = currentPrize.color;
                prizeDesc.textContent = currentPrize.desc;
            }
            
            draw(e);
        }
        
        // 结束刮卡
        function endScratching() {
            isDrawing = false;
            ctx.beginPath();
            
            // 检查刮开面积是否超过50%
            checkScratchedArea();
        }
        
        // 绘制刮痕
        function draw(e) {
            if (!isDrawing) return;
            
            // 获取触摸位置
            let x, y;
            if (e.type.includes('touch')) {
                const rect = canvas.getBoundingClientRect();
                x = e.touches[0].clientX - rect.left;
                y = e.touches[0].clientY - rect.top;
            } else {
                x = e.offsetX;
                y = e.offsetY;
            }
            
            // 绘制圆形擦除区域
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, Math.PI * 2);
            ctx.fill();
            
            // 检查刮开面积
            checkScratchedArea();
        }
        
        // 检查刮开面积
        function checkScratchedArea() {
            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const pixels = imageData.data;
            let transparentPixels = 0;
            
            // 计算透明像素数量
            for (let i = 3; i < pixels.length; i += 4) {
                if (pixels[i] === 0) {
                    transparentPixels++;
                }
            }
            
            // 计算透明像素比例
            const totalPixels = canvas.width * canvas.height;
            const ratio = transparentPixels / totalPixels;
            
            // 如果刮开面积超过50%，显示结果
            if (ratio > 0.5) {
                showResult();
            }
        }
        
        // 显示结果
        function showResult() {
            resultDiv.style.display = 'flex';
            resultDiv.style.backgroundColor = currentPrize.bg;
        }
        
        // 重新开始
        function restartScratch() {
            currentPrize = null;
            resultDiv.style.display = 'none';
            initScratchLayer();
        }
        
        // 事件监听
        canvas.addEventListener('mousedown', startScratching);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', endScratching);
        canvas.addEventListener('mouseleave', endScratching);
        
        canvas.addEventListener('touchstart', startScratching);
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', endScratching);
        
        window.addEventListener('resize', resizeCanvas);
        
        // 初始化
        resizeCanvas();
    </script>
</body>
</html>

zichenblog
关注
html5中canvas画布实现手机端和移动端的刮刮乐效果
wu_niang的博客
02-19 5743
用html5中的canvas实现刮刮乐的效果 使用html+css实现背景的样式 使用clearRect()方法实现挂去的作用 手机端使用addEventListener（）监听 手机端滑动事件touchmove 实现的效果图此图背景是来自网络 html部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮
html5 刮刮乐 源码,HTML5 canvas实现刮刮乐功能
weixin_33711871的博客
06-16 1395
最近比较闲，除了在群里给大家交流交流，就没啥学习重心。看了论坛里的各种帖子，各种问题满天飞，这里我就整理了2个h5 canvas的demo，分享给大家！使用html5的canvas实现刮刮乐功能舍不得买2块钱的刮刮乐，就只能写个类似的功能过过彩票瘾了！布局background-color:lightskyblue;border-radius:5px;float:left;">text-ali...
刮刮乐在移动端的效果（react项目中）
wangweiruning的博客
01-15 1070
动画效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
用HTML5的＜canvas＞元素实现刮刮乐游戏
cnds123的专栏
03-01 1466
用HTML5的元素实现刮刮乐，示例从简单到复杂。
html5刮刮乐手机,手机刮刮乐HTML5代码
weixin_29743937的博客
06-16 173
刮刮乐window.onload = function() {init();}CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius,startAngle, endAngle, counterclockwise){var distance = function(x0,y0,x1,y1){var dis = Math.sqrt(...
刮刮乐html5效果擦除,使用HTML5实现刮刮卡效果
weixin_33594195的博客
06-03 505
我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。HTML我们只需要在页面中加入canvas标签元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，运行在支持HTML5的现代浏览器上。Javascript首先...
没啥用的HTML5实现刮刮乐效果（巩固下基础吧）
weixin_44009656的博客
05-01 2236
通过 HTML5 和 JavaScript 完成了一个简易的刮刮卡项目，加强对于前端的掌握。
刮刮乐html5效果,HTML5 简单实现刮刮乐效果
weixin_39670267的博客
06-09 397
doctype html>script>JS刮刮乐title>.box{position:relative;width:200px;height:200px;background:url("img/gao1.jpg") no-repeat;background-size:100% 100%;text-align:center;line-height:200px;}#myCanva...
移动端-刮刮乐的实现方式
魔都子沐的博客
03-23 899
原创：转载请备明链接 程序员有一种惯性思维，就是看见一些会动的东西（带点科技含量的，猫啊，狗啊就算了），总要先想一遍，这玩意用代码是怎么控制的。比如电梯，路边的霓虹灯，遥控器，小孩子的玩具等，都统统被程序员“意淫”过。 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐，下面就介绍一种刮刮乐的移动端实现方式！用到canvas 1、用HTML 5 can
移动端开心刮刮乐HTML5插件.rar
10-02
移动端开发中的HTML5技术在近年来已经变得非常流行，尤其在创建互动式的用户体验方面，如“开心刮刮乐”这样的小游戏。HTML5插件是开发者常用的一种工具，它们能够为网页添加丰富的功能，提升用户交互性。这个...
手机移动端H5刮刮乐刮奖插件
11-05
【手机移动端H5刮刮乐刮奖插件】是一种基于HTML5技术的互动抽奖应用，主要应用于手机浏览器或移动端应用程序中。H5技术是HTML5的简称，它是一种超文本标记语言，是网页制作的标准之一，尤其在移动互联网领域得到了...
移动端H5刮刮乐插件低中奖概率特效.zip
03-22
综上所述，移动端H5刮刮乐插件的开发涉及到了前端技术的多个方面，包括HTML5布局、CSS3动画、jQuery事件处理和DOM操作，以及概率算法的应用。通过合理的设计和实现，可以创建出既有趣又具有吸引力的在线刮刮乐体验。
移动端刮刮乐的实现方式（js+HTML5）
12-04
1、用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路： （1）首先需要一个盒子定位，确定刮刮乐区域想要放在哪里 （2）定位盒子里有个放内容的盒子，也就是放奖品的 （3）用一个画布(canvas)把上面的...
CSS基础_@拉钩教育【笔记】
m0_65273147的博客
04-30 529
划重点：RGB颜色6位16进制，每2位分别控制红/绿/蓝,例如:#00ff00 绿色#ff0000 红色#ff00ff 紫色 #红、蓝都参一点。
全面了解CSS语法 ! ! !
2301_76849350的博客
04-30 1276
CSS（层叠样式表）是网页设计的灵魂之一，它赋予了网页活力与美感。无论是为一个简单的个人博客增添色彩，还是为复杂的企业网站设计布局，CSS都是不可或缺的工具。那么，CSS语法到底是什么样的呢？它背后有哪些秘诀值得我们掌握？本文将深入浅出地为你解开CSS语法的所有疑惑，带你一步一步探索如何用CSS打磨你的网站。
深入理解CSS盒子模型
最新发布
2403_89524622的博客
05-05 644
1.全局设置。
普通 html 项目也可以支持 scss_sass
坚持，努力，奋斗不止
05-01 543
自动监听编译scss。
前端八股 CSS 2 选择器
vain_soloist的博客
05-02 277
原始方法。
CSS布局
yjs20135869的博客
05-03 1079
CSS布局技术帮助我们精确控制网页中元素的位置和排列方式。常规文档流：最基础的布局方式。浮动布局：主要用于排版，但需要一些技巧来清除浮动。定位布局：通过position控制元素的精确位置。Flexbox布局：一维布局模型，简单且灵活。Grid布局：二维布局模型，适合复杂的页面结构。多列布局：适用于文本内容的分列显示。通过合理选择不同的布局方式和工具，我们可以创建各种响应式、灵活且美观的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值