模拟蚂蚁森林小球收集能量方法
想要效果，点击前
点击后
技术栈：vue js
HTML：
<div class="main_contain">
<div v-for="(item,index) in ballList" :key="index" class="ball_small" :style="{top:item.top+'px',left:item.left+'px',transition:'all 2s'}">
10
</div>
<div class="main_ball" @click="in_ball">100</div>
</div>
data:控制浮动能量小球的位置
data() {
return {
ballList:[
{
top:120,
left:20,
},
{
top:20,
left:80,
},
{
top:20,
left:160,
},
{
top:120,
left:320,
},
]
}
点击小球后，小球的移动位置：
in_ball(){
this.ballList[0].left=150
this.ballList[1].left=150
this.ballList[1].top=130
this.ballList[2].left=150
this.ballList[2].top=130
this.ballList[3].left=150
this.ballList[3].top=130
},
css样式：
.main_contain{
width: 100%;
height:100%;
position: fixed;
background:#fff;
}
.ball_small {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: radial-gradient(white, #00c2ff);
position: absolute;
color:white;
display: flex;
align-items: center;
justify-content: center;
cursor:pointer;
float:left;
z-index: 1;
}
.ball_small{
animation: heart 1.2s ease-in-out 2.5s infinite alternate;
}
.main_ball{
width: 120px;
height:120px;
background:rgb(22, 211, 132);
position: absolute;
border-radius:50%;
display: flex;
align-items: center;
justify-content: center;
color:white;
top:100px;
left:calc(15% - 60px);
z-index: 2;
}
@keyframes heart{
from{
transform:translate(0,0)}
to{
transform:translate(0,8px)}
}
新问题，在小球上加上随机数字，点击收集后，收集后的能量球是生成随机小球的能量总和
第一步：生成随机数方法：
created: function () {
this.getNumber();
},
methods: {
getNumber() {
for(var i = 0; i <this.ballList.length; i++){
var index= Math.ceil(Math.random()*20);
console.log(index);
}
},
第二步，将随机生成的数字绑定到小球上显示
报错：
做出更改：
在生成随机数后，将随机数添加到ballList数组中生成一个新的对象
getNumber() {
for(var i = 0; i <this.ballList.length; i++){
var num= Math.ceil(Math.random()*20);
this.ballList[i]['number']=num;
console.log(num);
}
console.log(this.ballList);
},
this.ballList[i]['number']=num; 就是在数组中添加了一个新的名字为number的对象
html动态绑定：
第三步：点击将所生成小球随机数计算出总和显示到大的能量球中；
构想：在未点击收集小球的时候大球的默认值应该为0，点击后为能量总和
实现：
在data中添加：sum:0,
getNumber方法改为：
getNumber() {
for(var i = 0; i <this.ballList.length; i++){
var num= Math.ceil(Math.random()*20);
this.ballList[i]['number']=num;
console.log(num);
this.sum +=num;
}
console.log(this.ballList);
console.log(this.sum)
},
this.sum +=num; 就是计算随机生成数的总和
接下来将判断，点击之前显示为0，点击之后显示为sum
html修改：
<div class="main_ball" id="m_ball" @click="in_ball">0</div>
然后再点击方法in_ball中添加：
in_ball(){
this.ballList[0].left=150
this.ballList[1].left=150
this.ballList[1].top=130
this.ballList[2].left=150
this.ballList[2].top=130
this.ballList[3].left=150
this.ballList[3].top=130
document.getElementById("m_ball").innerHTML=this.sum;
},
核心代码 document.getElementById("m_ball").innerHTML=this.sum;
好啦 就简单的实现啦！