在网站上使用可汗学院课程

Question

我是一名使用可汗学院学习编码的学生，我在那里取得了相当大的进步。我在大学里也学习了一些 HTML、CSS 和 JS。我想知道是否有办法将 my game（在可汗学院，用 ProcessingJS 编写）作为离线 HTML 页面播放。

现在，我已经做了大量的研究，然后才在这里提问。我试过以下方法：

1. This HTML template 在可汗学院。
2. This template也是。
3. Stack Overflow 上也有 this one。

使用上述任何模板都给我一个半生不熟的输出，而且键盘控件似乎无法正常工作。动画也不是。

提前致谢！

Answer 1

无耻的自我推销：我写了一篇关于部署的教程 Processing.js 可用 here。

您可以通过下载 Processing.js 库来创建页面的 "offline" 版本，您可以获得 here.

一旦有了，就可以将该文件加载到 .html 文件中。这是一个示例 index.html 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>My Sketch</title>
        <script src="processing.js"></script>
    </head>
    <body>
        <script type="application/processing">
            void setup(){
                size(200, 200);
            }

            void draw(){
                background(64);
                ellipse(mouseX, mouseY, 20, 20);
            }
        </script>
        <canvas> </canvas>
    </body>
</html>

在这种情况下，processing.js 文件紧挨着 index.html 文件，<script src="processing.js"></script> 行加载它。然后你可以在你的 JavaScript 中使用 Processing.js。您还可以使用单独的 .pde 或 .js 文件来包含您的 Processing.js 代码。

还值得注意的是，可汗学院和原版之间存在一些细微差别 Processing.js，例如使用弧度与度数。

Answer 2

其实从现在开始，有人已经为几乎所有的可汗学院项目开辟了离线工作的途径...

那个人就是我，我是不是很棒？是的是的什么。无论如何，只需单击此 link： https://github.com/prolightHub/KaTemplate

步骤：下载加载它并将其解压缩到您想要的位置。然后在index.html.

中重命名文件夹和标题

然后打开js/index.js

并将您的代码放入函数中：

function main()
{
    // Paste your Khan Academy code here
}

createProcessing(main);

打开index.html

而且应该一切正常... 有问题尽管问我。

在网站上使用可汗学院课程

using khan academy programs in websites

javascript

canvas

processing.js

khan-academy