changed ball and bar for a sprite

assets/js/Board.js

@@ -0,0 +1,56 @@
+class Board {
+    constructor(ctx, key) {
+        this.controls = {};
+        this.key = key;
+        this.stop = false;
+        this.ctx = ctx;
+        this.x = ctx.canvas.width;
+        this.y = ctx.canvas.height / 2 - 48;
+
+        this.w = this.ctx.canvas.width;
+        this.h = this.ctx.canvas.height
+    }
+
+    run() {
+        let _this = this;
+        this.stop = false;
+        this.key.setKeydown( e => {
+            let code = e.code;
+            for(var key in this.controls) {
+                if(key==code) this.controls[key]();
+            }
+        } );
+        return new Promise((resolve, reject) => {
+            _this.resolve = resolve;
+            _this.reject = reject;
+            _this.loop();
+        }
+        );
+    }
+
+    next(nextStage) {
+        this.loopStop();
+        this.resolve(nextStage);
+    }
+
+    loopStop() {
+        this.stop = true;
+        if (this.requestID) {
+            cancelAnimationFrame(this.requestID);
+            this.requestID = null;
+        }
+        this.ctx.clearRect(0, 0, this.w, this.h);
+    }
+
+    loop() {
+        if (this.stop) return;
+
+        this.ctx.clearRect(0, 0, this.w, this.h);
+        this.update();
+        this.requestID = requestAnimationFrame( ()=>this.loop() );
+    }
+
+    update() {
+
+    }
+}