ccccchanges

Animation.js

@@ -1,8 +1,4 @@
 class Animation {
-  constructor() {
-
-  }
-
   animate(draw) {
     return new Promise((resolve, reject) => {
       var animation = () => {
@@ -17,8 +13,4 @@ class Animation {
       requestAnimationFrame(animation);
     });
   }
-
-  clear() {
-    /* noop */
-  }
 }

Egg.js

@@ -6,35 +6,47 @@ class Egg {
     this.sprite.height = 120;
     this.sprite.width = 900;
     this.sprite.frameCount = 5;
+    this.sprite.frameHeight = 120;
     this.sprite.frameWidth = this.sprite.width / this.sprite.frameCount;
     this.sprite.startFrame = 2;
-    this.currentFrame = 2;
-    this.increment = 1;
 
+    this.clear = this.clear.bind(this);
     this.bounce = this.bounce.bind(this);
+    this.hatch = this.hatch.bind(this);
+  }
+
+  clear() {
+    const {
+      frameWidth,
+      frameHeight,
+    } = this.sprite;
+
+    context.clearRect(0, 0, frameWidth, frameHeight);
   }
 
   bounce(maxBounce) {
     const {
       frameCount,
       frameWidth,
-      height,
+      frameHeight,
       image,
       startFrame,
     } = this.sprite;
 
     var bounce = 0;
+    var increment = 1;
+    var currentFrame = 2
 
     return (resolve) => {
-      context.clearRect(0, 0, frameWidth, height);
-      context.drawImage(image, this.currentFrame * frameWidth, 0, frameWidth, height, 0, 0, frameWidth, height);
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
 
-      if (this.currentFrame === frameCount - 1) {
-        this.increment = -1;
+      if (currentFrame === frameCount - 1) {
+        increment = -1;
       }
 
-      if (this.currentFrame === startFrame) {
-        this.increment = 1;
+      if (currentFrame === startFrame) {
+        increment = 1;
         bounce++;
       }
 
@@ -43,44 +55,31 @@ class Egg {
         return true;
       }
 
-      this.currentFrame += this.increment;
+      currentFrame += increment;
     };
   }
 
-  hatch(resolve) {
+  hatch() {
     const {
       frameCount,
       frameWidth,
-      height,
+      frameHeight,
       image,
       startFrame,
     } = this.sprite;
 
+    var currentFrame = 2
+
     return (resolve) => {
-      context.clearRect(0, 0, frameWidth, height);
-      context.drawImage(image, this.currentFrame * frameWidth, 0, frameWidth, height, 0, 0, frameWidth, height);
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
 
-      if (this.currentFrame === 0) {
+      if (currentFrame === 0) {
         resolve();
         return true;
       }
 
-      this.currentFrame--;
+      currentFrame--;
     };
   }
 }
-
-var { animate } = new Animation();
-var egg = new Egg();
-// Get canvas
-var canvas = document.querySelector('.animation');
-canvas.width = 180;
-canvas.height = 120;
-var context = canvas.getContext('2d');
-var chooseButton = document.querySelector('.choose');
-
-chooseButton.addEventListener('click', () => {
-  animate(egg.bounce(3)).then(() => {
-    animate(egg.hatch())
-  });
-});

Game.js

@@ -0,0 +1,24 @@
+var { animate } = new Animation();
+var egg = new Egg();
+var tamagotchi = new Tamagotchi();
+// Get canvas
+var canvas = document.querySelector('.animation');
+canvas.width = 180;
+canvas.height = 120;
+var context = canvas.getContext('2d');
+var chooseButton = document.querySelector('.choose');
+
+chooseButton.addEventListener('click', () => {
+  animate(egg.bounce(3))
+    .then(() => {
+      console.log('Bouncing complete!');
+      console.log('Time to hatch!');
+      return animate(egg.hatch());
+    }).then(() => {
+      egg.clear();
+      canvas.width = tamagotchi.sprite.frameHeight;
+      canvas.height = tamagotchi.sprite.frameWidth;
+      console.log('BABY TAMAGOTCHI!')
+      animate(tamagotchi.bounce());
+    });
+});

Tamagotchi.js

@@ -0,0 +1,88 @@
+class Tamagotchi {
+  constructor() {
+    this.sprite = {};
+    this.sprite.image = new Image();
+    this.sprite.image.src = 'images/TamagotchiSprite.png';
+    this.sprite.height = 480;
+    this.sprite.width = 360;
+    this.sprite.rows = 4;
+    this.sprite.columns = 3;
+    this.sprite.frameCount = 3;
+    this.sprite.frameWidth = this.sprite.width / this.sprite.columns;
+    this.sprite.frameHeight = this.sprite.height / this.sprite.rows;
+
+    this.sprite.dislike = 0;
+    this.sprite.jump = 1;
+    this.sprite.eat = 2;
+    this.sprite.chill = 3;
+
+    this.eat = 0;
+    this.maxEat = 10;
+  }
+
+  clear() {
+    const {
+      frameWidth,
+      frameHeight,
+    } = this.sprite;
+
+    context.clearRect(0, 0, frameWidth, frameHeight);
+  }
+
+  dislike() {
+
+  }
+
+  jump() {
+
+  }
+
+  eat() {
+
+  }
+
+  bounce() {
+    const {
+      chill,
+      image,
+      frameCount,
+      frameHeight,
+      frameWidth,
+    } = this.sprite;
+
+    var bounce = 0;
+    var maxBounce = 2;
+    var increment = 1;
+    var currentFrame = 0;
+
+    return (resolve) => {
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, chill * frameHeight, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
+
+      if (currentFrame === frameCount - 1) {
+        increment = -1;
+      }
+
+      if (currentFrame === 0) {
+        increment = 1;
+        bounce++;
+      }
+
+      if (bounce == maxBounce) {
+        resolve();
+        return true;
+      }
+
+      currentFrame += increment;
+    };
+
+
+    // return (resolve) => {
+      // goes up & down
+      // moves left
+      // goes up & down
+      // moves right
+      // repeat
+    // };
+  }
+}

index.html

@@ -21,7 +21,9 @@
       <canvas class="animation"></canvas>
     </div>
   </div>
+  <script src="Animation.js"></script>
+  <script src="Tamagotchi.js"></script>
   <script src="Egg.js"></script>
-  <!-- <script src="sprite-animation-demo.js"></script> -->
+  <script src="Game.js"></script>
 </body>
 </html>

styles.css

@@ -46,6 +46,8 @@
 }
 
 .animation {
+  left: 0;
+  right: 0;
   bottom: 4%;
-  left: 20%;
+  margin: 0 auto;
 }