小伙用微信小程序的Canvas手撸了一个娃娃机

迈不过友情╰ 2022-12-22 08:48 147阅读 0赞

原文：[https://blog.100boot.cn/post/3067][https_blog.100boot.cn_post_3067]

## 前言 ##

夹娃娃营销活动大家应该都不陌生那如何用小程序实现呢？  
今天就带大家用canvas撸了一个全手工绘制的夹娃娃分享给大家。此处应有掌声 : )

### 一、效果图 ###

![8a4096180507792a0ddbe2ead914050a.png][]

### 二、项目结构 ###

![3138e514148ff8529497bb9308489b4a.png][]

### 三、运行流程 ###

*  获取所有奖品列表
 *  依次绘制背景、爪子、展台、顶部海报
 *  点击任意区域出发开始夹娃娃
 *  请求后端获取得到的奖品，也可以为空（没有夹到）
 *  展示夹到的奖品

### 四、关键代码 ###

点击屏幕开始  
模拟后台返回数据

// 点击屏幕开始
    if (!isStart && clip) {
        isStart = true;
        var prizes = this.data.prizes;
        // 模拟后台返回数据
        wx.showLoading({
            title: '请求中',
        });
        setTimeout(function () {
            wx.hideLoading();
            // 随机一个奖品
            var rIndex = utils.getRandom(prizes.length * 2);
            var prize = rIndex > prizes.length - 1 ? null : prizes[rIndex];
    
            // 启动夹子
            clip.open(prize);
        }, 1000);
    }

当爪子动画完成回到顶部后回调函数

// 当爪子动画完成回到顶部后回调函数
    clip.onMoveUp = function () {
        isStart = false;
        // 获取夹到的物品, 可能为空
        var prize = clip.getPrize();
        // 显示夹到的物品, 可能为空
        if (prize) {
            wx.showToast({
                image: prize.img,
                title: "获得'" + prize.text + "'",
                duration: 3000,
                mask: true,
            })
        }else{
            wx.showToast({
                icon: "none",
                title: "哎呀! 什么也没有抓到。",
                duration: 3000,
                mask: true,
            })
        }
    };

计算流逝的时间和绘制每个模块

// 更新动画
    var currentTime = new Date().getTime();
    // 上一次的时间
    var lastTime = currentTime;
    var update = function () {
        // 当前时间
        currentTime = new Date().getTime();
    
        // 计算流逝的时间
        var time = currentTime - lastTime;
    
        // 绘制背景
        context.drawImage(bgImg, 0, 0, w, h);
    
        // 绘制爪子
        clip.draw(context);
        clip.update(time);
    
        // 绘制展台
        booth.draw(context);
        booth.update(time);
    
        // 绘制顶部海报
        context.drawImage(headerImg, 0, 0, w, headerH);
    
        // 绘图画布
        context.draw();
    
        // 记录上次的时间
        lastTime = currentTime;
    };

爪子的绘制

Clip.prototype.draw = function (context) {
    
        // 线条
        context.save();
        context.drawImage(lineImg, this.line.left, 0, this.line.w, this.line.h);
        context.restore();
    
        var theta = Math.PI * this.angle / 180;
        // left clip
        context.save();
        context.translate(this.lb.right, this.lb.top); // 以左边爪子的右上为圆心旋转
        context.rotate(theta);
        context.drawImage(clipLImg, -this.lb.w, 0);
        context.restore();
    
        // right clip
        context.save();
        context.translate(this.rb.left, this.rb.top); // 以右边爪子的左上为圆心旋转
        context.rotate(-theta);
        context.drawImage(clipRImg, 0, 0);
        context.restore();
    
        context.save();
        context.drawImage(screwImg, this.screw.left, this.screw.top);
        context.restore();
    
        // 显示被抓的娃娃
        if (this.showPrize && this.prize && this.prize.img) {
            context.save();
            context.drawImage(this.prize.img, this.lb.left, this.lb.y, this.prize.w, this.prize.h);
            context.restore();
        }
    };

[https_blog.100boot.cn_post_3067]: https://blog.100boot.cn/post/3067
[8a4096180507792a0ddbe2ead914050a.png]: /images/20221120/551f8475a0224f98b254d86fa1d097cd.png
[3138e514148ff8529497bb9308489b4a.png]: /images/20221120/b248baec15dc4219ac7e4d131366c99d.png