React--简单的抽卡模拟器_三国杀抽卡模拟器-CSDN博客

本文链接：https://blog.csdn.net/qq_32109661/article/details/109378602

这篇博客展示了作者使用React技术制作的一款抽卡模拟器的实践过程，包括主页、抽卡动画和抽卡记录等功能。模拟器采用了CSS动画和indexedDB存储抽卡记录，涉及的组件包括BtnArea、Card和CardArea等。尽管存在一些问题，如图片命名不准确，但整体上是React初学者的一个良好实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

这是我练习React的练手作业，毕竟官方给的井字棋还是有些简单了
用到的图片来源是网络，主要是三国杀的素材，所以严禁用于商业用途
这个模拟器主要是主页、抽卡动画页与抽卡记录页三个部分，动画用的css动画，记录则用的是indexedDB，所以看我的代码前最好了解一下这些东西
用到图片可能存在图名不对应的情况，因为我也不知道图片画的是谁，就随便猜了个名字
代码中可能存在一些问题，这很正常，毕竟这是练习用的，有问题欢迎大家指出
样式基本没采用响应式与浏览器兼容，所以最好在最新版的谷歌浏览器上查看
本来想着打个包给大家看，没想到打完包后indexedDB相关的代码一直在报错，改来改去改不好了就放弃了

功能介绍

1、主页

在这里插入图片描述
2、十连抽页

在这里插入图片描述
3、单抽页

在这里插入图片描述
4、抽卡记录页

代码结构

在这里插入图片描述

代码内容

1、heros.json

{
   
  "legend": [
    {
   
      "name": "步练师",
      "spell": "bu_lianshi"
    },
    {
   
      "name": "关羽",
      "spell": "guan_yu"
    },
    {
   
      "name": "郭嘉",
      "spell": "guo_jia"
    },
    {
   
      "name": "黄盖",
      "spell": "huang_gai"
    },
    {
   
      "name": "黄忠",
      "spell": "huang_zhong"
    },
    {
   
      "name": "鲁肃",
      "spell": "lu_su"
    },
    {
   
      "name": "陆逊",
      "spell": "lu_xun"
    },
    {
   
      "name": "司马懿",
      "spell": "si_mayi"
    },
    {
   
      "name": "孙尚香",
      "spell": "sun_shangxiang"
    },
    {
   
      "name": "严颜",
      "spell": "yan_yan"
    },
    {
   
      "name": "于禁",
      "spell": "yu_jin"
    },
    {
   
      "name": "周瑜",
      "spell": "zhou_yu"
    },
    {
   
      "name": "诸葛亮",
      "spell": "zhu_geliang"
    }
  ],
  "epic": [
    {
   
      "name": "步练师",
      "spell": "bu_lianshi"
    },
    {
   
      "name": "关羽",
      "spell": "guan_yu"
    },
    {
   
      "name": "郭嘉",
      "spell": "guo_jia"
    },
    {
   
      "name": "黄盖",
      "spell": "huang_gai"
    },
    {
   
      "name": "黄忠",
      "spell": "huang_zhong"
    },
    {
   
      "name": "鲁肃",
      "spell": "lu_su"
    },
    {
   
      "name": "陆逊",
      "spell": "lu_xun"
    },
    {
   
      "name": "司马懿",
      "spell": "si_mayi"
    },
    {
   
      "name": "孙尚香",
      "spell": "sun_shangxiang"
    },
    {
   
      "name": "严颜",
      "spell": "yan_yan"
    },
    {
   
      "name": "于禁",
      "spell": "yu_jin"
    },
    {
   
      "name": "周瑜",
      "spell": "zhou_yu"
    },
    {
   
      "name": "诸葛亮",
      "spell": "zhu_geliang"
    }
  ],
  "elite": [
    {
   
      "name": "步练师",
      "spell": "bu_lianshi"
    },
    {
   
      "name": "关羽",
      "spell": "guan_yu"
    },
    {
   
      "name": "郭嘉",
      "spell": "guo_jia"
    },
    {
   
      "name": "黄盖",
      "spell": "huang_gai"
    },
    {
   
      "name": "黄忠",
      "spell": "huang_zhong"
    },
    {
   
      "name": "鲁肃",
      "spell": "lu_su"
    },
    {
   
      "name": "陆逊",
      "spell": "lu_xun"
    },
    {
   
      "name": "司马懿",
      "spell": "si_mayi"
    },
    {
   
      "name": "孙尚香",
      "spell": "sun_shangxiang"
    },
    {
   
      "name": "严颜",
      "spell": "yan_yan"
    },
    {
   
      "name": "于禁",
      "spell": "yu_jin"
    },
    {
   
      "name": "周瑜",
      "spell": "zhou_yu"
    },
    {
   
      "name": "诸葛亮",
      "spell": "zhu_geliang"
    }
  ],
  "ordinary": [
    {
   
      "name": "步练师",
      "spell": "bu_lianshi"
    },
    {
   
      "name": "关羽",
      "spell": "guan_yu"
    },
    {
   
      "name": "郭嘉",
      "spell": "guo_jia"
    },
    {
   
      "name": "黄盖",
      "spell": "huang_gai"
    },
    {
   
      "name": "黄忠",
      "spell": "huang_zhong"
    },
    {
   
      "name": "鲁肃",
      "spell": "lu_su"
    },
    {
   
      "name": "陆逊",
      "spell": "lu_xun"
    },
    {
   
      "name": "司马懿",
      "spell": "si_mayi"
    },
    {
   
      "name": "孙尚香",
      "spell": "sun_shangxiang"
    },
    {
   
      "name": "严颜",
      "spell": "yan_yan"
    },
    {
   
      "name": "于禁",
      "spell": "yu_jin"
    },
    {
   
      "name": "周瑜",
      "spell": "zhou_yu"
    },
    {
   
      "name": "诸葛亮",
      "spell": "zhu_geliang"
    }
  ]
}

就是十三个武将与四种稀有度，分别是传奇、史诗、精英与普通，抽中概率分别是3%、7%、10%、80%，对应颜色分别是金色、红色、紫色、蓝色

2、index.js

import React from 'react';
import ReactDOM from 'react-dom';

// 抽卡相关
import './card.scss';
import CardArea from './components/card/CardArea';
import BtnArea from './components/card/BtnArea'

class Game extends React.Component {
   
  // 抽卡相关
  onRef = (ref) => {
   
    this.cardArea = ref;
  }

  render () {
   
    return (
      <div className