title: Trigger next level in our javascript game?
body: <p>We are making a game for our school, it is fairly simple, however, we cannot figure out how to  make it trigger the next level. Currently, we have a button set to load a new page when they finish the level, but it is, obviously, very easy to cheat with this method. We were wondering how we could make it so when the red dot (character) reaches the top box, the next level will load. I will post level one for reference.</p>
  
  <pre><code>   &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
              canvas, img {
              display:block; margin:1em auto; border:1px solid black;
              }
              canvas { 
              background:url(Clouds.png);
              }
          &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="canvas" style="border:1px solid #000"&gt;&lt;/canvas&gt;
  &lt;script&gt;
      (function () {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
  })();
  
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      width = 500,
      height = 200,
      player = {
          x: width / 2,
          y: height - 15,
          width: 5,
          height: 5,
          speed: 3,
          velX: 0,
          velY: 0,
          jumping: false,
          grounded: false
      },
      keys = [],
      friction = 0.8,
      gravity = 0.3;
  
  var boxes = [];
  
  // dimensions
  boxes.push({
      x: 0,
      y: 0,
      width: 10,
      height: height
  });
  boxes.push({
      x: 0,
      y: height - 2,
      width: width,
      height: 50
  });
  boxes.push({
      x: width - 10,
      y: 0,
      width: 50,
      height: height
  });
  
  boxes.push({
      x: 120,
      y: 10,
      width: 80,
      height: 80
  });
  boxes.push({
      x: 170,
      y: 50,
      width: 80,
      height: 80
  });
  boxes.push({
      x: 220,
      y: 100,
      width: 80,
      height: 80
  });
  boxes.push({
      x: 270,
      y: 150,
      width: 40,
      height: 40
  });
  
  canvas.width = width;
  canvas.height = height;
  
  function update() {
      // check keys
      if (keys[38] || keys[32] || keys[87]) {
          // up arrow or space
          if (!player.jumping &amp;&amp; player.grounded) {
              player.jumping = true;
              player.grounded = false;
              player.velY = -player.speed * 2;
          }
      }
      if (keys[39] || keys[68]) {
          // right arrow
          if (player.velX &lt; player.speed) {
              player.velX++;
          }
      }
      if (keys[37] || keys[65]) {
          // left arrow
          if (player.velX &gt; -player.speed) {
              player.velX--;
          }
      }
  
      player.velX *= friction;
      player.velY += gravity;
  
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = "black";
      ctx.beginPath();
  
      player.grounded = false;
      for (var i = 0; i &lt; boxes.length; i++) {
          ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
  
          var dir = colCheck(player, boxes[i]);
  
          if (dir === "l" || dir === "r") {
              player.velX = 0;
              player.jumping = false;
          } else if (dir === "b") {
              player.grounded = true;
              player.jumping = false;
          } else if (dir === "t") {
              player.velY *= -1;
          }
  
      }
  
      if(player.grounded){
           player.velY = 0;
      }
  
      player.x += player.velX;
      player.y += player.velY;
  
      ctx.fill();
      ctx.fillStyle = "red";
      ctx.fillRect(player.x, player.y, player.width, player.height);
  
      requestAnimationFrame(update);
  }
  
  function colCheck(shapeA, shapeB) {
      // get the vectors to check against
      var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
          vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
          // add the half widths and half heights of the objects
          hWidths = (shapeA.width / 2) + (shapeB.width / 2),
          hHeights = (shapeA.height / 2) + (shapeB.height / 2),
          colDir = null;
  
      // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
      if (Math.abs(vX) &lt; hWidths &amp;&amp; Math.abs(vY) &lt; hHeights) {
          // figures out on which side we are colliding (top, bottom, left, or right)
          var oX = hWidths - Math.abs(vX),
              oY = hHeights - Math.abs(vY);
          if (oX &gt;= oY) {
              if (vY &gt; 0) {
                  colDir = "t";
                  shapeA.y += oY;
              } else {
                  colDir = "b";
                  shapeA.y -= oY;
              }
          } else {
              if (vX &gt; 0) {
                  colDir = "l";
                  shapeA.x += oX;
              } else {
                  colDir = "r";
                  shapeA.x -= oX;
              }
          }
      }
      return colDir;
  }
  
  document.body.addEventListener("keydown", function (e) {
      keys[e.keyCode] = true;
  });
  
  document.body.addEventListener("keyup", function (e) {
      keys[e.keyCode] = false;
  });
  
  
  window.addEventListener("load", function () {
      update();
  });
  &lt;/script&gt;
  &lt;br&gt;
  &lt;center&gt;
  &lt;input type="button" name="next" value="Click me when finished! No cheating! ;)" onclick="location.href='level2.html';"&gt;
  &lt;/center&gt;
  &lt;center&gt;
  &lt;input type="button" name="restart" value="Restart" onclick="location.href='javagame.html';"&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>