JavaScript贪吃蛇游戏ctx问题

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

首先，你应该在JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

这是一个范围内选择一个随机值的常用方法检查出的文档中的数学对象。

这个蛇游戏是由一个20x20的网格瓷砖组成。

Math.floor和Math.random用于在游戏的玩区内的某个地方随机选择一个图块，然后前进线绘制一个表示为红色方块的“苹果”。

Math.random返回一个介于0和1之间的小数，所以乘以tc将返回一个0到tc（20）之间的十进制数。但既然你想要一个整数，你floor的结果，这意味着你舍入到最接近的整数。

您可以对ax和ay执行此操作，以分别获取苹果的x tile和y tile。

至于在fillRect中使用gs-2，没有明显的原因可以从提供的代码中看到。这可能是一种风格选择，或者可能与它呈现的方式有关。取出-2并观察它是否会对游戏产生重大影响。