changed ball and bar for a sprite

assets/js/Ball.js

@@ -1,6 +1,6 @@
 class Ball {
     constructor() {
-        this.size = 10;
+        this.size = 20;
 
 
         this.moving = false;
@@ -16,6 +16,8 @@ class Ball {
         this.angleBL = this.g2r(180);
         this.angleTL = this.g2r(270);
 
+        this.img = resources.get('ball');
+
     }
 
     start() {
@@ -24,8 +26,8 @@ class Ball {
 
     update(ctx, x, y) {
         this.limits ??= {
-            l: this.size,
-            t: this.size,
+            l: 0,
+            t: 0,
             r: ctx.canvas.width - this.size,
             b: ctx.canvas.height
         };
@@ -38,6 +40,7 @@ class Ball {
     }
 
     draw(ctx) {
+        /*
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
         ctx.fillStyle = this.color;
@@ -45,8 +48,20 @@ class Ball {
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#003300';
         ctx.stroke();
+*/
+//        ctx.drawImage(this.img,0,0,this.img.width,this.img.height,this.x,this.y,20,20);
+        this.drawImage(ctx, this.img, this.x, this.y, this.size,this.size, this.angle);
     }
 
+    drawImage(ctx, image, x, y, w,h, rotation){
+        ctx.save();
+        ctx.translate(x+w/2, y+h/2);
+        ctx.rotate(rotation);
+        ctx.translate(-x-w/2, -y-h/2);
+        ctx.drawImage(image, x, y, w, h);
+        ctx.restore();        
+    }     
+
     move(x, y) {
         if (this.moving) {
             this.x += this.speed * Math.cos(this.angle);
@@ -60,8 +75,9 @@ class Ball {
 
             this.collideWalls(this.limits.l, this.limits.t, this.limits.r, this.limits.b);
         } else {
-            this.x = x;
-            this.y = y - this.size - 1;
+            this.x = x - 10;
+//            this.y = y - this.size - 1;
+            this.y = y - 20;
         }
         return true;
     }
@@ -132,7 +148,7 @@ class Ball {
                 this.bounceB(r);
                 return true;
             }
-            if ((this.y - this.size) <= y1 && (this.y - this.size) > y0) {
+            if (this.y <= y1 && this.y > y0) {
                 this.bounceT(r);
                 return true;
             }
@@ -143,7 +159,7 @@ class Ball {
                 this.bounceR(r);
                 return true;
             }
-            if ((this.x - this.size) <= x1 && (this.x - this.size) > x0) {
+            if (this.x <= x1 && this.x > x0) {
                 this.bounceL(r);
                 return true;
             }

assets/js/Bar.js

@@ -9,6 +9,7 @@ class Bar {
         this._speed = 0;    // Current Speed and direction
 
         this.xLimit = (ctx.canvas.width - this.w);
+        this.img = resources.get('bar');
         this.reset();
     }
 
@@ -49,8 +50,11 @@ class Bar {
     draw() {
         if (this.y != this._y) this.y--;
         if (this.y < this.ctx.canvas.height) {
+            /*
             this.ctx.fillStyle = 'black';
             this.ctx.fillRect(this.x, this.y, this.w, this.h);
+            */
+            this.ctx.drawImage(this.img,this.x,this.y);
         }
     }
 }

assets/js/Resources.js

@@ -0,0 +1,26 @@
+class Resources {
+    constructor() {
+        this.total = 0;
+        this.loading = 0;
+        this.resources = {};
+
+        this.load('ball');
+        this.load('bar');
+    }
+
+
+    load(res) {
+        let _this = this;
+        this.total++;
+        this.loading++;
+        this.resources[res] = new Image();
+        this.resources[res].onload = function () {
+            _this.loading--;
+        }
+        this.resources[res].src = 'assets/imgs/' + res + '.png';
+    }
+
+    get(res) {
+        return this.resources[res];
+    }
+};

assets/js/index.js

@@ -5,6 +5,9 @@
 document.addEventListener('DOMContentLoaded', init);
 
 
+let resources = new Resources();
+
+
 function init() {
     let ctx, canvas = document.createElement("canvas");
     canvas.width = 360; // window.innerWidth

index.html

@@ -9,24 +9,28 @@
             justify-content: center;
             display: flex;
         }
-        canvas { border:1px solid black; }
+
+        canvas {
+            border: 1px solid black;
+        }
     </style>
-<!-- ------------------------------------------ -->
-    <script src="Keyboard.js"></script>
-    <script src="Board.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="GameIntro.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="GameOver.js"></script>
-    <script src="Bricks.js"></script>
-    <script src="Levels.js"></script>
-    <script src="Score.js"></script>
-    <script src="Lives.js"></script>
-    <script src="Bar.js"></script>
-    <script src="Ball.js"></script>
-    <script src="GamePlay.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="index.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/Resources.js"></script>
+    <script src="assets/js/Keyboard.js"></script>
+    <script src="assets/js/Board.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/GameIntro.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/GameOver.js"></script>
+    <script src="assets/js/Bricks.js"></script>
+    <script src="assets/js/Levels.js"></script>
+    <script src="assets/js/Score.js"></script>
+    <script src="assets/js/Lives.js"></script>
+    <script src="assets/js/Bar.js"></script>
+    <script src="assets/js/Ball.js"></script>
+    <script src="assets/js/GamePlay.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/index.js"></script>
 </head>
 
 <body>