How do I add a counter in my javascript game?

Question

I got this game coded in Javascript:

 window.onload = function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown", keyPush); setInterval(game, 1000 / 7); } px = py = 10; gs = tc = 27; ax = ay = 15; xv = yv = 0; trail = []; tail = 2; function game () { px += xv; py += yv; if (px < 0) { px = tc - 1; } if (px > tc - 1) { px = 0; } if (py < 0) { py = tc-1; } if (py > tc - 1) { py = 0; } ctx.fillStyle = "black"; ctx.fillRect(0, 0, canv.width, canv.height); ctx.fillStyle = "lime"; for(var i = 0; i < trail.length; i++) { ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2); if (trail[i].x == px && trail[i].y == py) { tail = 2; } } trail.push({ x: px, y: py }); while(trail.length > tail) { trail.shift(); } if (ax == px && ay == py) { tail++; ax = Math.floor(Math.random() * tc); ay = Math.floor(Math.random() * tc); } ctx.fillStyle = "red"; ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2); } function keyPush(evt) { switch(evt.keyCode) { case 37: xv = -1; yv = 0; break; case 38: xv = 0; yv = -1; break; case 39: xv = 1; yv = 0; break; case 40: xv = 0; yv = 1; break; } }

 <canvas id="gc" width="729" height="729"></canvas>

And I want to add a counter anywhere on the page, so it counts how long the "tail" is.
I have tried a little myself but it doesn't seem to work, any ideas how I should do?

Also another question... how do I change the code with a button or text field on a webpage? Like for example changing:
setInterval(game,1000/7);
to
setInterval(game,1000/9);
with a button or a text field, where you can type the numbers and it gets pasted into the code?

Answer 1

To use predefined value as you setInterval timer, all you need to do is to find your best method of getting user inputs, eg using an input box . Then you can grab the value with javascript

Eg

[HTML]
<input type="number" value="500" id="num">

[JS]

let num = document.getElementById('num').value;
num = +num; //cast the value to number since its returned as a string.

setInterval(game, num/nth); //nth is any value of your choice, or you can also grab from user input
```

For your first question, getting how long the tail is depends on how you want it.
you can use a variable and always increment it, each time your code condition is met.

Answer 2

In order to write the trail length in the canvas, I added to your code

ctx.fillStyle = "blue";
ctx.fillText(trail.length, 100, 100);
ctx.font = "bold 20px sans-serif";
ctx.textBaseline = "bottom";

that way it constantly prints the trail length at the top left corner. and as for your second question, I added the intervalTime variable at the global scope so you could change it and then the next interval will be in the time you entered to that variable.

 var intervalTime = 1000/7; window.onload=function() { canv=document.getElementById("gc"); ctx=canv.getContext("2d"); document.addEventListener("keydown",keyPush); setInterval(game, intervalTime); } px=py=10; gs=tc=27; ax=ay=15; xv=yv=0; trail=[]; tail = 2; function game() { px+=xv; py+=yv; if(px<0) { px= tc-1; } if(px>tc-1) { px= 0; } if(py<0) { py= tc-1; } if(py>tc-1) { py= 0; } ctx.fillStyle="black"; ctx.fillRect(0,0,canv.width,canv.height); ctx.fillStyle = "blue"; ctx.fillText(trail.length, 100, 100); ctx.font = "bold 20px sans-serif"; ctx.textBaseline = "bottom"; ctx.fillStyle="lime"; for(var i=0;i<trail.length;i++) { ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2); if(trail[i].x==px && trail[i].y==py) { tail = 2; } } trail.push({x:px,y:py}); while(trail.length>tail) { trail.shift(); } if(ax==px && ay==py) { tail++; ax=Math.floor(Math.random()*tc); ay=Math.floor(Math.random()*tc); } ctx.fillStyle="red"; ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2); } function keyPush(evt) { switch(evt.keyCode) { case 37: xv=-1;yv=0; break; case 38: xv=0;yv=-1; break; case 39: xv=1;yv=0; break; case 40: xv=0;yv=1; break; } }

 <canvas id="gc" width="729" height="729"></canvas>

Answer 3

And i want to add a counter anywhere on the page, so it counts how long the "tail" is. I have tried a little myself but it dosen't seem to work, any ideas how i do?

For this question, you can add an element to the page and then update it's text in javascript each time the tail changes length (using the innerText property of the element).

Sample html element:

<!-- inside the body element -->
<div>
    <span>Tail Count: </span>
    <span id="tail-counter">2</span>
</div>

And the javascript:

while (trail.length > tail) {
    trail.shift();
    document.getElementById("tail-counter").innerText = tail;
}

if (ax == px && ay == py) {
    tail++;
    document.getElementById("tail-counter").innerText = tail;
    ax = Math.floor(Math.random() * tc);
    ay = Math.floor(Math.random() * tc);
}

Also another queston... how do i change the code with a button or text field on a webpage? Like for example changing setInterval(game,1000/7); to setInterval(game,1000/9); with a button or a text field, where you can type the numbers and it gets pasted into the code?

For this question, to change the code based on a text field, you need to first add the text field to the page:

<div>
    <span>Set Game Speed: </span>
    <input id="game-speed" type="number" value="7" />
</div>

Then you can use javascript to get the value of the text field and use it in your code

game_speed = Number.parseInt(document.getElementById("game-speed").value);
interval = setInterval(game, 1000 / game_speed);

Now all together (note that this code allows you to change the game speed while playing. This is done by clearing the interval you already made with clearInterval and then setting a new interval with the new game speed)

 <canvas id="gc" width="729" height="729"></canvas> <body style="overflow-x: hidden; overflow-y: hidden;"> <div> <span>Tail Count: </span> <span id="tail-counter">2</span> </div> <div> <span>Set Game Speed: </span> <input id="game-speed" type="number" value="7" /> </div> </body> <script> px = py = 10; gs = tc = 27; ax = ay = 15; xv = yv = 0; trail = []; tail = 2; game_speed = 7; interval = {}; window.onload = function () { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown", keyPush); game_speed = Number.parseInt(document.getElementById("game-speed").value); interval = setInterval(game, 1000 / game_speed); } function game() { let new_speed = Number.parseInt(document.getElementById("game-speed").value); if (new_speed !== game_speed) { clearInterval(interval); game_speed = new_speed; interval = setInterval(game, 1000 / game_speed); } px += xv; py += yv; if (px < 0) { px = tc - 1; } if (px > tc - 1) { px = 0; } if (py < 0) { py = tc - 1; } if (py > tc - 1) { py = 0; } ctx.fillStyle = "black"; ctx.fillRect(0, 0, canv.width, canv.height); ctx.fillStyle = "lime"; for (var i = 0; i < trail.length; i++) { ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2); if (trail[i].x == px && trail[i].y == py) { tail = 2; } } trail.push({ x: px, y: py }); while (trail.length > tail) { trail.shift(); document.getElementById("tail-counter").innerText = tail; } if (ax == px && ay == py) { tail++; document.getElementById("tail-counter").innerText = tail; ax = Math.floor(Math.random() * tc); ay = Math.floor(Math.random() * tc); } ctx.fillStyle = "red"; ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2); } function keyPush(evt) { switch (evt.keyCode) { case 37: xv = -1; yv = 0; break; case 38: xv = 0; yv = -1; break; case 39: xv = 1; yv = 0; break; case 40: xv = 0; yv = 1; break; } } </script> <html>