Skip to content

Commit 9c2d222

Browse files
committed
dont allow snake to go on itself
1 parent 3f2a7c8 commit 9c2d222

File tree

2 files changed

+33
-13
lines changed

2 files changed

+33
-13
lines changed

src/App.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
height: 15px;
1818
}
1919

20+
.grid-cell-border {
21+
background-color: #000000;
22+
}
23+
2024
.grid-cell-snake {
2125
background-color: #000000;
2226
}

src/App.js

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const GRID_SIZE = 40;
77
const TICK_RATE = 100;
88
const GRID_ARRAY = [];
99

10-
for (var i = 0; i <= GRID_SIZE; i++) {
10+
for (let i = 0; i <= GRID_SIZE; i++) {
1111
GRID_ARRAY.push(i);
1212
}
1313

@@ -60,15 +60,20 @@ const isSnake = (x, y, snakeCoordinates) => {
6060
const getSnakeHead = (snake) =>
6161
snake.coordinates[0];
6262

63-
// apply FP
63+
const getSnakeWithoutStub = (snake) =>
64+
snake.coordinates.slice(0, snake.coordinates.length - 1);
65+
66+
const getSnakeTail = (snake) =>
67+
snake.coordinates.slice(1);
68+
6469
const getIsSnakeOutside = (snake) =>
6570
getSnakeHead(snake).x >= GRID_SIZE ||
6671
getSnakeHead(snake).y >= GRID_SIZE ||
6772
getSnakeHead(snake).x < 0 ||
6873
getSnakeHead(snake).y < 0;
6974

7075
const getIsSnakeClumy = (snake) =>
71-
false;
76+
isSnake(getSnakeHead(snake).x, getSnakeHead(snake).y, getSnakeTail(snake));
7277

7378
// apply FP
7479
const getIsSnakeEating = ({ snake, snack }) =>
@@ -84,11 +89,9 @@ const applySnakePosition = (prevState) => {
8489
getSnakeHead(prevState.snake).y,
8590
);
8691

87-
// TODO babel stage
88-
// const [...snakeCoordinatesWithoutLast, lastCoordinate] = prevState.snake.coordinates;
8992
const snakeTail = isSnakeEating
9093
? prevState.snake.coordinates
91-
: prevState.snake.coordinates.slice(0, prevState.snake.coordinates.length - 1);
94+
: getSnakeWithoutStub(prevState.snake);
9295

9396
const snackCoordinate = isSnakeEating
9497
? getRandomCoordinate()
@@ -153,7 +156,6 @@ class App extends Component {
153156
if (getIsSnakeOutside(this.state.snake) || getIsSnakeClumy(this.state.snake)) {
154157
return;
155158
}
156-
157159
this.setState(applySnakePosition);
158160
}
159161

@@ -178,25 +180,39 @@ class App extends Component {
178180

179181
const Grid = ({ snake, snack }) =>
180182
<div className="grid">
181-
{GRID_ARRAY.map(y => <Row
182-
y={y}
183-
key={y}
184-
snake={snake}
185-
snack={snack}
186-
/>)}
183+
<Border grid={GRID_ARRAY} />
184+
{GRID_ARRAY.map(y => <Row
185+
y={y}
186+
key={y}
187+
snake={snake}
188+
snack={snack}
189+
/>)}
190+
<Border grid={GRID_ARRAY} />
187191
</div>
188192

189193
const Row = ({ snake, snack, y }) =>
190194
<div className="grid-row">
195+
<Block />
191196
{GRID_ARRAY.map(x => <Cell
192197
x={x}
193198
y={y}
194199
key={x}
195200
snake={snake}
196201
snack={snack}
197202
/>)}
203+
<Block />
204+
</div>
205+
206+
const Border = ({ grid }) =>
207+
<div className="grid-row">
208+
<Block />
209+
{grid.map(v => <Block key={v} />)}
210+
<Block />
198211
</div>
199212

213+
const Block = () =>
214+
<div className="grid-cell grid-cell-border" />
215+
200216
const Cell = ({ snake, snack, x, y }) =>
201217
<div className={getCellCs(snake, snack, x, y)} />;
202218

0 commit comments

Comments
 (0)