Fatal编程技术网
  • javascript/
  • Javascript 在网站中使用khan academy程序

Javascript 在网站中使用khan academy程序

javascript canvas

Javascript 在网站中使用khan academy程序,javascript,canvas,processing.js,khan-academy,Javascript,Canvas,Processing.js,Khan Academy,我是一名使用汗学院学习编码的学生，在那里我取得了相当大的进步。在我的大学里，我还学到了不少HTML、CSS和JS。我想知道是否有一种方法可以将（在Khan Academy上，用ProcessingJS编写）作为脱机HTML页面进行播放 现在，我在问这个问题之前做了大量的研究。我尝试了以下方法： 1.关于汗学院 2.也是。 3.还有堆栈溢出。 使用上述任何一个模板都会给我一个半生不熟的输出，而且键盘控件似乎不起作用。动画也不是 提前谢谢 无耻的自我提升：我已经写了一篇关于部署Processing.

我是一名使用汗学院学习编码的学生，在那里我取得了相当大的进步。在我的大学里，我还学到了不少HTML、CSS和JS。我想知道是否有一种方法可以将（在Khan Academy上，用ProcessingJS编写）作为脱机HTML页面进行播放

现在，我在问这个问题之前做了大量的研究。我尝试了以下方法：

1.关于汗学院
2.也是。
3.还有堆栈溢出。

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

提前谢谢

无耻的自我提升：我已经写了一篇关于部署Processing.js的教程

您可以通过下载Processing.js库来创建页面的“脱机”版本，您可以从中获得

一旦有了它，就可以将该文件加载到
.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>


我的素描
无效设置（）{
大小（200200）；
}
作废提款（）{
背景（64）；
椭圆（mouseX，mouseY，20,20）；
}
在本例中，
processing.js
文件就在
index.html
文件的旁边，
行将加载它。然后可以在JavaScript中使用Processing.js。您还可以使用单独的
.pde
或
.js
文件来包含Processing.js代码

还值得注意的是，Khan Academy和vanilla Processing.js之间有一些细微的区别，例如使用弧度和度。

实际上从现在起，有人已经为几乎所有Khan Academy项目提供了离线工作的方式

那个人就是我，我不是很棒吗？是的，是的。 无论如何，只需单击此链接：

步骤： 下载、加载并解压缩到您想要的位置。 然后在index.html中重命名文件夹和标题

然后打开js/index.js

并将代码放入函数中：

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

createProcessing(main);
openindex.html

这一切都应该有效。。。
有什么问题尽管问我。

你能解释一下你得到了什么输出吗？理想情况下，我的输出应该是一个反复张开和闭合嘴巴的黄色吃豆人。画布是深蓝色的，吃豆人的眼睛和画布的颜色一样。另外，当我按下箭头键时，Pacman应该朝着相应的方向移动。我把这张o/p完全记在卡上了
然而，我在离线网页中看到的是一块深蓝色的帆布，上面有一个黄色的吃豆人，当按下箭头键时，它既不会咀嚼也不会移动
以上三种方法和Kevin（以下）建议的解决方案都会产生相同的、无反应的结果。你有没有弄明白这一点？嘿@KevinWorkman，谢谢你回来查看。关于这一点，它没有起作用，尽管如果我再投入一些时间，它可能会起作用。我刚才又试了一次，但还是没有进展。你有没有想出一个新的方法让它工作？嘿，它工作了！您提供的模板运行良好。一些函数，如
playSound（）
不起作用，函数应该是
voiddraw（）{}而不是
var draw=function（）{}。默认情况下，角度需要以弧度为单位，而不是以度为单位。经过这么多的修改，代码工作得很好。感谢@KevinWorkman提供了下面的模板：）我只是试着按照你的建议去做；然而，我仍然得到和以前一样的输出。我已经在上面的问题的评论部分详细阐述了我的输出是什么样子的。另外，我可以看到KA版本的Pro有更多的不同。JS和你上面的那个。Like-函数声明/初始化是不同的，需要在函数名之前写入
void
。而且，
background（）
的参数也不同。有没有一个完整的清单列出了所有这些差异？@AdishWar我建议你通读一遍。这就解释了其中的一些差异。您指出的一些内容并不是Khan Academy和Processing.js之间的真正区别，只是两者有不同的处理方式。例如，您可以为
background（）
函数提供1、2或3个参数。请尝试一下。@AdishWar如果你仍然有问题，那么请在一个新的问题帖子中发布一个，我们将从那里开始。还请注意，您应该查看任何错误。我建议您查看我的非官方KA_Downloader扩展。它在投票按钮附近的Khan Academy项目下方嵌入了一个下载按钮。这是一个存储库。