当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 大众学开发——59秒学习编写刮刮乐游戏

大众学开发——59秒学习编写刮刮乐游戏

2020年03月15日  | 移动技术网IT编程  | 我要评论

前言

本视频通过59秒快速带大家了解js实现游戏刮刮乐的全过程，大家不妨可以动手尝试一下。如万一出现困难可以积极与我沟通，我将无偿提供技术支持及源代码。

效果预览

file

开始分析

  1. 创建canvas
  2. 设置图片
  3. 设置遮罩
  4. 插入文档
  5. 绑定鼠标移动事件
  6. 检查是否超出50%——移除遮罩

难点、api说明

  • 绘制灰色矩形
var context = canvas.getcontext('2d');
context.fillstyle = 'grey';
context.fillrect(0, 0, canvas.width, canvas.height)
  • 擦除canvas
let ctx = canvas.getcontext('2d');
ctx.globalcompositeoperation = "destination-out";
  • 绘制圆形file
ctx.arc(x, y, 20, 0, 2 * math.pi);
ctx.fill();

案例代码

    function createcanvas() {
        var canvasnode = document.createelement('canvas');
        canvasnode.width = 500;
        canvasnode.height = 500;
        return canvasnode;
    }

    function append(canvas) {
        var script = document.queryselector('script');
        document.body.insertbefore(canvas, script);
    }

    function setprize(canvas) {
        let randomnum =  math.ceil(math.random() * 7);
        canvas.style.backgroundimage = 'url(./imgs/' + randomnum + '.png)';
        canvas.style.backgroundsize = "100% 100%";
    }

    function mask(canvas) {
        var context = canvas.getcontext('2d');
        context.fillstyle = 'grey';
        context.fillrect(0, 0, canvas.width, canvas.height)
    }

    function checkclean(canvas) {
        var ctx = canvas.getcontext('2d');
        var cdata = ctx.getimagedata(0, 0, canvas.width, canvas.height).data;
        var count = 0;
        for (var i = 0; i < cdata.length; i += 4) {
            if (cdata[i] === 0) count++;
        }
        if (count > ((cdata.length / 4) * 0.5)) {
            canvas.onmousemove = null;
            ctx.clearrect(0, 0, canvas.width, canvas.height);
        }
    }

    function clean(canvas) {
        canvas.onmousedown = function() {
            canvas.onmousemove = function(e) {
                let x = e.pagex - canvas.offsetleft;
                let y = e.pagey - canvas.offsettop;
                let ctx = canvas.getcontext('2d');
                ctx.globalcompositeoperation = "destination-out";
                ctx.beginpath();
                ctx.arc(x, y, 20, 0, 2 * math.pi);
                ctx.fill();
                checkclean(canvas);

            }
        }
        canvas.onmouseup = function() {
            canvas.onmousemove = null;
        }
    }
        
    // 0:创建canvas
    // 1:放置图片
    // 2:设置遮罩
    // 3:加入到页面
    // 4:清除遮罩
    var canvas = createcanvas();
    setprize(canvas);
    append(canvas);
    mask(canvas);
    clean(canvas);

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网