Я разработал программы в уроках компьютерного программирования Академии Хан, которые я хотел бы запустить за пределами Академии Хан. Как это можно сделать?
Как компьютерные программы 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));
}