React 实现「双色球」游戏

中国福利彩票双色球游戏规则由中华人民共和国财政部制定的规则，是一种联合发行的“乐透型”福利彩票。

双色球的选球规则：

“双色球”彩票投注区分为红色球号码区和蓝色球号码区。每注投注（每注2元。）号码由 6 个红色球号码和 1 个蓝色球号码组成。红色球号码从 1--33 中选择；蓝色球号码从 1--16 中选择。“双色球”每周销售三期，期号以开奖日界定，按日历年度编排。

言外之意：
每一局，红色球可以在1-33个编号中任意选择6个，蓝色球可以在1-16中选择一个。

为了更好的展示所有的业务全部在一个组件(App)内完成：

import React, { Component } from "react";
import classnames from "classnames";
import "./app.css";
import a from "./images/red.png";
console.log(a)

export default class App extends Component {
    constructor(){
        super()
        this.state = {
            red_ball_arr : [],
            blue_ball_num : 0,
        }
    }
    render() {
        let self = this;
        return (
            <div>
                <h3>双色球</h3>
                <div className = "left">
                    <h4>红球1~33任选六个 <span>你选择的红球号码为：{self.state.red_ball_arr.join(",")}</span></h4>
                    {(function(){
                        let arr = [];
                        for(let i = 1; i <= 33;i++){
                            arr.push(<p key = {i} className = {classnames({
                                "cur" : self.state.red_ball_arr.includes(i),
                                "red_ball" : true
                            })} onClick = {()=>{
                                if(self.state.red_ball_arr.length < 6){
                                    self.setState({
                                        red_ball_arr:[...self.state.red_ball_arr,i]
                                    })

                                }
                                if(self.state.red_ball_arr.includes(i)){
                                    self.setState({
                                        red_ball_arr:self.state.red_ball_arr.filter(item=>item!==i)
                                    })
                                }
                            }}>{i}</p>);
                        }
                        return arr;
                    })()}
                    <div>
                        <button  onClick = {()=>{
                            let arr = [];
                            while(arr.length < 6){
                                let random_num = ~~(Math.random()*33) + 1;
                                if(!arr.includes(random_num)){
                                    arr.push(random_num);
                                }
                            }
                            self.setState({
                                red_ball_arr : arr
                            });
                    }}>随机选择6个</button>
                    </div>
                </div>
                <div className = "right">
                    <h4>蓝色球1~16中任选一个 <span>你选择的蓝球号码为：{self.state.blue_ball_num ? self.state.blue_ball_num : ""}</span></h4>
                    {(function(){
                        let arr = [];
                        for(let i = 1; i <= 16;i++){
                            arr.push(<p key = {i} className = {classnames({
                                "cur" : self.state.blue_ball_num === i,
                                "blue_ball" : true
                            })} onClick = {()=>{
                                self.setState({
                                    blue_ball_num:self.state.blue_ball_num = i
                                })
                            }}>{i}</p>);
                        }
                        return arr;
                    })()}
                    <button onClick = {()=>{
                        self.setState({
                            blue_ball_num : ~~(Math.random()*16) + 1
                        })
                    }}>随机选择1个</button>
                </div>
            </div>
        )
    }
}

随便写的简单样式：
app.css

h3 {
    text-align: center;
}
div.left {
    width: 500px;
    height: 300px;
    float: left;
    border: 1px solid #345;
    padding: 20px;
    margin: 20px 30px;
}
div p{
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    margin: 5px 15px;
    float: left;
    text-align: center;
    cursor: pointer;
}

.red_ball {
    background-image: url("/src/images/red.png");
}
.blue_ball{
    background-image: url("/src/images/blue.png");
}
.cur{
    background-image: url("/src/images/white.png");
}
div.right {
    width: 500px;
    height: 300px;
    float: left;
    padding: 20px;
    border: 1px solid #345;
    margin: 20px 30px;
}