HTML5 Game 4 – Combine and Color

Brent Farris , up to this video is all I needed. Thanks for uploading these awesome videos. I've been working with XNA for almost a year now, and this was just perfect for making the jump over to Web-Based games. Thanks again. 🙂

When I run this code, I get all black boxes with a DOM error that states, "Expected color, but found 'rgba'. Here is the code (minus the CSS and HTML):
MAIN FILE
canvas.style.width = canvas.width + "px"; // For CSS
canvas.style.height = canvas.height + "px"; // For CSS
var ctx = canvas.getContext('2d');
var rect = new Rectangle (15, 15, 50, 50);
var rect2 = new Rectangle (80, 15, 50, 50);
var rect3 = new Rectangle (150, 15, 50, 50);
var rect4 = new Rectangle (25, 25, 50, 50);
/* rect.color = new Color (255, 0, 0, 1);
rect2.color = new Color (0, 0, 255, 1);
rect3.color = new Color (0, 255, 0, 1);
rect4.color = new Color (0, 0, 255, 0.5); */
rect.color = new colorClass (255, 0, 0, 1);
rect2.color = new colorClass (0, 0, 255, 1);
rect3.color = new colorClass (0, 255, 0, 1);
rect4.color = new colorClass (0, 0, 255, 0.5);
var movement = -1;

//////////////////////////////////////////////////////////
// SET INTERVAL Immediate Function
//////////////////////////////////////////////////////////
setInterval (function (){
 ctx.clearRect (0, 0, canvas.width, canvas.height);
  rect.Draw (ctx);
 rect2.Draw (ctx);
 rect3.Draw (ctx);
 rect4.Draw (ctx);
 
 rect2.x += movement;
 if (rect2.Intersects(rect) || rect2.Intersects(rect3))
    movement *= 1;
    movement *= -1;
}, 33);

// FRAMEWORK FILE
//////////////////////////////////////////////////////////
// VECTOR 2
//////////////////////////////////////////////////////////
Vector2 = function (x,y){
 this.x = 0;
 this.y = 0;
 
 if (x != null)
  this.x = x;
 if (y != null)
  this.y = y;
  
 this.previousX = 0; // helpful for camera angles, panning, comparing to mouse loc/value, etc.
 this.previousY = 0;
 
 // SET METHOD
 this.Set = function(){
 
  if (x == null && y == null){
   console.log ("No 'x' or 'y' value was passed to the Vector2 Set Function.");
  }
  else{
   this.previousX = this.x;
   this.previousY = this.y;
   
   if (x != null)
    this.x = x;
   
   if (y != null)
    this.y = y;
  }
 };
 
 // NORMALIZE METHOD (helps determine angles especially in Vector 3's) [Magnitude]
 this.Normalize = function(){
  var tmp = new Vector2 (this.x, this.y);
  
  var mag = Math.sqrt((tmp.x * tmp.x) + (tmp.y * tmp.y)); // Magnitude  
  tmp.x = tmp.x / mag;
  tmp.y = tmp.y / mag;
  
  return tmp;
 };
 
 // DISTANCE METHOD (get the distance between the two Vector 2's or if nothing passed, then get the distance between previous and current.
 this.Distance = function (vec2){
  if (vec2 != null)
   return Math.sqrt (((vec2.x  – this.x) * (vec2.x – this.x)) + ((this.y – vec2.y) * (this.y – vec2.y)));
  else
   return Math.sqrt (((this.previousX  – this.x) * (this.previousX – this.x)) + ((this.previousY – this.y) * (this.previousY – this.y)));
 };
 
 // HAS CHANGED METHOD
 this.HasChanged = function(){
  if (this.x != this.previousX || this.y != this.previousY)
   return true;
  
  return false;
 };
 
 
 // DIFFERENCE METHOD
 this.Difference = function (vec2, invert){
  var inv = 1;
  
  if (invert)
   inv = -1;
   
  if (vec2 == null)
   return new Vector2 ((this.x – this.previousX) * inv, (this.y – this.previousY) * inv);
  else
   return new Vector2 ((this.x – this.vec2.x) * inv, (this.y – this.vec2.y) * inv);
 };
 
};

//////////////////////////////////////////////////////////
// COLOR HTML5 color format = "rgba(0, 0, 0, 0)", or "rgb(0,0,0)"
//////////////////////////////////////////////////////////
colorClass = function (r, g, b, a){
//Color = function (r, g, b, a){
 this.r = 255;
 this.g = 255;
 this.b = 255;
 this.a = 1;
 
 if (r != null)
  this.r = r;
 if (g != null)
  this.g = g;
 if (b != null)
  this.b = b;
 if (a != null)
  this.a = a;
 
 // TO STANDARD METHOD
 this.ToStandard = function (noAlpha){
 
  if (noAlpha == null || !noAlpha)
   return "rgba (" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
  else
   return "rgb (" + this.r + ", " + this.g + ", " + this.b + ")";
 };
};

//////////////////////////////////////////////////////////
// RECTANGLE: Do the rectangles collide or intersect?
//////////////////////////////////////////////////////////
Rectangle = function (x, y, w, h, color){
 // Test #1
 if(x == null || y == null || w == null || h == null){
  alert("x, y, w, h, or color variable(s) did not pass to the Rectangle object.");
  
 // Test #2
  var errorMsg = "The following was not provided:";
  
  if (x == null)
   errorMsg += " 'x' ";
  if (y == null)
   errorMsg += " 'y' ";
  if (w == null)
   errorMsg += " 'width' ";
  if (h == null)
   errorMsg += " 'height' ";
  
  throw new Error (errorMsg);
 }
 
 this.x = x;
 this.y = y;
 this.width = w;
 this.height = h;
// this.color = new Color ();
 this.color = new colorClass();
 
 // Intersects Object (where the incoming shape this.x intersects with the corners of the canvasX)
 this.Intersects = function (shape){ // Shape means can pass circle or rectangle objects
  var offset = 0;
  if (shape.radius != null)
   offset = shape.radius;
   
  if (this.Contains(shape.x – offset, shape.y – offset) || this.Contains(shape.x + shape.width – offset, shape.y – offset) ||  // Top right corner
   this.Contains(shape.x – offset, shape.y + shape.height – offset) ||  // Bottom left corner
   this.Contains(shape.x + shape.width – offset, shape.y + shape.height – offset)){  // Bottom right corner
   
    return true;
   }
   
  else if (shape.Contains(this.x – offset, this.y – offset) || shape.Contains(this.x + this.width – offset, this.y – offset) ||
   shape.Contains(this.x – offset, this.y + this.height – offset) || 
   shape.Contains(this.x + this.width – offset, this.y + this.height – offset)){
   
    return true;
   }
   
  return false;
 };
  
 // Contains Object (this.x contained within canvasX)
 this.Contains = function (x, y){
  if (x >= this.x  &&  x <= this.x + this.width  &&
   y >= this.y  &&  y <= this.y + this.height){
   
   return true;
  }
  
  else{
   return false;
  }
 };
 
 // Draw Object (Rectangle)
 this.Draw = function (ctx){ // ctx = context object
 
  ctx.fillStyle = this.color.ToStandard();
  ctx.fillRect (this.x, this.y, this.width, this.height); 
 };
};

Did you indeed try and use these codes? Everywhere you assume that an unfilled argument will default to null instead of undefined…

for some reason my rectangles wount move and when I open developer mode in chrome it says that……rect2.x += movement; uncaught referenceError: movement is not defined (repeated 2494 times) plz help

nice man i appreciate your tuts goo one 😀 do more of them