diff --git a/assets/imgs/ball.png b/assets/imgs/ball.png
new file mode 100644
index 0000000..f955a06
Binary files /dev/null and b/assets/imgs/ball.png differ
diff --git a/assets/imgs/bar.png b/assets/imgs/bar.png
new file mode 100644
index 0000000..04f6ddc
Binary files /dev/null and b/assets/imgs/bar.png differ
diff --git a/assets/imgs/breakout_sprites.png b/assets/imgs/breakout_sprites.png
new file mode 100644
index 0000000..befac47
Binary files /dev/null and b/assets/imgs/breakout_sprites.png differ
diff --git a/Ball.js b/assets/js/Ball.js
similarity index 82%
rename from Ball.js
rename to assets/js/Ball.js
index 6df6b35..54fc114 100644
--- a/Ball.js
+++ b/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;
}
diff --git a/Bar.js b/assets/js/Bar.js
similarity index 91%
rename from Bar.js
rename to assets/js/Bar.js
index 894ba03..5304bd9 100644
--- a/Bar.js
+++ b/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);
}
}
}
diff --git a/Board.js b/assets/js/Board.js
similarity index 100%
rename from Board.js
rename to assets/js/Board.js
diff --git a/Bricks.js b/assets/js/Bricks.js
similarity index 100%
rename from Bricks.js
rename to assets/js/Bricks.js
diff --git a/GameIntro.js b/assets/js/GameIntro.js
similarity index 100%
rename from GameIntro.js
rename to assets/js/GameIntro.js
diff --git a/GameOver.js b/assets/js/GameOver.js
similarity index 100%
rename from GameOver.js
rename to assets/js/GameOver.js
diff --git a/GamePlay.js b/assets/js/GamePlay.js
similarity index 100%
rename from GamePlay.js
rename to assets/js/GamePlay.js
diff --git a/Keyboard.js b/assets/js/Keyboard.js
similarity index 100%
rename from Keyboard.js
rename to assets/js/Keyboard.js
diff --git a/Levels.js b/assets/js/Levels.js
similarity index 100%
rename from Levels.js
rename to assets/js/Levels.js
diff --git a/Lives.js b/assets/js/Lives.js
similarity index 100%
rename from Lives.js
rename to assets/js/Lives.js
diff --git a/assets/js/Resources.js b/assets/js/Resources.js
new file mode 100644
index 0000000..1e45302
--- /dev/null
+++ b/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];
+ }
+};
\ No newline at end of file
diff --git a/Score.js b/assets/js/Score.js
similarity index 100%
rename from Score.js
rename to assets/js/Score.js
diff --git a/index.js b/assets/js/index.js
similarity index 96%
rename from index.js
rename to assets/js/index.js
index 5199fa9..e0494f3 100644
--- a/index.js
+++ b/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
diff --git a/index.html b/index.html
index 81d8050..6de0193 100644
--- a/index.html
+++ b/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>