如何使用 Pixi.js 构建视差滚动器答案

【问题标题】：How to build a Parallax Scroller with Pixi.js如何使用 Pixi.js 构建视差滚动器
【发布时间】：2020-04-13 09:19:57
【问题描述】：

我在使用 pixi.js "Building a Parallax Scroller with Pixi.js: Part 1" 教程时遇到问题。

<!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Parallax Scrolling Demo</title>
    <style> 
        body { background-color: #000000; }
        canvas { background-color: #222222;}
        </style>
 </head>
 <body onload="init();">
    <div align= "center">
        <canvas id= "game-canvas" width= "512" height="384"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js" ></script>
    <script> 
        function init() {
            stage = new PIXI.Container();
            renderer = PIXI.autoDetectRenderer(512,384, {view:document.getElementById("game-canvas")});

            var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
            far = new PIXI.Sprite(farTexture);
            far.position.x = 0;
            far.position.y = 0;
            stage.addChild(far)S

            renderer.render(stage);
        }
        </script>

 </body>
 </html>

我无法渲染我的图像。

【问题讨论】：

教程链接失效
现在我也遇到了 CORS 错误。有这玩意吗？？
教程链接：yeahbutisitflash.com HTML5 Parallax教程下
您是否遇到与此相关的 Sublime Text 包的问题？如果不是，我认为这不是 Sublime Text 问题；作为文本编辑器，它与浏览器如何解释您使用它编写的代码无关。
我认为传递尽可能多的信息很重要。

标签： javascript html pixi.js

【解决方案1】：

在 Microsoft 中构建文件时，请务必返回属性-->安全并确保您的权限设置匹配（针对每个文件）。此外，为了避免 CORS 错误，使用管理设置也很重要；特别是 IIS 或 Internet 信息服务中的设置。在这里，您需要检查和调整您的权限设置。

【讨论】：