Noah's Pairwise Manifest

    react-raphael-mine-sweeping

    0.8.0 • Public • Published

    react-raphael-mine-sweeping

    Version Downloads

    so easy! create mine sweeping game with react-raphael!

    Install

    # or specify the externals in webpack config
    npm install --save raphael
    # install react-raphael-mine-sweeping in your react-raphael-mine-sweeping project
    npm install --save react-raphael-mine-sweeping
    

    Quickly Start

    var React = require('react');
    var ReactDOM = require('react-dom');
    var MineSweeping = require('react-raphael-mine-sweeping');
        
    class MineSweepingApp extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                mineCount: 60,
                xSize: 24,
                ySize: 24,
                openSum: 24 * 24,
                closeSum: 0
            }
        }
        replay(){
            this.refs.mine.replay();
            this.setState({
                openSum: 24 * 24,
                closeSum: 0
            })
        }
        handleClick(context){
            this.setState({
                openSum: context.openSum,
                closeSum: context.closeSum
            })
        }
        render(){
            var {mineCount,openSum,closeSum} = this.state;
            return (<div>
            <div>
                    <button onClick={this.replay.bind(this)}>replay</button>
                    <span>open box count:</span>
                    <span>{openSum}</span>
                    <span>close box count:</span>
                    <span>{closeSum}</span>
                    <span>mine count:</span>
                    <span>{mineCount}</span>
            </div>        
            <MineSweeping ref="mine" mineCount={60} xSize={24} ySize={24} onClick={this.handleClick.bind(this)}/>
            </div>)
        }
    }
     
    ReactDOM.render(<div>
                    <MineSweepingApp />
                    </div>,document.getElementById("react-container"));

    API

    All Mine Sweeping Props

    • mineCount number mine count of the game
    • xSize number column count of the boxs
    • ySize number row count of the boxs
    • onClick function click event of the game context=>{x,y,models,openSum,closeSum}

    All Mine Sweeping Ref

    • replay function replay the game

    Contact

    Email: liuhong1.happy@163.com

    Install

    npm i react-raphael-mine-sweeping

    DownloadsWeekly Downloads

    3

    Version

    0.8.0

    License

    MIT

    Last publish

    Collaborators

    • liuhong1happy