title: Making Squares Move?
body: <p>I am  trying to make the divs "ySpeed(1)" and "ySpeed(-1)" make myGamePiece move up and down, and eventually, left to right. I made two functions called movePieceUp and movePieceDown. I do not know why the functions are not working correctly. Know a way I can make myGamePiece work correctly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
      this.image = new Image();
      this.image.src = color;
    }
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 2;
    this.speedY = 2;
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.color = color;
    this.update = function() {
      random = Math.floor((Math.random() * 200) + 1);
      random2 = Math.floor((Math.random() * 200) + 1);
  
      function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i &lt; 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
      randcolor = getRandomColor();
      ctx = myGameArea.context;
      if (this.type == "image") {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      } else {
        ctx.fillStyle = randcolor;
        ctx.fillRect(random, random2, 50, 50);
      }
      this.x = random;
      this.y = random2;
      this.width = 50;
      this.height = 50;
      this.color = randcolor;
    }
  
  }
  
  
  function component2(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
      this.image = new Image();
      this.image.src = color;
    }
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 2;
    this.speedY = 2;
    this.x = x;
    this.y = y;
    this.gravity = 2;
    this.gravitySpeed = 0;
    this.update = function() {
      ctx = myGameArea.context;
      if (this.type == "image") {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      } else {
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }
    this.newPos = function() {
      this.x = this.x + this.speedX;
      this.y = this.y + this.speedY;
      //removed hitting rock bottom because the background and other pieces will be off screen.
  
    }
    this.hitBottom = function() {
      var rockbottom = myGameArea.canvas.height - this.height;
      if (this.y &gt; rockbottom) {
        this.y = rockbottom;
        this.gravitySpeed = 0;
        board = 1;
      }
    }
    this.crashWith = function(otherobj) {
      var myleft = this.x;
      var myright = this.x + (this.width);
      var mytop = this.y;
      var mybottom = this.y + (this.height);
      var otherleft = otherobj.x;
      var otherright = otherobj.x + (otherobj.width);
      var othertop = otherobj.y;
      var otherbottom = otherobj.y + (otherobj.height);
      var crash = true;
      if ((mybottom &lt; othertop) || (mytop &gt; otherbottom) || (myright &lt; otherleft) || (myleft &gt; otherright)) {
        crash = false;
      }
      return crash;
    }
  }
  
  function startGame() {
    random = Math.floor((Math.random() * 100) + 1);
  
  
    random2 = Math.floor((Math.random() * 100) + 1);
  
  
    square = new component(50, 50, "green", random, random2);
    myGamePiece = new component2(30, 40, "greenhorn.gif", 220, 120);
    enemyPiece2 = new component(50, 50, "Trump1.jpg", random, random2, );
    myGameArea.start();
    return square
  }
  
  var myGameArea = {
    canvas: document.createElement("canvas"),
    start: function() {
  
      this.canvas.width = 450;
      this.canvas.height = 270;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  
      this.interval = setInterval(updateGameArea, 1000);
    },
    clear: function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
  }
  
  
  
  function updateGameArea() {
  
    myGameArea.clear();
    square.update();
    myGamePiece.update();
    enemyPiece2.update();
  
  }
  
  function movePieceUp() {
    myGamePiece.ySpeed(1);
    myGamePiece.speedY = 2;
  }
  
  function movePieceDown() {
    myGamePiece.ySpeed(-1);
    myGamePiece.speedX = 2;
  }
  
  
  document.getElementById("start").addEventListener('click', startGame);
  document.getElementById("ySpeed(1)").addEventListener('click', movePieceUp);
  document.getElementById("ySpeed(-1)").addEventListener('click', movePieceDown);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; Click Start Game to play &lt;/p&gt;
  &lt;div id="start"&gt;Start Game&lt;/div&gt;
  &lt;div id="hi"&gt;Hi&lt;/div&gt;
  
  
  &lt;div id="ySpeed(1)"&gt;UP&lt;/div&gt;
  &lt;/p&gt;
  &lt;div id="ySpeed(-1)"&gt;DOWN&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>