处理js - 水平滚动答案

【问题标题】：Processing js - Level Scroll处理js - 水平滚动
【发布时间】：2016-06-10 16:38:51
【问题描述】：

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

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

这是我的代码：

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

提前致谢 =)

【问题讨论】：

当我尝试运行此代码时，我得到一个编译错误：unexpected token:[。你确定你使用的是 Processing.js 吗？你能发个小提琴什么的吗？
我不知道小提琴是如何工作的。由于这是 processing.js，我认为您必须拥有 pde 文件和 processing.js 文件，所以我认为它不适用于小提琴。只有当我可以将文件上传到某个地方并且我现在没有任何办法这样做时=X
我想帮忙，但我无法运行您的代码。您使用的是什么版本的处理编辑器？你有这个代码在某处运行的链接吗？获得 JavaScript 帮助的最佳方式是发布 jsfiddle，尤其是在其他人无法复制和粘贴您的代码来运行它的情况下。
我在本地制作。不用担心。我会看看我是否可以在小提琴上完成这项工作
好的，我想我找到了办法。链接到可汗学院 - khanacademy.org/computer-programming/mousescroll/2926105344 如果您看到，如果您滚动到最右边而不是向后滚动，则存在问题，并且如果您向下滚动并返回。欢迎任何帮助

标签： javascript processing processing.js

【解决方案1】：

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

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

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

我无法真正解释为什么会这样，而且它可能不是最好的解决方案，因为它将草移动了 0.5 像素，但它是一种快速解决方案，可以避免一排草突然消失的问题。

【讨论】：