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: [email protected]