微信小程序-欢乐夹娃娃

qiaohhgz 2020-11-18 17:08:56 ⋅ 715 阅读

前言

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

一、效果图

二、项目结构

三、运行流程

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

四、关键代码

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

// 点击屏幕开始
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 + "'",
            duration3000,
            masktrue,
        })
    }else{
        wx.showToast({
            icon"none",
            title"哎呀! 什么也没有抓到。",
            duration3000,
            masktrue,
        })
    }
};

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

// 更新动画
var currentTime = new Date().getTime();
// 上一次的时间
var lastTime = currentTime;
var update = function () {
    // 当前时间
    currentTime = new Date().getTime();

    // 计算流逝的时间
    var time = currentTime - lastTime;

    // 绘制背景
    context.drawImage(bgImg, 00, w, h);

    // 绘制爪子
    clip.draw(context);
    clip.update(time);

    // 绘制展台
    booth.draw(context);
    booth.update(time);

    // 绘制顶部海报
    context.drawImage(headerImg, 00, w, headerH);

    // 绘图画布
    context.draw();

    // 记录上次的时间
    lastTime = currentTime;
};

爪子的绘制

Clip.prototype.draw = function (context{

    // 线条
    context.save();
    context.drawImage(lineImg, this.line.left, 0this.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, 00);
    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();
    }
};

五、完整代码 「听说,打赏我的人最后都找到了真爱。」

六、关注我们

IT实战联盟是集产品、UI设计、前后端、架构、大数据和AI人工智能等为一体的实战交流服务平台!联盟嘉宾都为各互联网公司项目的核心成员,联盟主旨是“让实战更简单”,欢迎来撩~~~

我们的网站: http://blog.100boot.cn


全部评论: 0

    我有话说:

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序 - iconfont 图标字体

    你还在使用图片作为程序的图标?大猪告诉大家如何在程序上使用iconfont字体图标

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取

    程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序电商实战-商品详情(上)

    先看一下今天要实现的程序商品详情页吧!

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序:最新登录授权并获取openid等信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,程序游戏的体验版、开发版调用 wx.getUserInfo 接口,将