處理js - 水平滾動

即時嘗試使用鼠標進行地圖滾動，我有一些問題/我想問的疑惑。處理js - 水平滾動

有沒有更好的方法來設計更復雜的級別？我認爲這種方式在性能方面不是很好。
該卷軸有一些問題;如果你看到，當我們向右滾動時，最後所有的第一行向左移動一點。當我們向左滾動時也會發生。第一個方塊向右移動。有沒有辦法來防止這種情況？

這裏是我的代碼：

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

在此先感謝=）

來源

2016-02-27 eskimopest

當我嘗試運行此代碼時，出現編譯錯誤：'意外的令牌：['。你確定你在使用Processing.js嗎？你可以張貼小提琴什麼的？ –

我不知道小提琴的工作原理。因爲這是processing.js我認爲你必須有pde文件和processing.js文件，所以我不認爲它會在小提琴上工作。只有當我可以將文件上傳到某處並且我現在沒有任何方式執行該操作時= X – eskimopest

我想提供幫助，但無法運行代碼。您使用的是哪個版本的Processing編輯器？你有鏈接到這個代碼運行的地方？獲得JavaScript幫助的最佳方式是發佈jsfiddle，特別是如果其他人不能複製並粘貼代碼來運行它。 –

我對你的問題的第2部分的解決方案：

要在汗學院的代碼，添加「+0.5」到草的x位置。它應該是這樣的：

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

我真的不能解釋爲什麼這個工作，而且它可能不是最好的解決方案，因爲它把草0.5px，但它是一個快速解決方案，以避免與問題一排草突然消失。

來源

2016-09-02 15:54:22

處理js - 水平滾動

回答

相關問題