Tagless UIs. Turn <> into ><

Typescript, HTML Canvas-based library for building UI apps with no tags.

⭐️ Features

• TypeScript
• OOP
• 2D Game Engine
• No Dependencies
• HTML Canvas
• Containers
• Movements methods
• Auto Collision system
• Extendable Shapes components
• Buttons system, Images, Sprite Animations ...

📦 Installation

npm

npm i wobject

import WO from 'wobject'

💎 How to use

//create the main app root
const app = new WO.Wobject.WOApp('myCanvas', 50);

//create a rectangle
let rect = new WO.Shapes.WORect(0, 0, 50, 50, '#b30');

// adding something to the tree (Rectangle wobject)
app.addElement(rect);

app.run();

💣 Movements and Containers example

import WO from 'wobject';
const app = new WO.Wobject.WOApp('myCanvas', 10);

let rect = new WO.Shapes.WORect(0, 0, 50, 50, WO.Utils.getRandomColor());
let rect1 = new WO.Shapes.WORect(0, 0, 50, 50, WO.Utils.getRandomColor());
let rect2 = new WO.Shapes.WORect(0, 0, 50, 50, WO.Utils.getRandomColor());
let rect3 = new WO.Shapes.WORect(0, 0, 50, 50, WO.Utils.getRandomColor());
let rect4 = new WO.Shapes.WORect(0, 0, 50, 50, WO.Utils.getRandomColor());

const container = new WO.Containers.WOHorizontalContainer(
   50,
   50,
   500,
   50,
   WO.Utils.getRandomColor()
);
container.setMargin(40, 0, 0, 0);

container.addElement(rect);
container.addElement(rect1);
container.addElement(rect2);
container.addElement(rect3);
container.addElement(rect4);
container.setMotionMethod(WO.Movements.moveInCircle(1, 0.07));

rect.setMotionMethod(WO.Movements.moveInCircle(6, 0.07));
rect1.setMotionMethod(WO.Movements.moveInCircle(5, 0.07));
rect2.setMotionMethod(WO.Movements.moveInCircle(4, 0.07));
rect3.setMotionMethod(WO.Movements.moveInCircle(3, 0.07));
rect4.setMotionMethod(WO.Movements.moveInCircle(2, 0.07));

app.addElement(container);
app.run();

Play with the code

🎮 What can you develop with WObject?

Check out these games that entirely have been build with WObject:

Play the SpaceShip Game

Play the Snake Game

To the Source Code

🚀 Run the examples

npm

npm run-script start

In the browser go to:

/spaceship /snake

✅ Contributes are welcomed!