feat: init car [#1]

docs/js/app.js

@@ -2,30 +2,57 @@
  * @description App
  * @author      C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
  */
+import Car from './core/car.js'
+
 export default class App {
   /**
-   * @type {HTMLCanvasElement}
+   * @type {Car}
    */
-  canvas
+  car
 
   /**
    * @type {CanvasRenderingContext2D}
    */
   context
 
+  /**
+   * @type {HTMLCanvasElement}
+   */
+  canvas
+
   /**
    * Constructor
    */
-  constructor() {
+  constructor(car = new Car(0, 0, 50, 100)) {
     this.#initCanvas()
+    this.#initCar(car)
   }
 
   /**
    * Run
    *
    * @returns {void}
    */
-  run() {}
+  run(t = 0) {
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+    this.car.update(t)
+    this.car.draw(this.context)
+
+    requestAnimationFrame(this.run.bind(this))
+  }
+
+  /**
+   * Init car
+   *
+   * @param   {Car}  car
+   * @returns {void}
+   */
+  #initCar(car) {
+    this.car = car
+    this.car.centerX = this.canvas.width / 2
+    this.car.centerY = this.canvas.height / 2
+  }
 
   /**
    * Init canvas

docs/js/core/car.js

@@ -0,0 +1,70 @@
+/**
+ * @description Car
+ * @author      C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
+ */
+export default class Car {
+  /**
+   * @type {number}
+   */
+  centerX
+
+  /**
+   * @type {number}
+   */
+  centerY
+
+  /**
+   * @type {number}
+   */
+  width
+
+  /**
+   * @type {number}
+   */
+  height
+
+  /**
+   * Constructor
+   *
+   * @param {number} centerX
+   * @param {number} centerY
+   * @param {number} width
+   * @param {number} height
+   */
+  constructor(centerX, centerY, width, height) {
+    this.centerX = centerX
+    this.centerY = centerY
+    this.width = width
+    this.height = height
+  }
+
+  /**
+   * Update car
+   *
+   * @param   {number} t
+   * @returns {void}
+   */
+  update(t) {
+    console.log(t)
+  }
+
+  /**
+   * Draw car
+   *
+   * @param   {CanvasRenderingContext2D} context
+   * @returns {void}
+   * @note    Just in case, it is used `beginPath()`, but I think that
+   *          this method is only necessary when it is drawn a path using
+   *          drawing commands like `lineTo()`, `arc()`, etc.
+   */
+  draw(context) {
+    context.beginPath()
+    context.rect(
+      this.centerX - this.width / 2,
+      this.centerY - this.height / 2,
+      this.width,
+      this.height,
+    )
+    context.fill()
+  }
+}