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循环部分，特别是使用ctx.fillRect变量的gs命令。他们为什么写-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

中查看Math对象的文档

这是选择范围内随机值的常用方法。

这个蛇游戏由20x20网格组成。

Math.floor和Math.random用于在游戏的游戏区域内的某处随机选择一个区块，然后前面的线条绘制一个＆＃34; apple＆＃34;用红色方块表示。

Math.random返回0到1之间的十进制数，因此将其乘以tc将返回0到tc之间的十进制数（20）。但是既然你想要一个整数，那么结果就是floor，这意味着你向下舍入到最接近的整数。

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

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

JavaScript Snake游戏ctx问题

1 个答案: