20,000 times out of my league

19.04.2020 — svelte, grid, 2048 — 1 min read

This project took way longer than I intended...

Today we'll explore building 2048 with svelte and CSS grid layout. This post is short, so jump down to the resources to get started on your own!

Svelte is a front end framework promising less boilerplate code. Less is more, so less try it out.

1npx degit sveltejs/template 2048
2cd 2048
3yarn
4yarn dev

Once up and running, let's navigate to localhost:5000. Once there, let's add a 4x4 grid. When working with CSS grid, we set the container to display:grid, as well as other grid properties. Finally, let's set the properties of the cell (height, width, and how we will display the content). See the minimal example below:

1.grid {
2    display: grid;
3    grid-gap: 10px;
4    grid-template-columns: 1fr 1fr 1fr 1fr;
5    grid-auto-rows: 1fr;
6}
7
8.cell {
9    width: 48px;
10    height: 48px;
11    display: flex;
12    justify-content: center;
13    align-items: center;
14}

Once the layout is setup, we write some code to handle the key/touch events since we want to support both mobile and desktop. We use the swiped-events repo to detect mobile swipes. Neat...

1const mobileKeyMap = {
2    'swiped-up': 'ArrowUp',
3    'swiped-down': 'ArrowDown',
4    'swiped-left': 'ArrowLeft',
5    'swiped-right': 'ArrowRight',
6}
7const mobileKeys = Object.keys(mobileKeyMap);
8
9const setupMobile = () => {
10    mobileKeys.forEach(eventName => {
11        document.addEventListener(eventName, (event) => {
12            event.key = mobileKeyMap[event.type];
13            handleInput(event);
14        });
15    })
16}
17setupMobile();
18const handleInput = (event) => {
19    switch (event.key) {
20    case 'ArrowUp':
21    case 'ArrowDown':
22    case 'ArrowLeft':
23    case 'ArrowRight':
24        game.handleInput(event.key);
25        game.grid = game.grid;
26        return;
27    default:
28        return;
29    }
30};

And with a lot of help from Rosetta Code, we create a separate game.js class to handle the game logic. Finally, we create a separate svelte component to make it rain when the player wins:

Resources

Quaerite Et Invenietis