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: 200, y: 160, width: 20, height: 20};
var rect5 = {x: 200, y: 20, width: 20, height: 20};
var rect3 = {x: 300, y: 120, width: 20, height: 20};
var rect4 = {x: 300, y: 40, width: 20, height: 20};

var xchange = 1.0;
var ychange = 70.0;

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


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 (x1corner < 200 + 20 &&
              x1corner > 200 - 20 &&
              y1corner < -20)  {
              //alert("you win");
              win = true;}

  if (keys[68] || keys[39]) {
    console.log("right down");
        x1corner += xchange;
        //momentum = 0.2;
    }
  if (keys[65] || keys[37]) {
    console.log("left down");
        x1corner -= xchange;
        //momentum = -0.2;
    }
  if (keys[87]|| keys[38]) {
    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] || keys[40]) {
    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)
              if (win == false){
              ctx.fillStyle = "#FF0000";
              }
                else{ctx.fillStyle = "#FFFF00"; }
              drawrect(x1corner,y1corner);
              ctx.fillStyle = "#000000";
                for (index = 0; index < obstacles.length;                     index++){
                  drawrect(obstacles[index].x,
                       obstacles[index].y);

                }

              }
              ctx.font="20px Georgia";

              if (win == false){
              ctx.fillText("What's above here?",10,35);
              }
              else
               {ctx.fillText("You win!",10,35);}

            }, 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>