是否有可能使用vanilla javascript創建一個跟隨玩家的視口？

我想知道如何製作一個跟隨玩家的視口，例如在sidescrolling遊戲中。我有一個半工作版本，但它需要我移除除了玩家之外的所有東西。是否有可能使用vanilla javascript創建一個跟隨玩家的視口？

ctx.translate(canvX,canvY); 
    drawBlocks(); 
    ctx.restore()

這種方式現在可行，但我將不得不畫出敵人和其他物體，而且我不想不斷地重做這個過程。我正在尋找一個簡單的解決方案，基本上涉及跟隨玩家的相機。這可能嗎？

來源

2017-07-02 Azhi

您確實沒有提供足夠的代碼來幫助您，但無論哪種方式，您都應該嘗試一種面向對象的方法，或者使用框架或庫（如pixi.js或phaser.io）進行研究。 –

我假設所有情況下的基本想法都是一樣的，但如果有幫助，您可以看到我開始使用的代碼。 https://www.codecademy.com/azhiguore/codebits/Jwh0VH – Azhi

沒有辦法只是'製造'一臺相機。我確實想到了一個黑客。你可以製作一個非常大的畫布，把它放在一個非常小的div中，然後隨着玩家的移動將畫布移動到div的內部，但這對性能有很大的影響。我的建議是嘗試使用遊戲引擎或其他庫，例如我提到的兩個庫，以瞭解它們如何處理輕鬆移動畫布周圍的一組精靈。 –

使用類似three.js的遊戲。因爲你必須每秒繪製多少幀，而且畫布對此並不好（如果你現在不相信我，等到你不得不在畫面上畫更多的東西）。

但是，對於您當前的代碼，我注意到的一件事是您錯過了save。

如果這不是問題，我不認爲它是基於你的問題，你不想重新繪製所有的東西，只有背景？實際上，您可以使用多個圖層，以便每個敵人都是HTML元素，並且只有在動畫幀更改時纔會重繪敵人。然後你只需要移動他們的元素（在性能方面比重新繪製便宜一點）。

THREE.JS是你應該學習..它會真的幫助你。

來源

2017-07-02 01:33:48 Funkodebat

再次，使用香草JavaScript是首選。有沒有辦法從three.js轉換爲JavaScript？ – Azhi

您知道Three.js使用畫布，並且在速度方面沒有優勢（我會說實際上減緩了畫布的下滑而不需要額外的開銷），而不是直接使用畫布及其各種API – Blindman67

它使用不同的上下文。他的代碼使用'translate'，這意味着他做了'canvas.getContext（'2d'）'，而threejs使用'webgl'而不是2d。 webgl使用視頻卡（許多管道）而不是處理器（單管道）。我不知道你想要做什麼，你只想使用香草。沒有更多信息很難給你指導。 – Funkodebat

是否有可能使用vanilla javascript創建一個跟隨玩家的視口？

回答

相關問題