Untitled

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:5px 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 audio = new Audio('http://www.freesfx.co.uk/rx2/mp3s/9/10064_1361272689.mp3');
  var audio2 = new Audio('http://www.freesfx.co.uk/rx2/mp3s/4/5080_1333456140.mp3');

    var audio3 = new Audio('http://www.freesfx.co.uk/rx2/mp3s/9/10385_1371750888.mp3');

audio3.play();

var x1corner =250;
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];


for (i = 4; i < 32; i++){
var A = Object.create(obstacles[i]);
obstacles.push(A);
obstacles[i+1].x = i*100;
obstacles[i+1].y = Math.random()*220;
}


var collision = false;
var keys = [];
var win = false;
var scrollx = 10;


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 < 230 + 30 &&
              x1corner > 230 - 30 &&
              y1corner < -10)  {
              //alert("you win");
              win = true;
              audio2.play();
  }

  if (keys[68] || keys[39]) {
    console.log("right down");

        for (index = 0; index < obstacles.length;                       index++){
              obstacles[index].x -= xchange;
              //console.log(rectx);
              //recty = obstacles[index].y;
        }
        //x1corner += xchange;
        //momentum = 0.2;
    }
  if (keys[65] || keys[37]) {
    console.log("left down");
        //x1corner -= xchange;
    for (index = 0; index < obstacles.length;                       index++){
              obstacles[index].x += xchange;
              //console.log(rectx);
              //recty = obstacles[index].y;
        }
        //momentum = -0.2;
    }
  if (keys[87]|| keys[38]) {
    audio.play();
    console.log("up key down " + y1corner);
    if ((y1corner < 230.5 && y1corner > 229.5) || collision == true)
      {
                 var i1 = 0;
                 setInterval(function()
                {
                    if (i1 < 5){
                      for   (index = 0; index < obstacles.length;                       index++){
              obstacles[index].y += 1;
              //console.log(rectx);
              //recty = obstacles[index].y;
        }
                        //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 = "rgb(" +  Math.round(Math.random()*255).toString() + "," +
Math.round(Math.random()*255).toString() + "," +
Math.round(Math.random()*255).toString() +
")" ;        }
              drawrect(x1corner,y1corner);
              ctx.fillStyle = "#000000";
                for (index = 0; index < obstacles.length;                     index++){
                  drawrect(obstacles[index].x,
                       obstacles[index].y);

                }

              }
              ctx.font='small-caps 20px Arial';

              if (win == false){

              ctx.fillText("What's above here?->",5,35);
                ctx.fillText("W,A,D to move",5,55);
                ctx.fillText(x1corner + " " + Math.round(y1corner),10,75);
              }
              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>