View difference between Paste ID: eM2tvdaG and L8Aw0WYm

 /**
  * create a new snowball
  *
  * @param x - int
  * @param y - int
  */
 xmas.Entity.Image.Snowball = function(x, y) {
 
     this.src          = 'snowball';
 
     // setting an offset to the image to have the ball spawn in the middle of the mouse click
     this.offsetX      = 0;
     this.offsetY      = 0;
 
     // use radius to check for collision later
     this.r            = 0;
 
     // actual draw points - should include some kind of offset calculation
     this.drawX        = 0;
     this.drawY        = 0;
 
     this.scaleX       = 1;
     this.scaleY       = 1;
 
     this.z            = 0;
     this.vx           = 0;
     this.vy           = 3;
-    this.vz           = 5;
+    this.vz           = 1;
 
     this.gravity      = - 0.097;
 
     this._constructor(this.src, x, y, 1);
 
     this.update = function() {
 
       this.x  += this.vx;
       this.y  += this.vy;
       this.z  += this.vz;
 
       this.vy -= this.gravity;
 
       // need to check if on the ground later
       // todo
 
       // did I hit something somewhere "back" in the environment..?
       // todo
       // this.r   = ?
 
 //      this.vx *= 0.99;
 //      this.vy *= 0.99;
 //      this.vz *= 0.99;
 
     };
 
 
     this.onImgLoaded = function() {
       this.img.inViewport   = true;
       this.img.widthScaled  = this.img.width;
       this.img.heightScaled = this.img.height;
 
       // set radius for later collision detection because the image is a ball :)
       this.r                =   this.img.widthScaled/2;
 
       // update coords for the offset to have the ball spawn at the center of the mouse position
       this.offsetX          = - this.img.widthScaled/2;
       this.offsetY          = - this.img.heightScaled/2;
       this.x               +=   this.offsetX;
       this.y               +=   this.offsetY;
     };
 
     this.debug = function() {
       console.log("coord", this.x, this.y, this.z);
       console.log("pos  ", this.drawX, this.drawY);
       console.log("scale", this.scaleX, this.scaleY);
       console.log("imgO ", this.img.width, this.img.height)
       console.log("img  ", this.img.widthScaled, this.img.heightScaled);
       console.log("---------------------------------");
     };
 
     /**
      * renders the image
      */
     this.render = function() {
       if(this.isVisible() && this.img.isLoaded && this.img.inViewport) {
 
 
         this.drawX  = this.x / this.z;
         this.drawY  = this.y / this.z;
         // using this instead will simply drop the ball
         //this.drawX  = this.x;
         //this.drawY  = this.y;
 
         // scaleX and scaleY becoming *very* low - about 10^(-100) - so no scaling is happening
         this.scaleX = this.scaleX / this.z;
         this.scaleY = this.scaleY / this.z;
 
-        this.img.widthScaled  = this.img.width - this.img.width * this.scaleX;
+        this.img.widthScaled  = this.img.width * this.scaleX;
-        this.img.heightScaled = this.img.width - this.img.width * this.scaleY;
+        this.img.heightScaled = this.img.width * this.scaleY;
 
         //this.debug();
 
 //        xmas.Draw.image(this.img, this.drawX, this.drawY, this.img.widthScaled, this.img.heightScaled);
 
         xmas.ctxPreRender.drawImage(this.img, this.drawX, this.drawY, this.img.widthScaled, this.img.heightScaled);
 
       }
     };
 
 
 }
 
 
 
 /**
  * create a new image
  *
  * @param src - string
  * @param x - int
  * @param y - int
  * @param opacity - float
  */
 xmas.Entity.Image = function(src, x, y, opacity) {
 
     this.type         = 'image';
     this.group        = null;
     this.isLoaded     = false;
     this.img          = null;
 
     var self          = this;
 
     this._constructor  = function(src, x, y, opacity) {
 
       this.x            = x;              // the x coordinate
       this.y            = y;              // the y coordinate
       this.opacity      = opacity || 1;   // initial opacity; the dot will fade out
       // create image
       this.img          = new Image();
       this.img.opacity  = this.opacity;
 
       this.loadImage(src);
 
     };
 
     this.setOpacity  = function(opacity) {
       this.opacity     = opacity;
       this.img.opacity = opacity;
     };
 
     /**
      * loads an image
      *
      * @param src - string
      */
     this.loadImage = function(src) {
 
       var self            = this;
       this.img.isLoaded   = false;
       this.img.inViewport = false;
 
       this.img.onload   = function() {
         this.isLoaded   = true;
         this.calculateCenter();
         self.isLoaded   = true;
         self.onImgLoaded();
       }
 
       var source        = xmas.Resources.get(this.type, src);
 
       if(source) {
         this.img.src      = source;
       }
     };
 
     this.init   = function() {
       // nothing to do here
     };
 
     this.update = function() {
       // nothing to do here
     };
 
     this.onImgLoaded = function() {
       // do when image is loaded, nothing to do here
     }
 
     /**
      * when changing condition
      */
     this.onChangeCondition = function() {
       this.setImageSpriteByCondition(this.getCondition());
     };
 
     /**
      * set the image sprite by status, assuming all sprites have equal withs
      * and are set in one row
      *
      * sx = 0      sx = w      sx = w*2    sx = w*3
      * |-----------|-----------|-----------|-----------|
      * |  Default  |   Hover   |  Active   | InActive  |
      * |-----------|-----------|-----------|-----------|
      *
      * @param condition - int
      */
     this.setImageSpriteByCondition = function(condition) {
       if(this.img && this.img.isLoaded) {
 
         this.sy = 0;
         this.sw = this.w;
         this.sh = this.h;
 
         switch(condition) {
           case xmas.Entity.CONDITION._default:
             this.sx = 0;
           break;
           case xmas.Entity.CONDITION._hover:
             this.sx = this.w;
           break;
           case xmas.Entity.CONDITION._active:
             this.sx = this.w * 2;
           break;
           case xmas.Entity.CONDITION._inactive:
             this.sx = this.w * 3;
           break;
         }
 
       }
     };
 
     /**
      * renders the image
      * @param dw - int new width (optional)
      * @param dh - int new height (optional)
      */
     this.render = function(dw, dh) {
       if(this.isVisible() && this.img.isLoaded && this.img.inViewport) {
         xmas.Draw.image(this.img, this.x, this.y, dw, dh);
       }
     };
 
     this._constructor(src, x, y, opacity);
 
 }
 
 
 // inheritance
 xmas.Entity.Image.prototype   = new xmas.Entity();
 xmas.Entity.Image.constructor = xmas.Entity.Image;
 xmas.Entity.Image.Snowball.prototype   = new xmas.Entity.Image();
 xmas.Entity.Image.Snowball.constructor = xmas.Entity.Image.Snowball;