— 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 20482cd 20483yarn4yarn 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:
Quaerite Et Invenietis