Javascript not counting past 9

48 views Asked by At

So I have this problem where I get my score to update, and then it turns the span text to the next number, but it always seems to stop at 9. I tried adding in more 0s into my original span text, but it just doesn't seem to want to go past 9. If anyone could help me fix this, it would greatly be appreciated.

EDIT: Here is where the problem likely lies:

let currentScore = document.getElementById('currentScore').value = score;

and

checkScore();

I don't really know how to shorten this further, but give pointers to what specifically is causing the problem.

<html>
  <head>
  </head>
  <body onload ="checkScore">
          <script>
              
          </script>
            <p><span style="color:red">Your</span> <span style="color:orange">current</span> <span style="color:gold">High</span> <span style="color:green">Score</span> <span style="color:blue">is:</span>
            <span id="SCORES" style="color:purple">0</span>
            <input id="currentScore" type="hidden"> 
   <script>
    var cookie;

              function setCookie(cname,cvalue,exdays) {
                  var d = new Date();
                  d.setTime(d.getTime() + (exdays*365*7*24*60*60*1000));
                  var expires = "expires=" + d.toGMTString();
                  cookie = encodeURI(cname + "=" + cvalue + ";" + expires + ";path=/");
              }

              function getCookie(cname) {
                  var name = cname + "=";
                  var decodedCookie = decodeURIComponent(cookie);
                  var ca = decodedCookie.split(';');
                  for(var i = 0; i < ca.length; i++) {
                      var c = ca[i];
                      while (c.charAt(0) == ' ') {
                          c = c.substring(1);
                      }
                      if (c.indexOf(name) == 0) {
                          return c.substring(name.length, c.length);
                      }
                  }
                  return "";
              }

              function checkScore() {
                // get current score
                let currentScore = document.getElementById('currentScore').value;

                //get high score from the "cookie"
                let highScore = getCookie('highscore');

                // if current score is bigger then high score - set new high score and update cookie
                if (highScore < currentScore) {
                  highScore = currentScore;
                  setCookie("highscore", highScore, 365);
                }

                // update DOM
                document.getElementById("SCORES").innerHTML = highScore;
              }

              // set inital cookie for this example to work
              setCookie("highscore", -1, 365);
    
    
    
    
    
    
    
    
    
    
    
    
   var
   COLS = 26,
   ROWS = 26,
   EMPTY = 0,
   SNAKE = 1,
   FRUIT = 2,
   LEFT  = 0,
   UP    = 1,
   RIGHT = 2,
   DOWN  = 3,
   KEY_LEFT  = 65,
   KEY_UP    = 87,
   KEY_RIGHT = 68,
   KEY_DOWN  = 83,

   canvas,
   ctx,
   keystate,
   frames,
   score;
    currentScore;
   grid = {
    width: null,
    height: null,
    _grid: null,
    init: function(d, c, r) {
     this.width = c;
     this.height = r;
     this._grid = [];
     for (var x=0; x < c; x++) {
      this._grid.push([]);
      for (var y=0; y < r; y++) {
       this._grid[x].push(d);
      }
     }
    },
    set: function(val, x, y) {
     this._grid[x][y] = val;
    },
    get: function(x, y) {
     return this._grid[x][y];
    }
   }
   snake = {
    direction: null,
    last: null,
    _queue: null,
    init: function(d, x, y) {
     this.direction = d;
     this._queue = [];
     this.insert(x, y);
    },
    insert: function(x, y) {
     this._queue.unshift({x:x, y:y});
     this.last = this._queue[0];
    },
    remove: function() {
     return this._queue.pop();
    }
   };
   function setFood() {
    var empty = [];
    for (var x=0; x < grid.width; x++) {
     for (var y=0; y < grid.height; y++) {
      if (grid.get(x, y) === EMPTY) {
       empty.push({x:x, y:y});
      }
     }
    }
    var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
    grid.set(FRUIT, randpos.x, randpos.y);
   }
   function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    ctx.font = "18px Helvetica";
    frames = 0;
    keystate = {};
    document.addEventListener("keydown", function(evt) {
     keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function(evt) {
     delete keystate[evt.keyCode];
    });
    init();
    loop();
   }
   function init() {
    score = 0;
        currentScore = 0;
    grid.init(EMPTY, COLS, ROWS);
    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);
    setFood();
   }
   function loop() {
    update();
    draw();
    window.requestAnimationFrame(loop, canvas);
   }
   function update() {
    frames++;
    if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
     snake.direction = LEFT;
    }
    if (keystate[KEY_UP] && snake.direction !== DOWN) {
     snake.direction = UP;
    }
    if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
     snake.direction = RIGHT;
    }
    if (keystate[KEY_DOWN] && snake.direction !== UP) {
     snake.direction = DOWN;
    }
    if (frames%5 === 0) {
     var nx = snake.last.x;
     var ny = snake.last.y;
     switch (snake.direction) {
      case LEFT:
       nx--;
       break;
      case UP:
       ny--;
       break;
      case RIGHT:
       nx++;
       break;
      case DOWN:
       ny++;
       break;
     }
     if (0 > nx || nx > grid.width-1  ||
      0 > ny || ny > grid.height-1 ||
      grid.get(nx, ny) === SNAKE
     ) {
      return init();
     }
     if (grid.get(nx, ny) === FRUIT) {
      score++;
                let currentScore = document.getElementById('currentScore').value = score;
                checkScore();
      setFood();
     } else {
      var tail = snake.remove();
      grid.set(EMPTY, tail.x, tail.y);
     }
     grid.set(SNAKE, nx, ny);
     snake.insert(nx, ny);
    }
   }
   function draw() {
    var tw = canvas.width/grid.width;
    var th = canvas.height/grid.height;
    for (var x=0; x < grid.width; x++) {
     for (var y=0; y < grid.height; y++) {
      switch (grid.get(x, y)) {
       case EMPTY:
        ctx.fillStyle = "#000";
        break;
       case SNAKE:
        ctx.fillStyle = "#4aa024";
        break;
       case FRUIT:
        ctx.fillStyle = "#f00";
        break;
      }
      ctx.fillRect(x*tw, y*th, tw, th);
     }
    }
    ctx.fillStyle = "#49c2ff";
    ctx.fillText("SCORE: " + score, 10, canvas.height-10);
   }
   main();
   </script>
  </body>
</html>

1

There are 1 answers

2
Nandu Kalidindi On

I am not sure why you are updating currentScore input it is a hidden input. I changed all document.getElementById('currentScore') selectors to document.getElementById('SCORES') because span is where you are actually showing the highscore.

I will post on why it was stopping at 9 with your previous code soon.

<html>
  <head>
  </head>
  <body onload ="checkScore">
          <script>
              
          </script>
            <p><span style="color:red">Your</span> <span style="color:orange">current</span> <span style="color:gold">High</span> <span style="color:green">Score</span> <span style="color:blue">is:</span>
            <span id="SCORES" style="color:purple">0</span>
            <input id="currentScore" type="hidden"> 
   <script>
    var cookie;

              function setCookie(cname,cvalue,exdays) {
                  var d = new Date();
                  d.setTime(d.getTime() + (exdays*365*7*24*60*60*1000));
                  var expires = "expires=" + d.toGMTString();
                  cookie = encodeURI(cname + "=" + cvalue + ";" + expires + ";path=/");
              }

              function getCookie(cname) {
                  var name = cname + "=";
                  var decodedCookie = decodeURIComponent(cookie);
                  var ca = decodedCookie.split(';');
                  for(var i = 0; i < ca.length; i++) {
                      var c = ca[i];
                      while (c.charAt(0) == ' ') {
                          c = c.substring(1);
                      }
                      if (c.indexOf(name) == 0) {
                          return c.substring(name.length, c.length);
                      }
                  }
                  return "";
              }

              function checkScore() {
                // get current score
                let currentScore = parseInt(document.getElementById('SCORES').innerHTML);

                //get high score from the "cookie"
                let highScore = getCookie('highscore');

                // if current score is bigger then high score - set new high score and update cookie
                if (highScore < currentScore) {
                  highScore = currentScore;
                  setCookie("highscore", highScore, 365);
                }

                // update DOM
                document.getElementById("SCORES").innerHTML = highScore;
              }

              // set inital cookie for this example to work
              setCookie("highscore", -1, 365);
    
    
    
    
    
    
    
    
    
    
    
    
   var
   COLS = 26,
   ROWS = 26,
   EMPTY = 0,
   SNAKE = 1,
   FRUIT = 2,
   LEFT  = 0,
   UP    = 1,
   RIGHT = 2,
   DOWN  = 3,
   KEY_LEFT  = 65,
   KEY_UP    = 87,
   KEY_RIGHT = 68,
   KEY_DOWN  = 83,

   canvas,
   ctx,
   keystate,
   frames,
   score;
    currentScore;
   grid = {
    width: null,
    height: null,
    _grid: null,
    init: function(d, c, r) {
     this.width = c;
     this.height = r;
     this._grid = [];
     for (var x=0; x < c; x++) {
      this._grid.push([]);
      for (var y=0; y < r; y++) {
       this._grid[x].push(d);
      }
     }
    },
    set: function(val, x, y) {
     this._grid[x][y] = val;
    },
    get: function(x, y) {
     return this._grid[x][y];
    }
   }
   snake = {
    direction: null,
    last: null,
    _queue: null,
    init: function(d, x, y) {
     this.direction = d;
     this._queue = [];
     this.insert(x, y);
    },
    insert: function(x, y) {
     this._queue.unshift({x:x, y:y});
     this.last = this._queue[0];
    },
    remove: function() {
     return this._queue.pop();
    }
   };
   function setFood() {
    var empty = [];
    for (var x=0; x < grid.width; x++) {
     for (var y=0; y < grid.height; y++) {
      if (grid.get(x, y) === EMPTY) {
       empty.push({x:x, y:y});
      }
     }
    }
    var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
    grid.set(FRUIT, randpos.x, randpos.y);
   }
   function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    ctx.font = "18px Helvetica";
    frames = 0;
    keystate = {};
    document.addEventListener("keydown", function(evt) {
     keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function(evt) {
     delete keystate[evt.keyCode];
    });
    init();
    loop();
   }
   function init() {
    score = 0;
        currentScore = 0;
    grid.init(EMPTY, COLS, ROWS);
    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);
    setFood();
   }
   function loop() {
    update();
    draw();
    window.requestAnimationFrame(loop, canvas);
   }
   function update() {
    frames++;
    if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
     snake.direction = LEFT;
    }
    if (keystate[KEY_UP] && snake.direction !== DOWN) {
     snake.direction = UP;
    }
    if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
     snake.direction = RIGHT;
    }
    if (keystate[KEY_DOWN] && snake.direction !== UP) {
     snake.direction = DOWN;
    }
    if (frames%5 === 0) {
     var nx = snake.last.x;
     var ny = snake.last.y;
     switch (snake.direction) {
      case LEFT:
       nx--;
       break;
      case UP:
       ny--;
       break;
      case RIGHT:
       nx++;
       break;
      case DOWN:
       ny++;
       break;
     }
     if (0 > nx || nx > grid.width-1  ||
      0 > ny || ny > grid.height-1 ||
      grid.get(nx, ny) === SNAKE
     ) {
      return init();
     }
     if (grid.get(nx, ny) === FRUIT) {
      score++;
                let currentScore = document.getElementById('SCORES').innerHTML = score;
                checkScore();
      setFood();
     } else {
      var tail = snake.remove();
      grid.set(EMPTY, tail.x, tail.y);
     }
     grid.set(SNAKE, nx, ny);
     snake.insert(nx, ny);
    }
   }
   function draw() {
    var tw = canvas.width/grid.width;
    var th = canvas.height/grid.height;
    for (var x=0; x < grid.width; x++) {
     for (var y=0; y < grid.height; y++) {
      switch (grid.get(x, y)) {
       case EMPTY:
        ctx.fillStyle = "#000";
        break;
       case SNAKE:
        ctx.fillStyle = "#4aa024";
        break;
       case FRUIT:
        ctx.fillStyle = "#f00";
        break;
      }
      ctx.fillRect(x*tw, y*th, tw, th);
     }
    }
    ctx.fillStyle = "#49c2ff";
    ctx.fillText("SCORE: " + score, 10, canvas.height-10);
   }
   main();
   </script>
  </body>
</html>