JavaScript Snake game ctx issue

Question

Javascriptでヘビのゲームコードの一部に問題があります。私はそれがどのように動作するのか理解できません。私は理解していない部分は、このいずれかになります。

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 = 5; 
     } 
    } 
    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); 

私は理解していない事がforループ部、gs変数を使用して、具体的ctx.fillRectコマンドです。なぜ彼らは-2で書かれていますか？また、Math.floorとMath.randomの機能は、どのように機能しますか？ 全体のコードはこれです：

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

<script> 
window.onload=function() { 
canv=document.getElementById("gc"); 
ctx=canv.getContext("2d"); 
document.addEventListener("keydown",keyPush); 
setInterval(game,1000/15); 
} 
px=py=10; //positionX ; positionY 
gs=tc=20; // grid scale ; tile count 
ax=ay=15; // appleX ; appleY - food for the snake 
xv=yv=0; // velocityX ; velocityY 
trail=[]; 
tail = 5; 
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 = 5; 
    } 
} 
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; 
    } 
    } 
    </script> 

Answer 1

まずこれは、範囲内のランダムな値を選択する一般的な方法ですhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

JavaScriptでは、あなたがMathオブジェクトのドキュメントをチェックアウトする必要があります。

このスネークゲームは、20×20グリッドのタイルで構成されています。

Math.floorおよびMath.randomは、ゲームのプレイエリア内のどこかでタイルをランダムに選択し、進行中の線が赤い四角で表される「りんご」を描画するために使用されます。

Math.randomは0と1の間の10進数を返します。したがって、tcを乗算すると、0とtc（20）の間の10進数が返されます。しかし、整数が必要な場合はfloorという結果になります。つまり、最も近い整数に切り捨てます。

axとayの両方に対してこれを実行して、リンゴのxタイルとyタイルをそれぞれ取得します。

fillRectでgs-2を使用している場合、提供されているコードからわかるはずの明らかな理由はありません。それは文体的な選択かもしれないし、レンダリングのやり方に関係するかもしれない。 -2を取り出し、ゲームに大きな影響を与えるかどうか観察します。