Question

我试图用鼠标滚动地图，我想问一些问题/怀疑。

有更好的方法来设计更复杂的关卡吗？我认为这种方式在表现方面并不是很好。
卷轴有一些问题;如果你看到，当我们滚动到右边时，最后所有的第一行向左移动了一点。当我们向左滚动时也会发生。第一个方块向右移动。有没有办法防止这种情况？

这是我的代码：

/* @pjs preload="images/grass.png" */

var level = [];
var level_1 = [
    "egggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggge",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg",
    "egggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggge",

];
var wid;
var hi;


var Ground = function(x, y, label) {
    this.x = x;
    this.y = y;
    this.label = label;
};
Ground.prototype.draw = function() {
    if(this.label == "g") {
        PImage name;
        name = loadImage("images/grass.png");

        image(name, this.x, this.y);
    }
};


void makeLevel() {
    for(var i = 0; i < level_1.length; i++) {
        for(var j = 0; j < level_1[i].length; j++) {
            switch(level_1[i][j]) {
                case "g" :
                    level.push(new Ground(j*15, i*15, "g"));
                    break;
                case "e" :
                    level.push(new Ground(j*15, i*15, "e"));
                    break;
            }
            wid = level_1[i].length-1;
        }
    }
}

makeLevel();

void draw() {
    background(0);

    for(var i=0; i < level.length; i++) {
        level[i].draw();

        if(mouseX <= width && mouseX >= width-15 && level[wid].x > width-15) {
            level[i].x -= 5;
        }
        if(mouseX <= 15 && mouseX >= 1 && level[0].x < 0) {
            level[i].x += 5;
        }
        if(mouseY >= height-15 && mouseY <= height && level[level.length-1].y > height-20) {
            level[i].y -= 5;
        }
        if(mouseY <= 15 && mouseY >= 1 && level[0].y < 0) {
            level[i].y += 5;
        }
    }
}

提前感谢=）

Answer 1

我对你问题的第2部分有一个解决方案：

在Khan Academy的代码中，将“+0.5”添加到草的x位置。它应该是这样的：

level.push(new Ground(j*20 + 0.5, i*20, "g")); // grass

我无法解释为什么会这样，并且它可能不是最好的解决方案，因为它将草移动0.5px，但它是一个快速修复，以避免一排草突然消失的问题。

处理js - 级别滚动

1 个答案: