JavaScript游戏 - Logicmistake

时间：2015-08-02 02:59:51

标签： javascript canvas

我正在使用JavaScript canvas编写一个小型电脑游戏。 （对我来说这是一个非常大的项目）

Screenshot

正如你所看到的，我正在制作一个游戏，一个火柴人（此刻只是一个绿色的盒子）能够穿过一个场景。 （还有一个hp和mp吧）

这种草是使用SINUS-FUNKTION产生的。这是草的代码：

// 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;
    }
}

我的问题/问题是：我怎样才能使这草无限？所以，我可以＆＃34;走路＆＃34; （改变player.x）向左和向右无限？

我已经尝试了几次（评论）但是失败了。

有人能帮助我吗？

其他一些信息：

  • WIDTH 和 HEIGHT 是画布的宽度和高度
  • player.x 标准为 WIDTH / 2
  • options.grassResolution 是变量，存在性能原因。它保存一个整数，它有标准的 15 。这意味着只显示每15个像素的窦功能。

2 个答案:

答案 0 :(得分：0)

我不知道如果这是最好的方法，但你可以创建一个步数计数器并将其与玩家精灵运动联系起来。只需重新渲染你的草，每次刷新，将玩家精灵的中间视为x ==步数（这样你就可以渲染一个笛卡尔平面的窗口渲染你的草函数，无论是上下限canvas元素碰巧是）。作为奖励，如果您想在游戏中的某些点创建活动，这将为您提供传递给其他功能的内容。

实际上，你正在做的是改变你对行动的看法。你的草所建立的罪恶波浪将相对于玩家精灵而移动，这实际上是你正在创造的小世界的中心。

答案 1 :(得分：-1)

我不知道你知道多少触发，但正弦是一个周期函数，周期为2π。如果向参数添加偏移量，则整个波形会根据符号向左或向右“移动”。所以绘制这个的最快方法就是这样的

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

所以只需逐段将它从0（左）绘制到width（右）。 offset参数是你的角色移动了多少（如果我理解正确，他应该坐在中间，所以草是实际移动的那个）。

相关问题
最新问题