title: JS Notification Windows doesn't really work
body: <p>So basically we're relatively new to this and I don't know what to google to fix this problem. Whenever i want to restart the level it just refers me back to the prompt again, which isn't really optimal (Guess everyone can figure that out) but when I click on abbrechen (cancel) it just gives me an error. for that reason im thinking about just doing it another way but I hope there's a way to fix this. images code and whatever should be included idk maybe.
  Also there are plenty of things wrong with our game like the fact that there's a border we want to like stretch since it just cuts off if you go out too far yeaaa whatever if you can help just say anything.<a href="https://i.stack.imgur.com/vg6rq.png" rel="nofollow noreferrer">image1</a><a href="https://i.stack.imgur.com/wu0BX.png" rel="nofollow noreferrer">image2</a></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 () {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
  })();
  
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      width = 1000,
      height = 400,
      player = {
          x: width / 2,
          y: 200,
          width: 25,
          height: 25,
          speed: 3,
          velX: 0,
          velY: 0,
          jumping: false,
          grounded: false,
          color:'#FFCC99'
      },
      keys = [],
      friction = 0.8,
      gravity = 0.4,
      boxes = [],
      powerup = [];  
  
  powerup.push({ //red box right
          x: 810,
          y: 250,
          width: 20,
          height: 20,
          color: '#BF4D28',
          effect: 'shrink'
      });
  powerup.push({ //red box in center
          x: 395,
          y:75,
          width: 50,
          height: 50,
          color: '#BF4D28',
          effect: 'gravity'
      });
  powerup.push({ //dreieck links
          x: -10,
          y: 88,
          width: 20,
          height: 20,
          color: '#222',
          effect: 'tele',
          rotate: 20,
          px: 20,//where they get teleported
          py: 370,
          stay: true
      });
  powerup.push({
          x: 60,
          y: 365,
          width: 20,
          height: 20,
          color: '#2A5D77',
          effect: 'win',
          stay: true
      });
  
  // dimensions
  boxes.push({//unteri linki wand
      x: 0,
      y: height/4+10,
      width: 10,
      height: height,
      color: 'green'
  });
  boxes.push({//Oberi linki wand
      x: 0,
      y: 0,
      width: 10,
      height: height/4-15,
      color: 'green'
  });
  boxes.push({//box for the ground
      x: 0,
      y: height - 10,
      width: width,
      height: 50,
      color: 'orange'
  });
  boxes.push({//box on right
      x: width - 10,
      y: 0,
      width: 50,
      height: height,
      color: 'yellow'
  });
  boxes.push({//dach
      x: 0,
      y: 0,
      width: 1000,
      height: 10,
      color: 'blue'
  });
  boxes.push({
      x: 290,
      y: 200,
      width: 300,
      height: 10,
      color: 'blue'
  });
  boxes.push({//unischtbari wand block
      x: 380,
      y: 135,
      width: 90,
      height: 10,
      color: 'black'
  });
  boxes.push({ //oberi rechti wand
      x: 375,
      y: 55,
      width: 10,
      height: 90,
      color: 'blue'
  });
  boxes.push({
      x: 120,
      y: 250,
      width: 140,
      height: 10,
      color: 'red'
  });
  boxes.push({
      x: 220,
      y: 300,
      width: 80,
      height: 10,
      color: 'black'
  });
  boxes.push({
      x: 340,
      y: 340,
      width: 90,
      height: 10,
      color: '#655643'
  });
  boxes.push({
      x: 740,
      y: 300,
      width: 160,
      height: 10,
      color: '#655643'
  });
  boxes.push({
      x: 0,
      y: 350,
      width: 90,
      height: 10,
      color: '#000000'
  });
  boxes.push({
      x: 90,
      y: 350,
      width: 10,
      height: 50,
      color: '#000000'
  });
  
  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.5;//how high to jump
          }
      }
      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.beginPath();
      
      player.grounded = false;
      for (var i = 0; i &lt; boxes.length; i++) {//print boxes
          ctx.fillStyle = boxes[i].color;
          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();//Draw charater stuff
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      //draw powerup stuff 
      for(var j = 0; j &lt; powerup.length; j++){
        ctx.save();
        var cx = powerup[j].x + 0.5 * powerup[j].width,   // x of shape center
        cy = powerup[j].y + 0.5 * powerup[j].height; //y of shape center
        ctx.translate(cx, cy);  //translate to center of shape
        ctx.rotate( (Math.PI / 180) * 45);//rotate 25 degrees.
        if(powerup[j].effect  === 'tele'){
          ctx.rotate( (Math.PI / 180) * powerup[j].rotate);//rotate 25 degrees.
          powerup[j].rotate = (Math.PI / 180) * powerup[j].rotate;
        }
        ctx.translate(-cx, -cy);            //translate center back to 0,0
        ctx.fillStyle = powerup[j].color;
        ctx.fillRect(powerup[j].x, powerup[j].y, powerup[j].width, powerup[j].height);
        ctx.restore();
        
        //powerup collision
        if(colCheck(player, powerup[j])!==null){//touched power up!
          if(powerup[j].effect==='gravity'){
            gravity= 0.4;//decrease gravity
            player.speed = 4 ;
          }
          else if (powerup[j].effect==='shrink'){
            player.width= 10;
            player.height= 10;
            player.speed = 5;
          }
          else if (powerup[j].effect==='tele'){
            player.x=powerup[j].px;
            player.y=powerup[j].py;
          }
          else if (powerup[j].effect==='win'){
            var r = confirm("Du hast gewonnen! Willst du nochmal spielen?");
            if (r == false) {
                 player.x=200;
                 player.y=200;
            } else {
                 window.location.href = window.location.href;
            }
          }
          if(powerup[j].stay!==true)
          powerup[j].width=0;//make power up go away
        }
      }
      //powerup stuff
  
      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();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Pacifico);
  
  body{
    background: linear-gradient(#87CEEB, #808080);
  }
  
  h1{
    color: #000000;
    font-size: 3em;
    line-height:1em;
    margin-bottom: 15px;
    font-family: sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    @media{
      
    }
  }
  
  p{
    line-height: 10em;
  }
  
  div{
    color: #000000;
    font-family: sans-serif;
    line-height:10px;
    margin:2%;
  }
  
  #canvas{
        margin-left:500%;/*spielbreite*/
      background: linear-gradient(#87CEEB, #808080); 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;
    &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>