微信小程序 - 仿南湖微科普小程序游戏环节
最近看到南湖微科普小程序游戏环节感觉还可以,于是模仿了下
<view class='current' animation="{{animation}}">
{{current.title}}
</view>
<view class='caozuo'>
<text bindtap="type1btn">可回收</text>
<text bindtap="type2btn">有害垃圾</text>
<text bindtap="type3btn">其他</text>
</view>
<view class='score'>分数:{{score}}</view>
.current{ width:100px;height:100px;border-radius:5px; margin:20px auto;text-align:center;line-height:100px;color:#fff;background:red; }
.caozuo{display: flex;justify-content:space-between;margin-top: 15px;font-size:14px;text-align: center;}
.caozuo text{text-align: center;flex:1;}
.score{ text-align:center;margin-top:20px;font-size:14px;color:red; }
Page({
data: {
current:{},
score:0,
arr:[
{
id:1,
title:"手机壳",
type:"1"
},
{
id:2,
title: "枯枝",
type: "3"
},
{
id:3,
title: "纸盒",
type: "1"
},
{
id:4,
title: "涂改溢瓶",
type:"2"
},
{
id:5,
title: "药水瓶",
type: "2"
},
{
id: 6,
title: "电视机",
type: "1"
},
{
id: 7,
title: "菜叶",
type: "3"
}
]
},
onReady: function () {
this.animation = wx.createAnimation()
},
onLoad: function (options) {
// type:1可回收 2 有害垃圾 3 其他垃圾
// 不能重复
var that = this;
that.newdata();
}, newdata(current,arr){
//每次操作过后数组更新一次
var that = this;
var current = that.data.current;
var arr = that.data.arr; var currentIndex = Math.floor(Math.random() * arr.length)
var newarr = arr.filter(function (currentvalue, index, array) {
return index != currentIndex
}) if (arr.length === 0 ){
wx.showToast({
title: '恭喜闯关成功',
})
return
} that.setData({
current: arr[currentIndex],
arr: newarr
}) },
scoreAdd() {
//分数添加
var that = this;
var score = that.data.score;
score += 2;
that.setData({
score: score
})
},
scoreReduce() {
//分数减去
var that = this;
var score = that.data.score;
score -= 1;
that.setData({
score: score
})
},
select(type){
//区分点击按钮
var that = this;
var current = that.data.current;
var arr = that.data.arr;
if (arr.length != 0) {
if (current.type === type) {
that.scale()
that.newdata();
that.scoreAdd()
} else {
that._toast()
that.scoreReduce()
}
} else {
wx.showToast({
title: '恭喜闯关成功',
})
}
},
type1btn() {
//可回收
var that = this;
that.select("1")
},
type2btn() {
//有害垃圾
var that = this;
that.select("2")
},
type3btn() {
//其他垃圾
var that = this;
that.select("3")
},
_toast(){
wx.showToast({
title: '不对应',
})
},
scale: function () {
this.animation.scale(0.6).step()
this.animation.scale(1).step()
this.setData({ animation: this.animation.export() })
}
})
微信小程序 - 仿南湖微科普小程序游戏环节的更多相关文章
- 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- 微信小程序--仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)
微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能 ...
- 微信小程序开发公测,小程序账号申请办法攻略
11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...
- 挑战App Store,微信通过“跳一跳”秀了一下“小程序”的肌肉
2017年即将结束的时候,微信放了一个大招.随着最新的微信v6.6.1版本更新,基于小程序的"小游戏"板块正式上线.微信上首发的这款"小游戏"叫"跳一 ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
- 微信小程序开发——前端如何区分小程序运行环境
前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...
- 微信小程序开发——打开另一个小程序
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... &quo ...
- 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序
微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 ...
- xampp安装和使用:windows和linux使用安装微擎小程序
1.官网下载xampp XAMPP:Apache+MySQL+PHP+PERL,适用于windows+linux+macos x+Solaris等多系统使用 官网地址:https://www.apac ...
随机推荐
- 【树状数组】【P3608】平衡的照片
传送门 Description FJ正在安排他的N头奶牛站成一排来拍照.(1<=N<=100,000)序列中的第i头奶牛的高度是h[i],且序列中所有的奶牛的身高都不同. 就像他的所有牛的 ...
- 【线段树】【P3740】 [HAOI2014]贴海报
传送门 Description Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙. 张贴规 ...
- Nginx的配置文件简介及在Nginx中配置基于不同ip的虚拟主机
Nginx的配置文件简介及在Nginx中配置基于不同ip的虚拟主机: #user nobody; worker_processes 1; #error_log logs/error.log; #err ...
- FreeRTOS - 调度器
原文地址:http://www.cnblogs.com/god-of-death/p/6942641.html 绝大多数情况下,调度器的配置如下: 下面的说明基于上面的调度器配置: 如果有更高优先级的 ...
- 面包旅行Android业务设计分析
面包旅行的业务设计不错,Android app也是清晰简洁又大方的样子,所以画了个业务脑图出来. 重要的几个业务特点分析如下: 1.账号绑定社交账号,方便社交推广 2.城市猎人活动,通过内容.时间.地 ...
- Java并发之同步原语
volatile: 定义:Java编程语言允许线程访问共享变量,为了确保共享变量内被准确和一致性地更新,线程应该确保通过排它锁单独获得这个变量.根据volatile的定义,volatile有锁的语义. ...
- How to solve “Device eth0 does not seem to be present, delaying initialization” error
Today, I encountered with a strange error after I cloned CentOS 6 guest machine in Oracle VirtualBox ...
- Sass 条件-循环语句
学习Sass中 @if...@else @for @while @each 一.条件判断 - @if @else 示例: @mixin blockOrHidden($boolean:true){ @i ...
- 阿里云maven仓库地址,速度提升100倍
参照:https://www.cnblogs.com/xxt19970908/p/6685777.html maven仓库用过的人都知道,国内有多么的悲催.还好有比较好用的镜像可以使用,尽快记录下来. ...
- 【TYVJ】1520 树的直径
[算法]树的直径 memset(a,0,sizeof(a)) #include<cstdio> #include<algorithm> #include<cstring& ...