Html5 Canvas 实现一个“刮刮乐”游戏


Posted in HTML / CSS onSeptember 05, 2019

之前公司项目有一个刮奖小游戏的需求,因此有了本文记录该“刮刮乐”游戏的实现过程。

话不多说,先上Demo 和 项目源码 .

Html5 Canvas 实现一个“刮刮乐”游戏 

2. 实现

我们创建一个 ScrapAward 类,通过传入 option 和调用其 restart() 方法实现重新开始。

(1)定义 option 参数及 ScrapAward 结构

 

class ScrapAward {
    constructor(userOption) {
        this.option = {
            canvasId: 'canvas', // canvas的id
            backgroundImageUrl: '', // 背景图url
            width: 320, // canvas宽度
            height: 160, // canvas高度
            backgroundSize: '100% 100%',
            coverImage: { // 覆盖图层背景图url
                url: '',
                width: 320,
                height: 160,
            },
            callback: () => {}, // 刮奖完成的回调函数
        };
        this.ctx = null;
        this.init(userOption); // 初始化
    }
    // 初始化方法
    init(userOption) {
    }
    // 重新开始也是一次初始化
    restart(userOption) {
        if (userOption) {
            this.init(userOption);
        } else {
            this.init({});
        }
    }
}

 

(2) init 初始化

首先合并用户的配置 userOption 和默认 option , 等背景图片加载完成后调用 fillCanvas() 方法绘制覆盖层的图片后设置 canvas 的背景图。

当上述行为完成后,我们便监听鼠标或者touch事件。刮奖这一行为其实是canvas对鼠标或者touch的移动路径进行绘画,只不过是将绘画的路径变成了透明,这种效果我们通过设置 ctx.globalCompositeOperation = 'destination-out'; 即可实现。

 

init(userOption) {
        // 合并用户配置
        if (Object.assign) {
            Object.assign(this.option, userOption);
        } else {
            extend(this.option, userOption, true);
        }
        // 定义一系列变量
        let that = this,
            img = (this.img = new Image()), //背景图片
            imgLoaded = false, //背景图是否加载完成
            canvas = (this.canvas = document.querySelector(`#${this.option.canvasId}`)),
            hastouch = 'ontouchstart' in window ? true : false,
            tapstart = hastouch ? 'touchstart' : 'mousedown',
            tapmove = hastouch ? 'touchmove' : 'mousemove',
            tapend = hastouch ? 'touchend' : 'mouseup',
            coverImg = (this.coverImg = new Image()),
            hasDone = false, // 是否刮奖完毕
            coverImgLoad = false;
        that.mousedown = false; //鼠标的mousedown事件或者touchmove事件是否开启
        // 移除事件监听,用于重新开始
        if (this.canvas) {
            this.canvas.removeEventListener(tapstart, eventDown);
            this.canvas.removeEventListener(tapend, eventUp);
            this.canvas.removeEventListener(tapmove, eventMove);
        }
        coverImg.src = this.option.coverImage.url;
        coverImg.crossOrigin = 'Anonymous'; // 解决一些跨域问题
        img.src = this.option.backgroundImageUrl;
        var w = (img.width = this.option.width),
            h = (img.height = this.option.height);
        this.canvasOffsetX = canvas.offsetLeft;
        this.canvasOffsetY = canvas.offsetTop;
        canvas.width = w;
        canvas.height = h;
        this.ctx = canvas.getContext('2d');
        let ctx = this.ctx;
        this.img.addEventListener('load', backgroundImageLoaded);
        this.option.coverImage.url && this.coverImg.addEventListener('load', coverImageLoaded);
        // 背景图片加载完成后
        function backgroundImageLoaded(e) {
            imgLoaded = true;
            fillCanvas();
            canvas.style.background = 'url(' + img.src + ') no-repeat';
            canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
        }
        // 覆?图片加载完成后
        function coverImageLoaded(e) {
            coverImgLoad = true;
            fillCanvas();
            canvas.style.background = 'url(' + img.src + ') no-repeat';
            canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
        }
        // 绘制canvas
        function fillCanvas() {
            if (that.option.coverImage.url && (!imgLoaded || !coverImgLoad)) return;
            if (!that.option.coverImage.url) {
                ctx.fillStyle = that.option.coverImage.color || 'gray';
                ctx.fillRect(0, 0, w, h);
            } else {
                ctx.drawImage(coverImg, 0, 0, that.option.coverImage.width, that.option.coverImage.height);
            }
            ctx.globalCompositeOperation = 'destination-out';
            canvas.addEventListener(tapstart, eventDown);
            canvas.addEventListener(tapend, eventUp);
            canvas.addEventListener(tapmove, eventMove);
        }
        // 点击开始事件
        function eventDown(e) {
            e.preventDefault();
            that.mousedown = true;
        }
        // 点击结束事件
        function eventUp(e) {
            e.preventDefault();
            that.mousedown = false;
        }
        // 刮奖事件
        function eventMove(e) {
            if (hasDone) return; // 刮奖结束则return
            let ctx = that.ctx;
            e.preventDefault();
            if (that.mousedown) {
                if (e.changedTouches) {
                    e = e.changedTouches[0];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
                    y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;

                ctx.beginPath();
                ctx.arc(x, y, 20, 0, Math.PI * 2);
                ctx.fill();
            }
        }
    }

 

(3)刮奖完毕的实现

上述代码实现刮奖的效果,但是一般的场景是用户刮奖的面积超过一半时,覆盖图层全部散开,此时为刮奖完成的状态。

如何知道刮奖的面积超过一半了呢? canvas 中的 ctx 对象提供了一个方法 getImageData() , 该方法可返回某个区域内每个像素点的数值的组成的数组,数组中4个元素表示一个像素点的rgba值。

因此我们可以判断 rgba 中的 a 值透明度,透明度小于 256 的一半( 128 )即可视为透明状态,计算透明 a 值的百分比.

判断 a 值百分比大于 50 , 则调用 ctx.clearRect(0, 0, w, h); 清除画布, 并执行成功回调 callback .

 

function eventMove(e) {
    if (hasDone) return; // 刮奖结束则return
    let ctx = that.ctx;
    e.preventDefault();
    if (that.mousedown) {
        if (e.changedTouches) {
            e = e.changedTouches[0];
        }
        var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
            y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;

        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fill();
    }
    handleFilledPercentage(getFilledPercentage());
}
// 计算已经刮过的区域占整个区域的百分比
function getFilledPercentage() {
    let imgData = that.ctx.getImageData(0, 0, w, h);
    // imgData.data是个数组,存储着指定区域每个像素点的信息,数组中4个元素表示一个像素点的rgba值
    let pixels = imgData.data;
    let transPixels = [];
    for (let i = 0; i < pixels.length; i += 4) {
        // 严格上来说,判断像素点是否透明需要判断该像素点的a值是否等于0,
        // 为了提高计算效率,这儿设置当a值小于128,也就是半透明状态时就可以了
        if (pixels[i + 3] < 128) {
            transPixels.push(pixels[i + 3]);
        }
    }
    return ((transPixels.length / (pixels.length / 4)) * 100).toFixed(2) + '%';
}
// 设置阈值,去除灰色涂层
function handleFilledPercentage(percentage) {
    percentage = percentage || 0;
    if (parseInt(percentage) > 50) {
        // 当像素点的个数超过  50% 时,清空画布,显示底图
        ctx.clearRect(0, 0, w, h);
        hasDone = true;
        that.option.callback();
    }
}

 

3. 使用

将代码引入 html 后,新建 new scraAward(option) 即可实现。页面结构如下:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>实现一个“刮刮乐”游戏</title>
        <style type="text/css">
            .demo {
                width: 320px;
                margin: 10px auto 20px auto;
                min-height: 300px;
            }
            .msg {
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-weight: bold;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="msg">
                刮刮下面图片看看什么效果哈哈哈,<a href="javascript:void(0)" id="try_again">再来一次</a>
            </div>
            <div class="demo">
                <canvas id="canvas"></canvas>
            </div>
        </div>
        <script src="./scrapAward-dev.js"></script>
        <script>
            window.onload = function() {
                let scraAward = new ScrapAward({
                    height: 570,
                    backgroundImageUrl: './suporka_home.jpg',
                    coverImage: {
                        url: './super.jpg',
                        // color: 'red',
                        width: 428,
                        height: 570,
                    },
                    callback: () => {
                        alert('刮奖结束');
                    },
                });
                document.getElementById('try_again').addEventListener('click', function(e) {
                    scraAward.restart();
                });
            };
        </script>
    </body>
</html>

总结

以上所述是小编给大家介绍的Html5 Canvas 实现一个“刮刮乐”游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 #HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 #HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python实现八大排序算法(1)
2017/09/14 Python
对numpy中轴与维度的理解
2018/04/18 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
QML实现钟表效果
2020/06/02 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
技能竞赛活动方案
2014/02/21 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
青奥会口号
2014/06/12 职场文书
建筑工地质量标语
2014/06/12 职场文书
2014年度考核工作总结
2014/12/24 职场文书
标准发言稿结尾
2019/07/18 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫