objects part 1

can we make some game objects?

by DavisC_WL

HTML

<canvas width="200" height="200" id="myCanvas"></canvas>
<p>
  <b>Game</b>: Defines the Game Object
</p>
<p>
  Construct with keyword <b>new</b>: <br/><span style="color:red">var game = new Game();</span>
</p>
<p>
  <b>Box</b>: Defines the Box Object
</p>
<p>
  Construct with keyword <b>new</b>--consturctor <b>must</b> include reference to the Game object: <br/><span style="color:red">new Box(game); or var box = new Box(game);</span>
</p>
<p>
  Properties of the Box that can be changed:
</p>
<p>
  Technically all of them, but the main properties are <b>controllable</b> and <b>roatation</b>
</p>
<p>
  <b>Box.move(dirX, dirY)</b>: Tells a Box object to move in directions specified (-1, 0, 1 for each axis)
</p>

CSS

#myCanvas {
  border: 1px solid #000;
}

JavaScript

//step 1: define a game object

//step 2: create some boxes and add them to the game

/**
key controls to capture key events
**/
document.addEventListener("keydown", function(e) {
  //capture the event
  e = window.event || e;
  e.preventDefault();
  //set the game's key to match input
  game.key = e.keyCode;
  if (game.key === 37) {
    gary.move(-1, 0)
  }
  /////////////////////////
});
/**
define the Game Object
**/
function Game() {
  this.key = -1; //key for key controls
  this.gameObs = []; //array to hold all of the objects
}

/**
define the Box Object
@param game the Game object to hold the item
@param x optional x location
@param y optional y location
@param size optional size
**/
function Box(game, x, y, size) {
  this.controllable = false; //can you control with keys?
  this.rotation = false; //can it rotate?
  //////////////////////////////////////
  this.x = x || Math.random() * 200; //random if not defined
  this.y = y || Math.random() * 200; //random if not defined
  this.size = size || Math.random() * 20 + 10; //random if not defined
  if (this.x + this.size > 200) {
    this.x -= this.size;
  }
  if (this.y + this.size > 200) {
    this.y -= this.size;
  }
  this.color = "red"; //always red
  this.dirY = 1; //move down at first
  this.spd = Math.random() * 10; //random speed
  this.angle = 0; //set initial angle
  game.gameObs.push(this); //add to arry in the game 
}

/**
Movement logic for Box
 @param dirX direction to move on x axis (-1, 0, 1)
 @param dirY direction to move on y axis (-1, 0, 1);
 **/
Box.prototype.move = function(dirX, dirY) {
  this.x += dirX * this.spd;
  this.y += dirY * this.spd;
}

/**
Tell the Box how to draw itself
**/
Box.prototype.draw = function() {
  context.fillStyle = this.color; //color
  //rotation logic
  if (this.rotation) {
    context.save();
    context.translate(this.x - this.size / 2, this.y - this.size / 2);
    context.rotate(this.angle);
    context.fillRect(this.size / -2, this.size / -2, this.size,...