Untitled

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!-- this command below tells the browser to start interpreting the lines below
javascript and not html -->
<script>


var x1corner =0.0;
var y1corner=0.0;
var change = 5.0;
console.log(document);
var c = document.getElementById("myCanvas");
console.log(c);
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
var gravity = 0.8;
var momentum = 0;
var rect1 = {x: 100, y: 200, width: 20, height: 20};
var rect2 = {x: 140, y: 160, width: 20, height: 20};
var rect3 = {x: 170, y: 120, width: 20, height: 20};

var xchange = 1.0;
var ychange = 70.0;

var obstacles = [rect1,rect2,rect3];
var collision = false;
var keys = [];


function drawrect(x1,y1){
ctx.fillRect(x1,y1,20,20);
}


///this is the function for the keypress event
function ProcessKeydown(e)
{
    //alert(e.keyCode);

    if (e.keyCode) keycode=e.keyCode;
    else keycode=e.which;
    ch=String.fromCharCode(keycode);
   /*
    if(keycode==65)         {

        x1corner -= xchange;
        momentum = -0.2;
    }
    else if(keycode==68)    {
        x1corner += xchange;
        momentum = 0.2;
    }
    else if(keycode==83)    {
        y1corner += ychange;
    }
    else if(keycode==87)    {
      if (y1corner == 230 || collision == true)
      {
        y1corner -= ychange;
      }

    }

    */
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
    ctx.fillStyle = "#FF0000";
    drawrect(x1corner,y1corner);
    ctx.fillStyle = "#000000";

    ctx.fillRect(0,250,500,50);
    //update();
    //draw();
}

setInterval(function()
            {

  if (keys[68]) {
    console.log("right down");
        x1corner += xchange;
        //momentum = 0.2;
    }
  if (keys[65]) {
    console.log("left down");
        x1corner -= xchange;
        //momentum = -0.2;
    }
  if (keys[87]) {
    console.log("up key down " + y1corner);
    if ((y1corner < 230.5 && y1corner > 229.5) || collision == true)
      {
                 var i1 = 0;
                 setInterval(function()
                {
                    if (i1 < 10){
                        y1corner -= 2;
                        i1 += 1;
                    }
                },10);
              }


    }
  if (keys[83]) {
    console.log("down key down");
        y1corner += ychange;

    }
              for   (index = 0; index < obstacles.length;                   index++){
              rectx = obstacles[index].x;
              //console.log(rectx);
              recty = obstacles[index].y;
              if (x1corner < rectx + 20 &&
              x1corner > rectx - 20 &&
              y1corner > recty - 20 &&
              y1corner < recty) {
              // collision detected!
              collision = true;
              break;
            }
              else{collision = false;}
              }

              if (y1corner < 230 && collision == false){


              y1corner = y1corner + gravity;
              ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)

              ctx.fillStyle = "#000000";

              ctx.fillRect(0,250,500,50);

              }
              if (x1corner > -1 && x1corner < 480){
              x1corner = x1corner + momentum;
              ctx.clearRect(0, 0, myCanvas.width, 250)
              ctx.fillStyle = "#FF0000";
              drawrect(x1corner,y1corner);
              ctx.fillStyle = "#000000";
                for (index = 0; index < obstacles.length;                     index++){
                  drawrect(obstacles[index].x,
                       obstacles[index].y);

                }

              }

            }, 1);


document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});
</script>
<!--the script below accesses one of the DOM built in functions which is onKeyPress.  You can look from the watch window and see many other ones
<body onKeyDown="ProcessKeydown(event);">
-->

</body>


</html>