2017-07-11 33 views
-1

你好我有一個問題,我不能回答,需要它來完成,甚至開始我的網站。p5js網站無限頁

我能夠創建p5js風格它的CSS,然後裝入用html.index網站帆布..

我想知道如何建立一個網頁,是無止境的,例如,如果我向右滾動5分鐘它滾動,反之亦然左上下....

很多喜歡這裏本網站...

//使用閃存///

http://www.bio-bak.nl/

我基本上想創建一個類似於上面的鏈接或甚至類似於谷歌地圖的世界或大型頁面.....

頁面可以無限​​滾動使用html,p5js,js或任何可能的所有方向。

我問過別人,他們可能使用也許使用document.body.scrollTop這種想法

if Pos > height - ~10% height =height + 100px//do same for right,left,up,down. 

我遇到的問題是我用p5js創建畫布,我可以定位畫布,但是我不知道如何將畫布放置在畫布下方的頁面下方?

希望通過查看您上面的網站也許可以瞭解我想要的。

我在代碼中發現的一個問題是我總是到達頁面的左上角,我想這是x,y 0,0 possible..but我希望我的畫布出現在頁面中間,所以當我到達在網站上,我可以滾動向左右反正目前如果我刷新網站,並在頁面上到達我只能向右滾動或向下滾動我無法滾動所有方向,因爲我已經在x,y從pos 0,0是什麼。我相信

請,如果有人能搞到的想法會喜歡一些幫助作爲其唯一的事情,我需要繼續我的網站的建設...

我真正想要的是完全一樣的網站上面發佈我想滾動或拖動很長一段路所有的方向與平臺遊戲中我一直在一個方向上一致?

由於事先的第一篇文章曾經在這裏和新自幾個月編碼...

享受

+0

嗨!爲了讓我們能夠幫助你,你應該儘量簡潔一些,並且提供[mcve](/ help/mcve)。另外,你是否檢查了[tour](/ tour)? –

回答

0

你真的有兩個問題:

問題一:如何繪製無限頁面?

有很多方法可以做到這一點。您可以使用程序生成或不斷加載新數據,也可以在物品離開頂部時將其「傳送」到底部,或者您並非真正意義上的無限,而是可以畫出屏幕上的東西。

你真的沒有說你怎麼這樣做,但我想你大多詢問的第二個問題:

問題二:我如何改變我的無限頁面的看法?

還有很多方法可以做到這一點。想想這個最簡單的方法之一就是畫出你的場景(可以從開始畫出大量的場景),但是對於每個座標都有一個偏移量,爲了改變「相機」在哪裏。像這樣:

var offsetX = 0; 

function setup() { 
    createCanvas(400, 400); 
} 

function mouseDragged(){ 
    offsetX += (mouseX - pmouseX)/2; 
} 

function draw() { 
    background(220); 
    for(var i = 0; i < 1000; i++){ 
     ellipse(-10000 + i*100 + offsetX, height/2, 100, 100); 
    } 
} 

鏈接到可運行的代碼:here

你也可以使用像translate()這樣的功能移動攝像頭而不是使用偏移量。

+0

這是很好,謝謝你讓我分配進一步的感謝,你能解釋一件事\t橢圓(-10000 + i * 100 + offsetX,offsetY,100,100); \t這適用於兩個方向。但是-10000 +等等是幹什麼的? –

+0

這是很好,謝謝你讓我進一步分配謝謝,你能解釋一件事\t橢圓(-10000 + i * 100 + offsetX,offsetY,100,100); \t這對兩個方向都適用。但是什麼-10000 + i * 100等呢?它仍然和橢圓(x,y,w,[h])一樣嗎?[h]在h和h之間做什麼?頁面和canvas之間有什麼區別?就像我選擇一個小畫布並打開它時一樣它顯示了一個角落裏的小畫布,而不是改變firfox選項卡的大小? –

+0

如果我想使用(mouseX - pmouseX),而不是一個elipse,我想用一堆東西,imgs,gifs,

和東西來做到這一點,我怎麼能把它們變成一個可擴展? –

0

這是一個很大的野心,所以我不會提供一個完整的解決方案,而是一些想法讓你開始。

首先使用Window.innerWidth來獲取窗口的大小並設置大的畫布。現在,你有一個全屏畫布。檢測用戶何時滾動使用mouseWheel()。這應該是你需要通過p5.js創建一個假「無盡滾動」的一切。

現在使用translate()移動您想要的項目,確保通過您收集的mouseWheel()輸入來抵消它們的位置。這應該會造成無限滾動的錯覺。