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>
I am not sure why you are updating
currentScoreinput it is a hidden input. I changed alldocument.getElementById('currentScore')selectors todocument.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.