Workshop › 2048 › Step 10 of 26

Slide a row

What we are doing

The whole game hangs on one function: slide one row to the left. First only the sliding: drop the zeros, then pad with zeros back to four. It is a pure function: it returns a new row and changes nothing else.

```js
// Slides one row to the left. Pure: returns a new row and the points gained, and changes nothing else.
function slideRow(row) {
  const tiles = row.filter((value) => value !== 0)
  const result = []
  let gained = 0
  for (let i = 0; i < tiles.length; i++) {
    result.push(tiles[i])
  }
  while (result.length < SIZE) result.push(0)
  return { row: result, gained }
}
```

What it means

filter makes a new array with only the items for which the arrow function is true: the non-zero tiles.
The loop copies them into result (the merging will go here in the next step).
while repeats as long as its condition holds: it pads result with zeros up to SIZE.
{ row: result, gained } returns two things at once in an object; gained stays 0 for now.

Your turn

Write the comment and slideRow above function cellX(col) {, with an empty line after it.

Skills: Functions, Arrays and objects

← Two tiles to start Merge equal tiles →

All steps