使用vue模拟原神抽卡
时间: 2023-08-24 07:07:28 浏览: 42
好的,使用Vue模拟原神抽卡,可以按照以下步骤进行:
1. 创建一个Vue实例,并在其中定义卡池和抽卡结果的数据。
```javascript
new Vue({
el: '#app',
data: {
pool: [
{ name: '角色1', type: 'character', rate: 0.006 },
{ name: '角色2', type: 'character', rate: 0.006 },
{ name: '角色3', type: 'character', rate: 0.006 },
{ name: '武器1', type: 'weapon', rate: 0.07 },
{ name: '武器2', type: 'weapon', rate: 0.07 },
{ name: '武器3', type: 'weapon', rate: 0.07 },
{ name: '普通物品1', type: 'item', rate: 0.77 },
{ name: '普通物品2', type: 'item', rate: 0.77 },
{ name: '普通物品3', type: 'item', rate: 0.77 },
],
result: [],
pityCount: 0,
history: [],
},
methods: {
// 抽卡方法
draw() {
let random = Math.random();
let index = 0;
while (random > 0) {
random -= this.pool[index].rate;
index++;
}
index--;
let card = this.pool[index];
if (card.type === 'character' || card.type === 'weapon') {
this.pityCount = 0;
} else {
this.pityCount++;
}
this.result.push(card.name);
this.history.push(card.name);
if (this.pityCount >= 10) {
this.result.push('保底物品');
this.history.push('保底物品');
this.pityCount = 0;
}
},
// 重置方法
reset() {
this.result = [];
this.pityCount = 0;
},
},
});
```
2. 在页面上渲染卡池和抽卡结果,并绑定抽卡和重置事件。
```html
<div id="app">
<h2>卡池</h2>
<ul>
<li v-for="card in pool">
{{ card.name }}({{ card.type }},{{ card.rate * 100 }}%)
</li>
</ul>
<button @click="draw">抽卡</button>
<button @click="reset">重置</button>
<h2>抽卡结果</h2>
<ul>
<li v-for="card in result">
{{ card }}
</li>
</ul>
<h2>历史记录</h2>
<ul>
<li v-for="card in history">
{{ card }}
</li>
</ul>
</div>
```
3. 在抽卡方法中实现抽卡逻辑,并将抽卡结果和历史记录添加到页面上。
以上是一个简单的原神抽卡模拟实现,你可以根据实际需求对其进行优化和扩展。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)