JavaScript游戏-逻辑错误

我正在用JavaScript画布编写一个小电脑游戏。（对我来说，这是一个相当大的项目）

正如你所看到的，我正在制作一个游戏，一个刺客（此刻只是一个绿色的盒子）能够在场景中移动。（还有一个hp和mp条）

这种草是用窦房结函数生成的。这是草地的代码：

// this function is called every frame.
function drawGrass() {
    ctx.fillStyle = "#000";
    var countDetailGrass = 0;

    ctx.moveTo(0+player.x+WIDTH/2, HEIGHT-200);
    ctx.beginPath();

    for(var i=0; i<WIDTH+options.grassResolution; i+=options.grassResolution) {
        ctx.lineTo(i-player.x+WIDTH/2, HEIGHT-200+Math.floor(Math.sin(i/12)*3));
        countDetailGrass++;
        drawDetailGrass(i-player.x+WIDTH/2, Math.floor(Math.sin(i/12)*3), countDetailGrass);
    }

    //for(var i=0+player.x; i<WIDTH+options.grassResolution; i+=options.grassResolution) { ctx.lineTo(i-player.x, HEIGHT-200+Math.floor(Math.sin(i/12)*3)); }
    //for(var i=0; i<WIDTH+options.grassSteps; i+=options.grassSteps) { countDetailGrass++; drawDetailGrass(i-player.x, Math.floor(Math.sin(i/12)*3), countDetailGrass); }
    //for(var i=0-player.x+WIDTH; i<2*WIDTH+options.grassResolution-player.x; i+=options.grassResolution) { ctx.lineTo(i+player.x-WIDTH, HEIGHT-200+Math.floor(Math.sin(i/12)*3)); }
    //for(var i=0-player.x+WIDTH; i<2*WIDTH+options.grassSteps-player.x; i+=options.grassSteps) { countDetailGrass++; drawDetailGrass(i+player.x-WIDTH, Math.floor(Math.sin(i/12)*3), countDetailGrass); }
    ctx.moveTo(WIDTH, HEIGHT); ctx.moveTo(0, HEIGHT); ctx.moveTo(0, HEIGHT-200);
    ctx.closePath();
    ctx.stroke();
}

function drawDetailGrass(pos1, pos2, count) {
    count += Math.floor(Math.sin(count/100)*20);
    while(count > 4) { count -=4; }
    while(count < -4) { count +=4; }

    switch(count) {
        case 1 || -1:
            ctx.fillRect(pos1, HEIGHT-200+pos2-5, 1, 5);
            ctx.fillRect(pos1+1, HEIGHT-200+pos2-10, 1, 10);
            ctx.fillRect(pos1+2, HEIGHT-200+pos2-7, 1, 7);
            break;
        case 2 || -2:
            ctx.fillRect(pos1-4, HEIGHT-200+pos2-3, 1, 3);
            ctx.fillRect(pos1-2, HEIGHT-200+pos2-4, 1, 4); 

            ctx.fillRect(pos1, HEIGHT-200+pos2-9, 1, 9);
            ctx.fillRect(pos1+1, HEIGHT-200+pos2-7, 1, 7);
            break;
        case 3 || -3:
            ctx.fillRect(pos1, HEIGHT-200+pos2-3, 1, 3);
            ctx.fillRect(pos1+1, HEIGHT-200+pos2-2, 1, 2);
            ctx.fillRect(pos1+3, HEIGHT-200+pos2-4, 1, 4);
            break;
    }
}

//此函数每帧调用一次。
函数drawGrass（）{
ctx.fillStyle=“#000”；
var-countDetailGrass=0；
ctx.moveTo（0+播放器.x+宽度/2，高度-200）；
ctx.beginPath（）；
对于（var i=0；i我不知道你知道多少trig，但正弦是一个周期函数，周期为2π。如果你给参数加上一个偏移量，整个波根据符号向左或向右“移动”。所以画这个的最快方法是这样的

for x:=0 to width   // canvas width
  line(prevx, sin(prevx+offset), x, sin(x+offset));
  prevx:=x;

< P> >从0（左）到“代码>宽度< /代码>（右），逐段。<代码>偏移<代码>参数是您的字符移动了多少（如果我正确地理解，他应该坐在中间，所以草是实际移动的）。.
我不知道这是否是最好的方法，但你可以创建一个步数计数器，并将其与玩家的精灵移动相关联。只需在每次刷新时重新渲染你的草地，将玩家的精灵中间视为x==步数（因此，您正在渲染一个笛卡尔平面的窗口，从画布元素的上下限来渲染grass函数）。作为奖励，如果您希望在游戏中的某些点创建事件，这将为您提供传递给其他函数的内容

实际上，你所做的改变了你对运动的看法。你的草所基于的正弦波将相对于玩家精灵移动，而玩家精灵实际上是你正在创造的小世界的中心。
我不太了解你。我不知道“周期”是什么（在这种情况下）