react-raphael-mine-sweeping

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: [e-mail]