Подтвердить что ты не робот

Как компьютерные программы Kan Academy могут запускаться в автономном режиме или на моем собственном веб-сайте?

Я разработал программы в уроках компьютерного программирования Академии Хан, которые я хотел бы запустить за пределами Академии Хан. Как это можно сделать?

Ответ 1

Академия Khan использует Processing.js, библиотеку JavaScript для взаимодействия с элементами <canvas>. Хотя обработка на самом деле является само по себе языком, Академия Khan использует код только для JavaScript Processing.js.

Итак, вам нужно настроить веб-страницу, которая импортирует Processing.js, устанавливает <canvas> и создает экземпляр Processing.js на холсте. Наконец, вам нужно убедиться, что ваш код Академии Хана имеет все члены экземпляра 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>

Ответ 2

ADDON к ответу Роберта:

Processing.js использует радианы по умолчанию для значений угла, Академия Jan Khan использует градусы. Если вы добавите следующие строки в код Robert выше (перед оператором with), вы можете использовать команды поворота, поскольку они поступают из KA.

var rotateFn = processing.rotate;
processing.rotate = function(angle) {
    rotateFn(processing.radians(angle));
}