2048 as a WebComponent.
npm install 2048-webcomponent



This is 2048 as a WebComponent. Once you integrate it as described further, the game just follows the standard rules. To make a move, just use the arrow keys or swipe.
Install the package via npm or yarn and deliver the script to the user.
This can be done via import, require or just inserting a script tag.
``shell`
npm i 2048-webcomponent
`shell`
yarn add 2048-webcomponent
| Param | Type | Description | Default |
| -------------------------- | -------- | -------------------------------------------------------------------------------- | ------- |
| columns | number | Amount of columns of the board. | 4 |rows
| | number | Amount of rows of the board. | 4 |swipe-distance-threshold
| | number | Amount of pixels required to trigger a swipe. | 50 |restart-selector
| | string | If present, attaches a click event listener to the element to trigger a restart. | |
By default, each event contains the current game state in event.detail.game. To discourage cheating, no events should be logged in the browser console.detail
| Name | Type | Cancelable | Description | |2048:game-won
| ---------------- | --------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------ |
| | GameWonEvent | :x: | User just won the game | positions: Positions current game state |2048:game-lost
| | GameLostEvent | :x: | User just lost the game | positions: Positions current game state |2048:move
| | MoveEvent | :white_check_mark: | User made a move | positions: Positions current game statedirection: Direction direction of the move |2048:score
| | ScoreEvent | :x: | Score has been updated | positions: Positions current game stateoldScore: number \| undefined old scoredelta: number \| undefined difference between old and new scorenewScore: number current score |
Just a basic 9x9 / 10 Mines 2048 game. Further examples can be combined.
`html
`
Define your own custom tag name
`html
`
Provide a selector where a "click"-event will be attached to, to restart the game.
`html
`
Write custom logic to restart the game.
`html
`
Attach an EventListener for the win/lose events.
`html
`
Of course you can provide different configurations for the game.
`html
`
Try it out at CodePen.
The whole package is written in TypeScript and therefore provides a strongly typed system via the core export of the package:
`html`
`typescript
// some-file.ts
import '2048-webcomponent/custom-element';
import { FieldInteractionEvent, FieldInteractionType } from '2048-webcomponent/core';
import type { Game } from '2048-webcomponent/core';
const game = document.querySelector('#game') as Game;
game.addEventListener('2048:field-interaction', (event: FieldInteractionEvent) => {
const { interaction } = event.detail;
switch (interaction.type) {
case FieldInteractionType.Unveiled:
console.log('Revealed field value:', interaction.value);
break;
case FieldInteractionType.FlagAction:
case FieldInteractionType.QuestionMarkAction:
console.log('Performed action:', interaction.action);
break;
}
});
`
The engine can be used as a standalone library (commonjs and esm) via the engine export of the package. This enables the usage of the engine in every application (server- or client-side).
`javascript
import { Direction } from '2048-webcomponent/core';
import { Engine } from '2048-webcomponent/engine';
const engine = new Engine();
engine.createBoard(3, 3);
engine.move(Direction.Up);
if (engine.isGameOver) {
// Restarts the game with the initial configuration
engine.restart();
}
`
`javascript
const { Engine } = require('2048-webcomponent/engine');
const engine = new Engine();
// ...
``