so easy! create mine sweeping game with react-raphael!
# 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
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"));
- 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 gamecontext=>{x,y,models,openSum,closeSum}
- replay
function
replay the game
Email: liuhong1.happy@163.com