Skip to content

WObject is a minimalist TypeScript/JavaScript library built on Canvas, adhering to object-oriented principles, enabling the creation of 2D games.

License

Notifications You must be signed in to change notification settings

ZviBerger/wobject

Repository files navigation

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!

About

WObject is a minimalist TypeScript/JavaScript library built on Canvas, adhering to object-oriented principles, enabling the creation of 2D games.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published