) } class Timer extends React.Component { startTimer = () => { let sec = 0; this.timerCount = setInterval(() => { sec++; this.props.onTimeChange(sec); if (sec > 998) clearInterval(this.timerCount); }, 1000); } stopTimer = () => { clearInterval(this.timerCount); } render() { return (

{("00" + this.props.timeDisplay).slice(-3)}

) } } class Dropdown extends React.Component { state = { isMenuVisible: false } handleMenuItemClick = (e) => { const selectedLevel = this.props.levels.find((level) => level.difficulty === e.target.innerText); this.setState({ isMenuVisible: false }) this.props.onLevelChange(selectedLevel) } toggleMenu = () => { this.setState({ isMenuVisible: !this.state.isMenuVisible }); } closeMenu = () => { this.setState({ isMenuVisible: false }) } render() { let dropdown; if (this.state.isMenuVisible) { dropdown = (

{this.props.levels.map((level) => { return

{ this.handleMenuItemClick(e) }} className="option" key={level.id} value={level.difficulty}>{level.difficulty}

; })}

); } return (

{this.closeMenu()}}>

{this.toggleMenu()}}> {this.props.selectedLevel.difficulty}

{dropdown}

) } } class Tile extends React.Component { state = { numberColors: ["#8B6AF5","#74c2f9","#42dfbc","#f9dd5b","#FEAC5E","#ff5d9e","#F29FF5","#c154d8"], stagger: 20, flagIcon: '', bombIcon: '' } onRightClick = (e) => { e.preventDefault(); const tileId = parseInt(e.target.id); this.props.onAddFlag(tileId); } render() { const tile = this.props.tile; let tileClass; if (tile.checked) { if (tile.hasBomb) tileClass = " checked has-bomb" else tileClass = " checked" } else { tileClass = '' } let content; if (tile.checked) { if (tile.hasBomb) { content = this.state.bombIcon } else { if (tile.neighborBombs !== 0) { content = tile.neighborBombs } else { content = null } } } else { if (tile.flag) { content = this.state.flagIcon } else { content = null } } let tileStyle; if (tile.checked && tile.hasBomb && tile.bgColor) { tileStyle= {backgroundColor: tile.bgColor} } else if (tile.checked && !tile.hasBomb && tile.neighborBombs !== 0) { const tileNumberColor = this.state.numberColors[tile.neighborBombs - 1]; const tileNumberShadow = "1px 1px" + lightenDarkenColor(tileNumberColor, -20); tileStyle= {color: tileNumberColor, textShadow: tileNumberShadow } } else { tileStyle = null } return (

this.props.onTileClick(e)} onContextMenu={(e) => this.onRightClick(e)} neighborbombs={tile.neighborbombs} style={tileStyle}>

) } } class App extends React.Component { constructor(props) { super(props); this.state = { levels: [ { id: 0, difficulty: "初级", width: 10, bombs: 15 }, { id: 1, difficulty: "中级", width: 15, bombs: 30 }, { id: 2, difficulty: "高级", width: 18, bombs: 70 } ], tiles: [], isGameOver: false, gameResult: "", isTimerOn: false, isModalOpen: false, isContainerAnimated: false, timeDisplay: 0, flagCount: 0, mainColors: [ "#8B6AF5", "#74c2f9", "#42dfbc", "#f9dd5b", "#FEAC5E", "#ff5d9e", "#F29FF5", "#c154d8" ], bgColors: [ "#b39ffd", "#93c1fd", "#8af1f8", "#f9dd5b", "#FEAC5E", "#f87dae", "#f6b8f8", "#f7efce" ] }; this.state.root = document.documentElement; this.state.selectedLevel = this.state.levels[0]; this.state.flagsLeft = this.state.selectedLevel.bombs; } componentDidMount() { console.log("hello"); this.createBackground(); this.createBoard(); } getMainColor = () => { const randomColor = this.state.mainColors[Math.floor(Math.random() * this.state.mainColors.length)]; this.state.root.style.setProperty("--main-color", randomColor); this.state.root.style.setProperty( "--dark-color", lightenDarkenColor(randomColor, -50) ); } clearBoard = () => { console.clear(); if (this.state.isTimerOn) this.refs.timer.stopTimer(); this.setState({ timeDisplay: 0, isGameOver: false, tiles: [], gameResult: '', isContainerAnimated: false, isTimerOn: false, flagCount:0}) this.createBoard(); } createBoard = () => { this.getMainColor(); const width = this.state.selectedLevel.width; const tileWidth = parseInt( getComputedStyle(this.state.root).getPropertyValue("--tile-width") ); this.state.root.style.setProperty("--grid-width", width * tileWidth); const tiles = [] for (let i = 0; i < width * width; i++) { tiles.push({ id: i, checked: false, hasBomb: false }) } //add bombs const randomTiles = tiles.map(tile => tile.id).sort(() => Math.random() - 0.5).slice(0, this.state.selectedLevel.bombs) let bombIndex = 0; tiles.forEach((tile, index) => { if (randomTiles.includes(tile.id)) { tile.hasBomb = true tile.bombIndex = bombIndex tile.bgColor = this.state.bgColors[Math.floor(Math.random() * this.state.bgColors.length)]; bombIndex++ } console.log(tile) }) //add numbers for (let i = 0; i < tiles.length; i++) { let total = 0; const isLeftEdge = i % width === 0; const isRightEdge = i % width === width - 1; if (!tiles[i].hasBomb) { if (!isLeftEdge) { if (tiles[i - 1] && tiles[i - 1].hasBomb) total++; if ( tiles[i - 1 + width] && tiles[i - 1 + width].hasBomb ) total++; if ( tiles[i - 1 - width] && tiles[i - 1 - width].hasBomb ) total++; } if (!isRightEdge) { if (tiles[i + 1] && tiles[i + 1].hasBomb) total++; if ( tiles[i + 1 + width] && tiles[i + 1 + width].hasBomb ) total++; if ( tiles[i + 1 - width] && tiles[i + 1 - width].hasBomb ) total++; } if (tiles[i - width] && tiles[i - width].hasBomb) total++; if (tiles[i + width] && tiles[i + width].hasBomb) total++; tiles[i].neighborBombs = total; } } this.setState({ tiles, flagsLeft: this.state.selectedLevel.bombs }) } handleTileClick = (e) => { const clickedTileId = parseInt(e.target.id); if (!this.state.isTimerOn) this.refs.timer.startTimer(); this.setState({ isTimerOn: true}) this.clickTile(clickedTileId) } // click on tile clickTile = (tileId) => { const currentTile = this.state.tiles.find(tile => tile.id === tileId) let checkIndex = 0; if (this.state.isGameOver) return null; if (currentTile.checked || currentTile.flag) { return null; } if (currentTile.hasBomb) { this.gameOver(currentTile); } else { let total = currentTile.neighborBombs ? currentTile.neighborBombs : 0; if (total !== 0) { currentTile.checked = true currentTile.color = this.state.mainColors[currentTile.neighborBombs - 1]; return } } currentTile.checked = true currentTile.checkIndex = checkIndex checkIndex++; console.log(checkIndex) this.checktile(tileId); const tiles = [...this.state.tiles] tiles.forEach(tile => { if (tile.id === tileId) tile.checked = true }) this.setState({tiles}) } //check neighboring tiles once tile is clicked checktile = (tileId) => { const width = this.state.selectedLevel.width; const isLeftEdge = tileId % width === 0; const isRightEdge = tileId % width === width - 1; const tiles = this.state.tiles; const loopThroughtiles = (tile) => { this.clickTile(tile.id); } if (!isRightEdge) { if (tiles[tileId + 1 - width]) loopThroughtiles(tiles[tileId + 1 - width]); if (tiles[tileId + 1]) loopThroughtiles(tiles[tileId + 1]); if (tiles[tileId + 1 + width]) loopThroughtiles(tiles[tileId + 1 + width]); } if (!isLeftEdge) { if (tiles[tileId - 1]) loopThroughtiles(tiles[tileId - 1]); if (tiles[tileId - 1 - width]) loopThroughtiles(tiles[tileId - 1 - width]); if (tiles[tileId - 1 + width]) loopThroughtiles(tiles[tileId - 1 + width]); } if (tiles[tileId - width]) loopThroughtiles(tiles[tileId - width]); if (tiles[tileId + width]) loopThroughtiles(tiles[tileId + width]); } gameOver = (currentTile) => { this.setState({ isGameOver: true, isContainerAnimated: true, isTimerOn: false, gameResult: 'lost'}) this.refs.timer.stopTimer() let itemsProcessed = 0; // //show all the bombs const bombTiles = this.state.tiles.filter((tile) => tile.hasBomb ); bombTiles.forEach((tile) => { currentTile.checked = true tile.checked = true itemsProcessed++; if (itemsProcessed === bombTiles.length) { setTimeout(() => { this.openModal() }, 1000); } }); } //add Flag with right click addFlag = (tileId) => { const tile = this.state.tiles.find(tile => tile.id === tileId) if (this.state.isGameOver) return; let { flagCount } = this.state; if (!tile.checked) { if (!tile.flag && flagCount < this.state.selectedLevel.bombs) { tile.flag = true flagCount++; const flagsLeft = this.state.selectedLevel.bombs - flagCount; this.setState({flagsLeft, flagCount}) this.checkForWin(); } else if (tile.flag){ tile.flag = false flagCount--; const flagsLeft = this.state.selectedLevel.bombs - flagCount; this.setState({flagsLeft, flagCount}) } } } //check for win checkForWin = () => { let matches = 0; this.state.tiles.forEach((tile) => { if (tile.flag && tile.hasBomb) matches++; if (matches === this.state.selectedLevel.bombs) { this.setState({ gameResult: 'won', isModalOpen: true, isGameOver: true, isTimerOn: false }) this.refs.timer.stopTimer() if (!tile.checked) tile.checked = true; } }) } replay = () => { if (this.state.isModalOpen) this.closeModal(); setTimeout(() => {this.clearBoard()}, 80) } updateLevel = (level) => { this.setState({selectedLevel: level }, () => this.clearBoard()) } //modal functions closeModal = () => { this.setState({ isModalOpen: false }); } openModal = () => { this.setState({ isModalOpen: true }); } getTime = (time) => { this.setState({ timeDisplay: time }) } addElement = (x, y) => { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const use = document.createElementNS("http://www.w3.org/2000/svg", "use"); use.setAttributeNS( "http://www.w3.org/1999/xlink", "xlink:href", "#bomb-svg" ); svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); svg.setAttribute("style", "top: " + y + "px; left: " + x + "px"); svg.appendChild(use); this.background.appendChild(svg); }; createBackground = () => { const spacing = 60; const w = window.innerWidth; const h = window.innerHeight; for (let y = 0; y <= h; y += spacing) { if (y % (spacing * 2) === 0) { for (let x = 0; x <= w; x += spacing) { this.addElement(x, y); } } else { for (let x = -(spacing / 2); x <= w; x += spacing) { this.addElement(x, y); } } } }; render() { let grid = this.state.tiles.map((tile, index) => { return ( ) }) return (

this.background = el}>

{this.state.flagsLeft}

{grid}

); } } ReactDOM.render(, document.getElementById("app"));

{resultMessage}

Your time: {props.timeDisplay} seconds

重新开始

作品预览「React 写的扫雷游戏」