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

时间:2017-10-24 09:54:43

标签: javascript canvas processing.js khan-academy

我是一名学生,使用可汗学院学习编码,我在那里取得了很大的进步。我在大学里也学到了很多HTML,CSS和JS。我想知道是否有办法将my game(在可汗学院编写,在ProcessingJS中编写)作为离线HTML页面。

现在,我在这里问之前做了大量的研究。我尝试过以下几点:

1.可汗学院的This HTML template
2. This template 3.而且Stack Overflow上也有this one

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

提前致谢!

2 个答案:

答案 0 :(得分:0)

无耻的自我推销:我编写了一个关于部署Processing.js的教程here

基本上,您可以通过下载Processing.js库来创建页面的“离线”版本,您可以获取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代码。

值得注意的是,Khan Academy和vanilla Processing.js之间存在一些微妙的差异,例如使用弧度与度数。

答案 1 :(得分:0)

实际上,从现在开始,有人为几乎所有可汗学院项目脱机工作提供了一种方法...

那个人是我,我不是很棒吗?是的,曾经发生过。 无论如何,只需单击此链接: https://github.com/prolightHub/KaTemplate

步骤: 下载将其加载并解压缩到所需位置。 然后在 index.html 中重命名文件夹和标题。

然后打开 js / index.js

并将您的代码放入函数中

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

createProcessing(main);

打开 index.html

这应该一切正常... 有任何问题要问我。