title: Video Game Score Issues
body: <p>Currently I am creating a Javascript game. I have successfully created all the game pieces and how my game's basic functions should work. However, I am having 2 issues that I can't seem to solve, and I've looked for a few weeks now trying to figure out how to do it. I can't figure out how to get the game to result in a gameover if my player gets pushed of falls off screen. Also, I am unsure on how I can get the score to continously increase for as long as the player is still "alive". If anyone can either demonstrate how to do these things or point me in the direction of a tutorial or article on how to do it it would be very helpful.</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;
  })();
  
  
  const seeded = (() =&gt; {
    var seed = 1;
    return {
      max: 2576436549074795,
      reseed(s) {
        seed = s
      },
      random() {
        return seed = ((8765432352450986 * seed) + 8507698654323524) % this.max
      },
    }
  })();
  const randSeed = (seed) =&gt; seeded.reseed(seed);
  const randSI = (min, max = min + (min = 0)) =&gt; (seeded.random() % (max - min)) + min;
  const randS = (min, max = min + (min = 0)) =&gt; (seeded.random() / seeded.max) * (max - min) + min;
  
  randSeed(100); // seed the random generators 
  
  
  function Player(color, keymap, x) {
    this.x = (typeof x === 'undefined') ? 1 : x;
    this.y = 7;
    this.width = 15;
    this.height = 15;
    this.speed = 10;
    this.velX = 0;
    this.velY = 0;
    this.jumping = false;
  
    this.keymap = {}
    for (let key in keymap) {
      switch (keymap[key]) {
        case 'jump':
          this.keymap[key] = this.jump
          break;
        case 'left':
          this.keymap[key] = this.moveLeft
          break;
        case 'right':
          this.keymap[key] = this.moveRight
          break;
      }
    }
    this.color = color;
  } // Player()
  
  Player.prototype.jump = function() {
    if (!this.jumping) {
      this.jumping = true;
      this.velY = -this.speed * 1.5;
    }
  }
  Player.prototype.moveRight = function() {
    if (this.velX &lt; this.speed) {
      this.velX++;
    }
  }
  Player.prototype.moveLeft = function() {
    if (this.velX &gt; -this.speed) {
      this.velX--;
    }
  }
  // Globals
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 700,
    height = 600,
    keys = [],
    friction = .9,
    gravity = .9;
  
  canvas.width = width;
  canvas.height = height;
  
  // Set up players
  var players = [];
  players.push(new Player('purple', {
    32: 'jump',
    37: 'left',
    38: 'jump',
    39: 'right'
  }))
  /*players.push(new Player('yellow', {
     56: 'jump',
     52: 'left',
     54: 'right'
  }, width-25))*/
  players.push(new Player('blue', {
     87: 'jump',
     65: 'left',
     68: 'right'
  }, (width-25)/2))
  
  function update() {
    ctx.clearRect(0, 0, width, height);
    addPlatformsToBottom(); // will add platforms if needed
    drawPlatforms();
    players.forEach(player =&gt; {
      // check player-specific keys
      for (let i in player.keymap) {
        if (keys[i] &amp;&amp; typeof player.keymap[i] === 'function')
          player.keymap[i].bind(player)();
      }
  
      player.velX *= friction;
  
      player.velY += gravity;
  
      player.x += player.velX;
      player.y += player.velY;
  
      if (player.x &gt;= width - player.width) {
        player.x = width - player.width;
      } else if (player.x &lt;= 0) {
        player.x = 0;
      }
  
      if (player.y &gt;= height - player.height) {
        player.y = height - player.height;
        player.jumping = false;
        player.velY = 0;
      }
      testPlayerForPlatforms(player);
  
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }) // player.forEach
    requestAnimationFrame(update);
  }
  
  document.body.addEventListener("keydown", function(e) {
    //  console.log(e.keyCode);
    keys[e.keyCode] = true;
  });
  
  document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
  });
  
  window.addEventListener("load", function() {
    update();
  });
  
  function testPlayerForPlatforms(player) {
    player.hitPlatform = false; // reset platform hit flag
    for (var i = 0; i &lt; platforms.length; i++) {
      var p = platforms[i];
      if (p.active) {
        testPlayer(player, p);
        if (player.hitPlatform) {
          break; // stop search as player has hit a platform
        }
      }
    }
  }
  
  
  function drawPlatforms() { // draws all platforms and move up
    platformInfo.lastPlatformY += platformInfo.speed;
    for (var i = 0; i &lt; platforms.length; i++) {
      var p = platforms[i];
      if (p.active) {
        p.yPos += platformInfo.speed;
        if (p.yPos + p.height &lt; 0) { // platform above top 
          p.active = false; // turn it off
        } else {
          p.draw();
        }
      }
    }
  }
  
  function addPlatformsToBottom() {
    while (platformInfo.lastPlatformY &lt; ctx.canvas.height) {
      generateLevel();
    }
  }
  
  // some constants and vars to control random generation of platforms
  const platformInfo = {
    speed: -2.5,
    height: 8, // platform height
    minLength: 100, // in pixels
    maxLength: 300,
    vertSpacing: 100, // distance between platforms
    minHorSpacing: 50, // should be larger than player
    maxHorSpacing: 80,
    lastPlatformY: 100, // y position of last platform created
    maxHoleCount: 3,
    color: "#FFF",
  }
  // array object holds platforms
  const platforms = [];
  
  // a platform template object that will be used to create platforms from
  const platform = {
    left: 0,
    right: 0,
    yPos: 0,
    height: 0, // thickness
    active: false, // true if platform in use
    color: "#F84",
    draw() { // function to draw the platform
      ctx.fillStyle = this.color;
      ctx.fillRect(this.left, this.yPos, this.right - this.left, this.height);
    },
    init(left, right, yPos) { // function to initialize 
      // alias to save typing.
      const pI = platformInfo
      this.yPos = yPos;
      this.left = left;
      this.right = right;
      this.height = pI.height;
      this.color = pI.color;
      this.active = true;
    },
  }
  // function adds platforms to array. If no inactive platforms a
  // new one is created
  function addPlatform() {
    var platform;
    for (var i = 0; i &lt; platforms.length; i++) {
      if (!platforms[i].active) { // is the platform inactive
        platform = platforms[i];
        break; // stop searching
      }
    }
    if (!platform) { // if no inactive platform then create a new one
      platform = createPlatform();
      platforms.push(platform);
    }
    return platform;
  }
  
  // a function to create a platform object
  function createPlatform(customProps = {}) { // custom props can be used to modify the
    // platform in future. For now it just defaults to empty 
    return Object.assign({}, platform, customProps);
  }
  // creates a set of platforms for a single level
  function generateLevel() {
    var numHoles = randSI(1, platformInfo.maxHoleCount);
    var spacing = ctx.canvas.width / (numHoles); // get spacing
    var ypos = platformInfo.lastPlatformY;
    platformInfo.lastPlatformY += platformInfo.vertSpacing;
    var left = 0; // the starting left edge
    for (var i = 1; i &lt;= numHoles; i++) { // create numHoles
      var platform = addPlatform();
      var holeOffset = randSI(-spacing, 0);
      platform.init(left, spacing * i + holeOffset, ypos);
      left = spacing * i + holeOffset + randSI(platformInfo.minHorSpacing, platformInfo.maxHorSpacing);
    }
    // add the last platform
    platform = addPlatform();
    platform.init(left, ctx.canvas.width, ypos);
  }
  
  
  
  function testPlayer(player, platform) {
    var p, pl; // p for player, pl for platform
    p = player;
    pl = platform;
    // is the player above or below platform
    if (!(p.x + p.width &lt; pl.left || p.x &gt; pl.right)) { // yes
      if (p.velY &gt; 0 &amp;&amp; p.y &lt; pl.yPos) { // is player moving down and above platform
        if (p.y + p.height &gt; pl.yPos) { //is bottom of player below top of platform
          // must have hit platform
          p.jumping = false;
          p.y = pl.yPos - p.height; // move player so that it is on the platform
          p.velY = 0;
          p.hitPlatform = true; // flag a platform has been hit
        }
      } else if (p.y + p.height &gt; pl.yPos + pl.height) { // player must be moving up so check if below platform
        if (p.y &lt; pl.yPos + pl.height) { // is top of player above bottom of platform
          // must have hit head on platform
          p.velY = 0;
          p.y = pl.yPos + pl.height;
          p.jumping = false;
          p.hitPlatform = true; // flag a platform has been hit
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#score {
    color:white;
    font-size:35px;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>0&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Square Stairs™&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="#000"&gt;
    &lt;div id="score"&gt;SCORE:&lt;/div&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;!-- line breaks to move canvas away from SO title bar that gets in the way when switching to full page mode --&gt;
    &lt;canvas id="canvas" style="border:3px solid #fff"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code as it stands currently. I made on the website<a href="https://codepen.io/MilkyBOii/pen/oZXmzX?editors=1000" rel="nofollow noreferrer">CodePen</a>and this is my original code. I have nothing to do with Unity or any other coding platform so if you have any information on how to solve this it has to be able to run on the CodePen website. Thank you for your assistance.</p>