效果
前端
index.wxml
<view class="content" style="height:{{wh}}px;">
<movable-area style="height:{{wh}}px;width: 100%; overflow: hidden;">
<view class="main" style="height:{{wh}}px;">
<movable-view direction="all" class="waste" x="{{wleft}}" y="{{wtop}}" style="display:{{wstyle}}" damping='20'
bindtouchend='dragbindtouchend'>
<!--bindchange='dragbindchange' -->
<image src="https://card.doosuns.cn/saas/public/waste_sorting/images/1/{{wasteicon}}"></image>
</movable-view>
<view class="wastelist">
<view class="socre">得分:{{socre}}</view>
<view class='clear blank10'></view>
<view class="wastetype" wx:for="{{wastetypelist}}" wx:for-item="item" wx:for-index="index" data-id="{{item.id}}"
bindtap='doanswer'>
<view class="wasteclass" style="background:url({{item.icon}}) no-repeat;background-size:100% 100%">
<image src='https://card.doosuns.cn/saas/public/waste_sorting/images/bg.gif'></image>
</view>
</view>
</view>
</view>
<view class="mark" style="display:{{mstyle}}" bindtap='begingame'>
</view>
<view class="begin" bindtap='begingame' style="display:{{mstyle}};left:{{beginleft}}px">
<image src="https://card.doosuns.cn/saas/public/waste_sorting/images/begin.jpg"></image>
</view>
<audio src="{{src}}" id="myAudio" bindended="funended" binderror="funerror" bindtimeupdate="funtimeupdate"></audio>
</movable-area>
</view>
index.js
//index.js
//获取应用实例
var api = require('../../api.js');
const app = getApp()
Page({
data: {
windowWidth:0, //屏幕宽度
waste_Y:0, //放入垃圾桶的Y高度
/*初始垃圾位置*/
owleft: 0,
owtop: 100,
wleft:0,
wtop:100,
/*初始垃圾位置*/
/*初始答题位置*/
beginleft:0,
/*初始答题位置*/
wastetypelist:[], //累计类型列表
mstyle:'block',
wstyle:'none',
answer_id:0, //题目答案id
test_num:0, //测试个数
oknum:0, //答案正确数
socre:0, //测试得分
oks:'1037.wav', //答对时的声音
nos: '5969.wav', //答错时声音
},
onReady: function (e) {
this.audioCtx = wx.createAudioContext('myAudio');
},
onShow:function()
{
var that=this;
wx.getSystemInfo({
success: function(res) {
that.setData({
windowWidth: res.windowWidth,
wleft:(res.screenWidth-80)/2,
owleft: (res.screenWidth - 80) / 2,
beginleft: (res.screenWidth - 250) / 2,
wh:res.windowHeight,
waste_Y:res.windowHeight-160
})
},
})
},
onLoad: function () {
var that = this;
that.get_waste_type();
},
//拖动垃圾放入垃圾桶
dragbindtouchend: function (e) {
var that = this;
var _y = e.changedTouches["0"].clientY;
var _x = e.changedTouches["0"].clientX;
if (_y < that.data.waste_Y)
{
that.setData({
wleft: that.data.wleft,
wtop: that.data.wtop
})
}
else
{
var _index=1;
if(_x>0)
{
var _len = that.data.wastetypelist.length;//得到个数
var _w = that.data.windowWidth;
var _w_ = _w / _len;
_index = parseInt(_x/_w_);
if (_x % _w_>0)
{
_index++;
}
}
_index=_index==-1?1:_index;
_index = _index >= _len? _len:_index;
var _obj = that.data.wastetypelist[_index-1];
try
{
that.submitanswer(_obj.id);
}
catch(ex)
{
that.setData({
wtop: that.data.wleft,
wtop: that.data.wtop
})
}
}
},
//得到垃圾分类列表
get_waste_type:function()
{
var that=this;
app.request({
url: api.saas.get_catalog,
data: {
ctype: 0,
},
method: 'POST',
success: function (res) {
// console.log(res);
that.setData({
wastetypelist:res
})
},
complete: function () {
}
})
},
//提交答案
submitanswer:function(_id)
{
var that=this;
if (_id == that.data.answer_id) {
wx.showToast({
title: '正确:+10分',
image: '/images/ok.png'
})
that.setData({
socre: that.data.socre + 10,
});
that.audioCtx.setSrc(api.root.radio + that.data.oks);
that.audioCtx.play();
}
else {
wx.showToast({
title: '错误:-10分',
image: '/images/no.png'
})
that.setData({
socre: that.data.socre - 10
});
that.audioCtx.setSrc(api.root.radio + that.data.nos);
that.audioCtx.play();
}
that.get_test();
setTimeout(function(){
that.setData({
wleft: that.data.owleft,
wtop: that.data.owtop
})
},1500)
},
//点击垃圾桶提交答案
doanswer:function(e)
{
console.log(e);
var _x = e.detail.x;
var _y =e.detail.y;
var that=this;
that.setData({
wleft:_x-40,
wtop:_y
});
var _id = e.currentTarget.dataset.id
console.log(_id);
if(_id==that.data.answer_id)
{
wx.showToast({
title: '正确:+10分',
image: '/images/ok.png'
})
that.setData({
socre: that.data.socre+10,
});
that.audioCtx.setSrc(api.root.radio + that.data.oks);
that.audioCtx.play();
}
else
{
wx.showToast({
title: '错误:-10分',
image: '/images/no.png'
})
that.setData({
socre: that.data.socre - 10
});
that.audioCtx.setSrc(api.root.radio + that.data.nos);
that.audioCtx.play();
}
setTimeout(function () {
console.log('10秒以后');
that.setData({
wleft: that.data.owleft,
wtop: that.data.owtop
})
}, 1500)
that.get_test();
},
//开始游戏
begingame:function()
{
var that=this;
that.setData({
mstyle: 'none',
})
that.get_test();
},
//随机得到题目
get_test:function()
{
var that=this;
app.request({
url: api.saas.get_test,
method: 'POST',
success: function (res) {
that.setData({
wstyle: 'block',
wasteicon:res.icon,
answer_id:res.answer_id
})
// console.log(res.icon);
},
complete: function () {
}
})
},
})
相关代码可以进入下载:
【源代码下载:https://download.csdn.net/download/wxxcxxx/16792405】