可汗学院的计算机程序如何在线下或在我自己的网站上运行？

Question

可汗学院的计算机程序如何在线下或在我自己的网站上运行？

RTS*_*lio 12 javascript processing.js khan-academy

我在Khan Academy的计算机程序设计课程中开发了一些程序,我想在可汗学院之外运行.怎么办？

Answer 1

Khan Academy使用Processing.js,一个用于与<canvas>元素交互的JavaScript库.虽然Processing本身就是一种语言,但Khan Academy使用仅限JavaScript的Processing.js代码.

因此,您需要设置一个导入Processing.js的网页,设置一个<canvas>并在画布上构建一个Processing.js实例.最后,您需要确保您的Khan Academy代码具有范围内的Processing.js实例的所有成员(我这样做with),以及一些相当于Khan Academy对Processing.js的小修改,例如mouseIsPressed和getImage.

这是一些一直在为我工作的样板.可能需要进一步开发才能让它适用于更复杂的例子; 如果您找到不起作用的示例,请发表评论.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var processing = new Processing(canvas, function(processing) {
        processing.size(400, 400);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        // use degrees rather than radians in rotate function
        var rotateFn = processing.rotate;
        processing.rotate = function (angle) {
            rotateFn(processing.radians(angle));
        };

        with (processing) {


            // INSERT YOUR KHAN ACADEMY PROGRAM HERE


        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，10 月前
查看次数：	5826 次
最近记录：	7 年，2 月前