我尚未解决的问题是状态......会尝试标记斑点,通常是关于暂停(),简历(),如果您有任何其他建议感到自由。
提前感谢!
enter code here
import ReactDOM from 'react-dom';
import React from "react";
import {Router, Route, Link, IndexLink, IndexRoute, hashHistory} from 'react-router';
let BODY = 1, FOOD = 2;
let KEYS = {left: 37, up: 38, right: 39, down: 40};
let DIRS = {37: true, 38: true, 39: true, 40: true};
export class SnakeGames extends React.Component {
constructor(props) {
super(props);
const start = this.props.startIndex || 21;
const snake = [start], board = [];
board[start] = BODY;
this.state = {
snake: snake,
board: board,
growth: 0,
paused: true,
gameOver: false,
direction: KEYS.right
}
}
componentDidMount() {
this.resume();
}
reset(something) {
console.log(something);
this.setState(this.getInitialState());
this.resume();
}
pause() {
if ***(this.state.gameOver || this.state.paused)*** {
return;
}
this.setState({paused: true});
}
resume() {
if ***(this.state.gameOver || !this.state.paused)*** {
return;
}
this.setState({paused: false});
this.refs.board.focus();
this.tick();
}
tick() {
if (this.state.paused) {
return;
}
const snake = this.state.snake;
const board = this.state.board;
const growth = this.state.growth;
const direction = this.state.direction;
const numRows = this.props.numRows || 20;
const numCols = this.props.numCols || 20;
const head = getNextIndex(snake[0], direction, numRows, numCols);
if (snake.indexOf(head) !== -1) {
this.setState({gameOver: true});
return;
}
const needsFood = board[head] === FOOD || snake.length === 1;
if (needsFood) {
let ii, numCells = numRows * numCols;
do {
ii = Math.floor(Math.random() * numCells);
} while (board[ii]);
board[ii] = FOOD;
this.state.growth += 2;
} else if (growth) {
this.state.growth -= 1;
} else {
board[snake.pop()] = null;
}
snake.unshift(head);
board[head] = BODY;
if (this.nextDirection) {
this.state.direction = this.nextDirection;
this.nextDirection = null;
}
this.setState({
snake: snake,
board: board,
growth: growth,
direction: direction
});
setTimeout(this.tick, 100);
}
handleKey(event) {
var direction = event.nativeEvent.keyCode;
var difference = Math.abs(this.state.direction - direction);
// if key is invalid, or the same, or in the opposite direction
if (DIRS[direction] && difference !== 0 && difference !== 2) {
this.nextDirection = direction;
}
}
render() {
let cells = [];
const numRows = this.props.numRows || 20;
const numCols = this.props.numCols || 20;
const cellSize = this.props.cellSize || 30;
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
let code = this.state.board[numCols * row + col];
let type = code === BODY ? 'body' : code === FOOD ? 'food' : 'null';
cells.push(<div className={type + '-cell'}/>);
}
}
return (
<div className="snake-game">
<h1 className="snake-score">Score: {this.state.snake.length}</h1>
<div
ref="board"
className={'snake-board' + (this.state.gameOver ? ' game-over' : '')}
tabIndex={0}
onBlur={this.pause}
onFocus={this.resume}
onKeyDown={this.handleKey}
style={{width: numCols * cellSize, height: numRows * cellSize}}>
{cells}
</div>
<div className="snake-controls">
{this.state.paused ? <button onClick={this.resume}>Resume</button> : null}
{this.state.gameOver ? <button onClick={this.reset}>New Game</button> : null}
</div>
<button className="btn"><Link to="/snakemenu">RETURN</Link></button>
<button className="btn"><Link to="/snakegameover">GAME OVER</Link></button>
</div>
);
}
}
function getNextIndex(head, direction, numRows, numCols) {
let x = head % numCols;
let y = Math.floor(head / numCols);
switch (direction) {
case KEYS.up:
y = y <= 0 ? numRows - 1 : y - 1;
break;
case KEYS.down:
y = y >= numRows - 1 ? 0 : y + 1;
break;
case KEYS.left:
x = x <= 0 ? numCols - 1 : x - 1;
break;
case KEYS.right:
x = x >= numCols - 1 ? 0 : x + 1;
break;
default:
return;
}
// translate new x/y coords back into array index
return (numCols * y) + x;
}
答案 0 :(得分:1)
您需要将resume和pause方法绑定到'this'对象,以便引用该对象上的任何字段。而不是:
<button onClick={this.resume}>Resume</button>
你会使用:
<button onClick={this.resume.bind(this)}>Resume</button>
其他功能绑定也是如此:
<div
ref="board"
className={'snake-board' + (this.state.gameOver ? ' game-over' : '')}
tabIndex={0}
onBlur={this.pause.bind(this)}
onFocus={this.resume.bind(this)}
onKeyDown={this.handleKey.bind(this)}
style={{width: numCols * cellSize, height: numRows * cellSize}}>
{cells}
</div>
正如John Weisz在评论中提到的那样,如果在render方法中进行所有绑定调用,则往往会对性能产生影响。最好将这些调用移动到构造函数:
constructor(props) {
super(props);
const start = this.props.startIndex || 21;
const snake = [start], board = [];
board[start] = BODY;
this.state = {
snake: snake,
board: board,
growth: 0,
paused: true,
gameOver: false,
direction: KEYS.right
}
this.pause = this.pause.bind(this);
this.resume = this.resume.bind(this);
this.handleKey = this.handleKey.bind(this);
}
然后,您不必触摸渲染中的任何现有代码来添加绑定。
答案 1 :(得分:0)
您可能要考虑的另一件事是利用ES6中的箭头功能。所以这个:
resume() {
if ***(this.state.gameOver || !this.state.paused)*** {
return;
}
this.setState({paused: false});
this.refs.board.focus();
this.tick();
}
...成为:
resume = () => {
if ***(this.state.gameOver || !this.state.paused)*** {
return;
}
this.setState({paused: false});
this.refs.board.focus();
this.tick();
}
这避免了需要为每个函数将.bind(this)
添加到构造函数中,因此有点干。
请记住,您无法像使用.bind(this)
那样更改箭头函数的上下文。因此,如果您需要更改函数上下文,则必须坚持使用.bind(this)
,或者(甚至更好)使用闭包。