Added sprites to the bricks and touch control

assets/js/Board.js

@@ -8,7 +8,9 @@ class Board {
         this.y = ctx.canvas.height / 2 - 48;
 
         this.w = this.ctx.canvas.width;
-        this.h = this.ctx.canvas.height
+        this.h = this.ctx.canvas.height;
+
+        this.img = resources.get('bg01');
     }
 
     run() {
@@ -45,7 +47,8 @@ class Board {
     loop() {
         if (this.stop) return;
 
-        this.ctx.clearRect(0, 0, this.w, this.h);
+        // this.ctx.clearRect(0, 0, this.w, this.h);
+        this.ctx.drawImage(this.img, 0, 0);
         this.update();
         this.requestID = requestAnimationFrame( ()=>this.loop() );
     }

assets/js/Bricks.js

@@ -7,15 +7,16 @@ class Brick {
         this.vspace = 2;
         this.hspace = 2;
 
-        this.w = (360 / 8) - this.hspace;
+        this.w = (32) - this.hspace;
-        this.h = (20) - this.vspace;
+        this.h = (32) - this.vspace;
-        this.x = (this.w + this.hspace) * column;
+        this.x = 2 + (this.w + this.hspace) * column;
         this.y = 80 + (this.h + this.vspace) * row;
 
+        this.img = [];
         switch (type) {
-            case 2: this.lives = 2; break;
+            case 2: this.lives = 2; this.img = [ resources.get('b31'),resources.get('b32') ]; break;
-            case 3: this.lives = 3; break;
+            case 3: this.lives = 3; this.img = [ resources.get('b31'),resources.get('b32'), resources.get('b33') ]; break;
-            default: this.lives = 1; break;
+            default: this.lives = 1; this.img = [ resources.get('b31') ]; break;
         }
     }
 
@@ -28,16 +29,13 @@ class Brick {
 
         switch (this.lives) {
             case 1:
-                ctx.fillStyle = 'blue';
+                ctx.drawImage(this.img[0], this.x + 1, this.y);
-                ctx.fillRect(this.x + 1, this.y, this.w, this.h);
                 break;
             case 2:
-                ctx.fillStyle = 'orange';
+                ctx.drawImage(this.img[1], this.x + 1, this.y);
-                ctx.fillRect(this.x + 1, this.y, this.w, this.h);
                 break;
             case 3:
-                ctx.fillStyle = 'red';
+                ctx.drawImage(this.img[2], this.x + 1, this.y);
-                ctx.fillRect(this.x + 1, this.y, this.w, this.h);
                 break;
         }
         return true;

assets/js/Keyboard.js

@@ -5,6 +5,11 @@ class Keyboard {
 
         window.addEventListener('keydown', e => this.onKeydown(e));
         window.addEventListener('keyup', e => this.onKeyup(e));
+
+        window.addEventListener('touchstart', e => this.onTouchStart(e));
+        window.addEventListener('touchmove', e => this.onTouchMove(e));
+        window.addEventListener('touchend', e => this.onTouchEnd(e));
+
     }
 
     setKeydown(fn) {
@@ -21,4 +26,47 @@ class Keyboard {
     onKeyup(event) {
         delete this._pressed[event.code];
     }
+
+
+    onTouchStart(e) {
+        var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
+        this.touchX = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
+        this.touchY = parseInt(touchobj.clientY) // get x position of touch point relative to left edge of browser
+        window.dispatchEvent(new KeyboardEvent('keydown',{'code':'Space'}));
+        window.dispatchEvent(new KeyboardEvent('keydown',{'code':'KeyN'}));
+        e.preventDefault()
+    }
+    onTouchMove(e) {
+        var touchobj = e.changedTouches[0] // reference first touch point for this event
+        var dist = parseInt(touchobj.clientX) - this.touchX
+        if (dist>0) {
+            delete this._pressed['ArrowLeft'];
+            this._pressed['ArrowRight'] = true;
+        } else if (dist<0) {
+            delete this._pressed['ArrowRight'];
+            this._pressed['ArrowLeft'] = true;
+        } else {
+            delete this._pressed['ArrowLeft'];
+            delete this._pressed['ArrowRight'];
+        }
+
+        dist = parseInt(touchobj.clientY) - this.touchY
+        if (dist>0) {
+            delete this._pressed['ArrowUp'];
+            this._pressed['ArrowDown'] = true;
+        } else if (dist<0) {
+            delete this._pressed['ArrowDown'];
+            this._pressed['ArrowUp'] = true;
+        } else {
+            delete this._pressed['ArrowUp'];
+            delete this._pressed['ArrowDown'];
+        }
+
+        e.preventDefault()
+    }
+    onTouchEnd(e) {
+        this._pressed = {}; 
+    }
+
+   
 }

assets/js/Levels.js

@@ -4,28 +4,28 @@ class Levels {
         switch (+lvl) {
             case 1:
                 map = [].concat(
-                                this.row(0, [1, 0, 1, 0, 0, 1, 0, 1]),
+                                this.row(0, [0, 0, 1, 0, 1, 0, 0, 1, 0, 1]),
-                                this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(1, [0, 0, 1, 1, 1, 1, 1, 1, 1, 1]),
-                                this.row(3, [0, 1, 1, 1, 1, 1, 1, 0]),
+                                this.row(3, [0, 0, 0, 1, 1, 1, 1, 1, 1, 0]),
-                                this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
+                                this.row(4, [0, 0, 1, 1, 1, 1, 1, 1, 1, 1])
                                 );
                 break;
             case 2:
                 map = [].concat(
-                                this.row(0, [3, 3, 3, 0, 3, 3, 0, 0]),
+                                this.row(0, [0, 0, 3, 3, 3, 0, 3, 3, 0, 0]),
-                                this.row(1, [0, 0, 3, 0, 3, 0, 3, 0]),
+                                this.row(1, [0, 0, 0, 0, 3, 0, 3, 0, 3, 0]),
-                                this.row(2, [0, 0, 3, 0, 3, 0, 3, 0]),
+                                this.row(2, [0, 0, 0, 0, 3, 0, 3, 0, 3, 0]),
-                                this.row(3, [3, 0, 3, 0, 3, 0, 3, 0]),
+                                this.row(3, [0, 0, 3, 0, 3, 0, 3, 0, 3, 0]),
-                                this.row(4, [0, 3, 3, 0, 3, 3, 0, 0])
+                                this.row(4, [0, 0, 0, 3, 3, 0, 3, 3, 0, 0])
                                 );
                 break;
             default:
                 map = [].concat(
-                                this.row(0, [1, 3, 1, 3, 1, 3, 1, 3]),
+                                this.row(0, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2]),
-                                this.row(1, [3, 1, 3, 1, 3, 1, 3, 1]),
+                                this.row(1, [2, 3, 1, 3, 1, 3, 1, 3, 1, 3, 2]),
-                                this.row(2, [1, 3, 1, 3, 1, 3, 1, 3]),
+                                this.row(2, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2]),
-                                this.row(3, [3, 1, 3, 1, 3, 1, 3, 1]),
+                                this.row(3, [2, 3, 1, 3, 1, 3, 1, 3, 1, 3, 2]),
-                                this.row(4, [1, 3, 1, 3, 1, 3, 1, 3])
+                                this.row(4, [2, 1, 3, 1, 3, 1, 3, 1, 3, 1, 2])
                                 );
                 break;
         }

assets/js/Resources.js

@@ -4,12 +4,16 @@ class Resources {
         this.loading = 0;
         this.resources = {};
 
+        this.load('bg01', 'jpg');
         this.load('ball');
         this.load('bar');
+        this.load('b31');
+        this.load('b32');
+        this.load('b33');
     }
 
 
-    load(res) {
+    load(res, ext='png') {
         let _this = this;
         this.total++;
         this.loading++;
@@ -17,7 +21,7 @@ class Resources {
         this.resources[res].onload = function () {
             _this.loading--;
         }
-        this.resources[res].src = 'assets/imgs/' + res + '.png';
+        this.resources[res].src = 'assets/imgs/' + res + '.'+ext;
     }
 
     get(res) {