Javascript a"；“坦克战争”；游戏

你玩过“坦克战争”游戏吗

我正在用JavaScript+Canvas（针对个人挑战）编写这个游戏，我需要的是一个算法，用于在每次启动游戏时生成随机绿地，但我的数学不是很好，所以我自己做不了

我不希望有人给我代码，我只想要算法的想法

---

谢谢

看看柏林噪声的产生，再加上良好的平滑算法，可以生成一些非常好的地形，而且速度相当快。在某个地方有一个参考版本的代码，它应该为您提供一个相当大的起点

首先，您需要一个随机y（55,65之间）的点；得到x=0 这是绿色的原点，保持为x1，y1（x1始终为0）

然后你需要一个30到40之间的随机整数。这是x2。以及在y1+8到y1+20范围内的随机y

那么x3和y3的原理是一样的（我们称之为公式类型1）

现在你需要先得到一个随机的-1或1，这将是y4的方向。所以y4可以比y3高或低。。。这将是公式类型2

你需要为一个新的y保留一个最大值和最小值，如果它穿过这个值，那么换个方向->这将是一个修正类型公式3

Xn持续增加，直到其>=电路板宽度

---

在日食中加入线。。。看来网络搜索是一条必由之路

我确信有很多代码库可以让这变得简单。但是，如果你想自己编写代码，这里是我的想法

您需要从其他所有内容中定义地形。例如，环境的每个部分都是一个集群。您需要定义这些簇的分隔方式，例如通过节点（点）分隔

你可以从一系列点创建一个多边形，这个多边形可以变成你想要的任何东西，在这里是地形

---

请注意，在您传递的图像上，有一些峰值，这些是节点（点）。记住还要在你的环境边界上定义节点。

肯定有一种新颖的书面算法，如@DesertIvy所指出的分形算法或其他算法，也可能有库，但如果你想生成图像中的内容，它可以非常简单，因为它只是点之间的（稍微弯曲的）线。如果您分阶段进行，而不是试图立即纠正，那么很容易：

使用random将游戏屏幕的x区域分割为多个部分（具有一些最小和最大宽度）（您可能在最后一部分中有点偏离，但我认为这并不重要）。记住x-E部分的交汇处（包括游戏屏幕边界处的部分）

准备一些数据结构，以便在以前记住的x-s上也包含y-s。从最左边的.y=0开始，

slope=Math.random（）-0.5

从1开始生成下一个未定义的y:

right.y=left.y+slope*（right.x-left.x）以及在每个y之后更新斜率：
slope+=Math.random（）-0.5。如果所有这些都适合游戏屏幕，暂时不要麻烦

如果需要圆弧，可以为每个截面随机生成“弯曲度”参数，该参数表示与直线相比，直线中间的凹凸程度

将ys放入游戏屏幕：首先查找生成的最大和最小y（

mingeny

，

maxgeny

）（您可以在第4点生成时跟踪此情况）。选择最大和最小y在游戏屏幕中的位置（

minsscry

，

maxscry

）（比如在顶部四分之一和底部四分之一处）。然后变换生成的y，使其跨越

minskry

和

maxscry

：对于每个点，执行

apoint.y=minskry+（maxscry-minskry）/（maxgeny-mingeny）*（apoint.y-mingeny）

现在，如果要使用“曲线度”，请使用[x，y]点之间的直线作为地形，而不是为leftx和rightx之间部分中的任何特定x向y添加

curvemodifier

。弧不需要是圆：我建议使用抛物线或余弦，这很容易产生：

var middle=（left.x+right.x）/2；var超额=（x-左）/（左中）然后是
var curvemodifier=曲线度*（1-多余*多余）
或
var curvemodifier=curveness*Math.cos（Math.PI/2*excess）

---

哇……有一次我对坦克战上瘾了

既然你在学习冒险

您还可以了解context.globalComposite操作

这个画布操作可以让你抓取一个真实草地的图像，并将其合成到你的游戏中

您可以通过更改drawImage（）的x/y来随机化草地外观

是的，实际的草可能会太分散注意力，无法包含在你完成的游戏中，但学习合成将是有价值的知识

…和+1的问题：挑战自我对你有好处

（9节）

（7节）

主要生成函数如下所示：

var numOfSegments = 9;                      // split horizontal space
var segment = canvas.width / numOfSegments; // calc width of each segment
var points = [], calcedPoints;
var variations = 0.22;                      // adjust this: lower = less variations
var i;

//produce some random heights across the canvas
for(i=0; i < numOfSegments + 1; i++) {
    points.push(segment * i);
    points.push(canvas.height / 2.8 + canvas.height * variations * Math.random());
}

//render the landscape
ctx.beginPath();
ctx.moveTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);

calcedPoints = ctx.curve(points);           // see below

ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

---

仅供参考，我认为如果你用心去做，你可以得到一个更平滑的线条（不包括ipes？），圆形多基因测序仪。完成游戏后，在此处发布游戏链接@我当然会的！为了澄清这个问题：我需要的是一种返回随机点的算法，用于绘制土地并平滑它们。我找到了另一种方法，但感谢柏林噪音，我正在为另一个项目寻找类似的方法+1这很长，+1感谢您的努力，但我找到了一个更简单的方法^^^无论如何，谢谢。谢谢！我将研究代码并在我的游戏中实现它。它是perfect@user2479365没问题。更新答案/微调并演示如何从样条曲线获得计算点。肯：天哪，太棒了！谢谢我有一个问题：“分段”是什么@tgkprog不，我不会告诉我们的

CanvasRenderingContext2D.prototype.curve = function(pts, tension, numOfSegments) {

    tension = (tension != 'undefined') ? tension : 0.5;
    numOfSegments = numOfSegments ? numOfSegments : 16;

    var _pts = [], res = [], t, i, l, r = 0,
        x, y, t1x, t2x, t1y, t2y,
        c1, c2, c3, c4, st, st2, st3, st23, st32;

    _pts = pts.concat();
    _pts.unshift(pts[1]);
    _pts.unshift(pts[0]);
    _pts.push(pts[pts.length - 2]);
    _pts.push(pts[pts.length - 1]);

    l = (_pts.length - 4);
    for (i = 2; i < l; i+=2) {

        //overrides and modifies tension for each segment.
        tension = 1 * Math.random() - 0.3;

        for (t = 0; t <= numOfSegments; t++) {
            t1x = (_pts[i+2] - _pts[i-2]) * tension;
            t2x = (_pts[i+4] - _pts[i]) * tension;      
            t1y = (_pts[i+3] - _pts[i-1]) * tension;
            t2y = (_pts[i+5] - _pts[i+1]) * tension;

            st = t / numOfSegments;
            st2 = st * st;
            st3 = st2 * st;
            st23 = st3 * 2;
            st32 = st2 * 3;

            c1 = st23 - st32 + 1; 
            c2 = -(st23) + st32; 
            c3 = st3 - 2 * st2 + st; 
            c4 = st3 - st2;

            x = c1 * _pts[i]    + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
            y = c1 * _pts[i+1]  + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;

            res[r++] = x;
            res[r++] = y;               
        } //for t
    } //for i

    l = res.length;
    for(i=0;i<l;i+=2) this.lineTo(res[i], res[i+1]);

    return res;  //return calculated points
}