190 lines
4.6 KiB
JavaScript
190 lines
4.6 KiB
JavaScript
// packageI/prizePool/prizePool.js
|
|
const app = getApp();
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
canWidth: '',
|
|
canHeight: '',
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function (options) {
|
|
wx.setNavigationBarTitle({
|
|
title: '奖金池',
|
|
});
|
|
wx.getSystemInfo({
|
|
success: (result) => {
|
|
this.setData({
|
|
canWidth: result.windowWidth,
|
|
canHeight: result.windowHeight
|
|
});
|
|
},
|
|
});
|
|
this.getData();
|
|
},
|
|
getData() {
|
|
let urlStr = app.getNetAddresss("plugin.prize-pool.frontend.controllers.center");
|
|
app._getNetWork({
|
|
url: urlStr,
|
|
data: {},
|
|
success: (res) => {
|
|
if (res.data.result !== 1) {
|
|
wx.showToast({
|
|
title: res.data.msg,
|
|
});
|
|
return;
|
|
}
|
|
this.setData({
|
|
info: res.data.data
|
|
});
|
|
}
|
|
});
|
|
},
|
|
drawCircle() {
|
|
let that = this;
|
|
const query = wx.createSelectorQuery();
|
|
query.select('#myCanvas')
|
|
.fields({
|
|
node: true,
|
|
size: true
|
|
})
|
|
.exec((res) => {
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = this.data.canWidth;
|
|
canvas.height = this.data.canHeight;
|
|
// 用来存放每个圆属性
|
|
let dots = [];
|
|
// 生成圆的个数
|
|
let arcNum = 30;
|
|
for (let i = 0; i < arcNum; i++) {
|
|
var arcObj = {
|
|
arcX: that.randow(0, that.data.canWidth),
|
|
arcY: that.randow(0, that.data.canHeight),
|
|
arcR: 3,
|
|
// color: `rgba(${that.randow(0, 255)},${that.randow(0, 255)},${that.randow(0, 255)},${that.randow(0, 1)})`, rgba(215,64,47,1)
|
|
color: `rgba(255, 255, 255, 0.7)`,
|
|
suduX: that.random(-0.5, 0.5),
|
|
suduY: that.random(-0.5, 0.5)
|
|
};
|
|
dots.push(arcObj);
|
|
}
|
|
setInterval(() => {
|
|
ctx.clearRect(0, 0, this.data.canWidth, this.data.canHeight);
|
|
for (var i = 0; i < arcNum; i++) {
|
|
//让圆动起来
|
|
dots[i].arcX += dots[i].suduX;
|
|
dots[i].arcY += dots[i].suduY;
|
|
ctx.beginPath();
|
|
ctx.fillStyle = dots[i].color;
|
|
ctx.arc(dots[i].arcX, dots[i].arcY, dots[i].arcR, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
//边界检测,将速度取反,实现碰撞
|
|
if (dots[i].arcX <= 0 || dots[i].arcX > this.data.canWidth) {
|
|
dots[i].suduX *= -1;
|
|
}
|
|
|
|
if (dots[i].arcY <= 0 || dots[i].arcY > this.data.canHeight) {
|
|
dots[i].suduY *= -1;
|
|
}
|
|
|
|
//利用勾股定理判断是否连线 a*a+b*b=c*c
|
|
// Math.sqrt() 平方根
|
|
// Math.pow(a,b) a的b次方
|
|
for (var j = i + 1; j < arcNum; j++) {
|
|
if (
|
|
Math.sqrt(
|
|
Math.pow(dots[i].arcX - dots[j].arcX, 2) +
|
|
Math.pow(dots[i].arcY - dots[j].arcY, 2)
|
|
) < 70
|
|
) {
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = `rgba(255, 255, 255, 0.2)`;
|
|
ctx.moveTo(dots[i].arcX, dots[i].arcY);
|
|
ctx.lineTo(dots[j].arcX, dots[j].arcY);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}, 5);
|
|
});
|
|
},
|
|
// 随机整数
|
|
randow(max, min) {
|
|
return Math.round(Math.random() * (max - min) + min);
|
|
},
|
|
// 随机小数
|
|
random(max, min) {
|
|
return Math.random() * (max - min) + min;
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady: function () {
|
|
this.drawCircle();
|
|
// let that = this;
|
|
// const query = wx.createSelectorQuery()
|
|
// query.select('#myCanvas')
|
|
// .fields({
|
|
// node: true,
|
|
// size: true
|
|
// })
|
|
// .exec((res) => {
|
|
// const canvas = res[0].node;
|
|
// const ctx = canvas.getContext('2d');
|
|
// ctx.moveTo(10, 10)
|
|
// ctx.rect(10, 10, 100, 50)
|
|
// ctx.lineTo(110, 60)
|
|
// ctx.stroke()
|
|
// })
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage: function () {
|
|
|
|
},
|
|
|
|
}); |