/Hyrdaboo2D

A lightweight HTML5 Canvas renderer JavaScript library for making games. Though it probably won't work and needs a lot of optimization still it was fun to make

Primary LanguageJavaScript

Hyrdaboo2D

A lightweight HTML5 Canvas JavaScript library

Getting Started

main.js

//variables
var obj;

// startGame is called once
function startGame() {
obj = new component(30, 30, "red", 0, 0);
// start the engine
myGameArea.start();
} 

// updateGameArea is called once per frame
function updateGameArea() {

// clear canvas every frame
myGameArea.clear();

obj.newPos();

obj.update();
}

index.html

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Hyrdaboo2D demo</title>
</head>
<style>
html {
user-select: none;
}
canvas {
background: #303030;
position: fixed;
width:100%;
height:100%;
top:0;
left:0;
}
</style>
  <body>
 <!-- use this link to access the library internally -->
   <script src="https://raw.githack.com/Hyrdaboo/Hyrdaboo2D/main/Hyrdaboo2D.min.js"></script>
   <script src="main.js"></script>
  </body>
</html>

References

Essentials

  1. myGameArea.start() – Starts the engine
  2. myGameArea.clear() - Clears canvas per frame
  3. myGameArea.stop() - clears Interval
  4. component(width, height, "color", x, y, type) - create a new game object
    • type = "textureMaterial" - add texture on an object (write image src instead of color parameter)
    • type = "circle" - create circle shaped game object
  6. obj.color = color value - change color of an object
  7. obj.strokeColor = color value - change border color of a circle

user interaction

  1. obj.touchTrace = bool - touchtrace enabled/disabled (for touch devices )
  2. obj.followMouse = bool - move with cursor enabled/disabled
  3. setVibration(int) - vibrate
  4. viewFullscreen(orientation) - enter full-screen mode
  5. obj.clicked() - detect if object is clicked

camera

  1. camera.x = int - camera x
  2. camera.y = int - camera y
  3. scale = int - zoom in/out (in development)

physics

  1. obj.speedX = int - set x velocity
  2. obj.speedY = int - set y velocity
  3. obj.acceleration = int - set acceleration
  4. obj.addForce = int - add force to an object
  5. obj.gravity = int - set gravity
  6. obj.gravitySpeed = int - set gravity acceleration index
  7. obj.Mu = int - set roughness of a surface
  8. obj.bounce = int - set bounciness of an object
  9. obj.mass = int - set Mass
  10. obj.angle = int - angle
  11. obj.rotatable = bool - set rotatable

collisions

  1. obj.boxColliding(otherobj) - box collision
  2. obj.crashWith(otherobj) - box collision2
  3. obj.circleColliding(otherobj) - circle collision
  4. obj.boxCircleColliding(otherobj) - circle with box collision
  5. obj.hitCanvasEdge() - hit canvas(viewport) borders