использование программ академии хана на веб-сайтах

Я учусь в Академии Хана, чтобы изучать программирование, и добился в этом значительного прогресса. В колледже я также немного изучил HTML, CSS и JS. Мне интересно, есть ли способ сыграть в мою игру (на канале Khan Academy, написанный на ProcessingJS) в виде автономной HTML-страницы.

Теперь, я провел достаточное количество исследований, прежде чем спросить здесь. Я пробовал следующее:

1. Этот HTML-шаблон в Академии Хана.
2. Этот шаблон тоже.
3. И этот тоже на Stack Overflow.

Использование любого из приведенных выше шаблонов дает полусырой результат, и кажется, что элементы управления с клавиатуры не работают. Ни анимации.

Заранее спасибо!


javascript canvas processing.js khan-academy
person Adish War    schedule 24.10.2017    source источник
comment
Можете ли вы объяснить, какой результат вы получаете?   -  person jrtapsell    schedule 24.10.2017
comment
В идеале мой результат должен быть желтым Pacman, который постоянно открывает и закрывает рот. Холст темно-синий, и у Пакмана есть глаз того же цвета, что и холст. Кроме того, когда я нажимаю клавиши со стрелками, Pacman должен двигаться в соответствующем направлении. Я отлично получаю это o/p на KA. ‹br/›Тем не менее, то, что я получаю на своей автономной веб-странице, представляет собой темно-синий холст с желтым Pacman, который не жует и не двигается при нажатии клавиш со стрелками. ‹br/› Вышеупомянутые три метода и решение, предложенное Кевином (ниже), дают один и тот же результат без ответа.   -  person Adish War    schedule 25.10.2017
comment
Вы когда-нибудь понимали это?   -  person Kevin Workman    schedule 06.12.2017
comment
Привет @KevinWorkman, спасибо, что заглянули сюда. Насчет этого, это не сработало, хотя могло сработать, если бы я потратил на это еще немного времени. Я попытался сделать это снова только сейчас, и до сих пор нет прогресса. Вы придумали новый метод, чтобы заставить его работать?   -  person Adish War    schedule 07.12.2017
comment
Эй, это сработало! Предоставленный вами шаблон работает хорошо. Некоторые функции, такие как playSound(), не работают, и функции должны быть void draw() { };, а не var draw = function() { };. По умолчанию углы должны быть в радианах, а не в градусах. После стольких изменений код работал нормально. Спасибо @KevinWorkman за шаблон ниже :)   -  person Adish War    schedule 07.12.2017
comment
@AdishWar Нет проблем. Обратите внимание, что вы можете принять ответы, если они вам помогли.   -  person Kevin Workman    schedule 07.12.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вообще-то, теперь кто-то сделал так, чтобы почти все проекты Академии Хана работали в автономном режиме...

И этот кто-то — я, разве я не крут? Да что угодно. В любом случае просто нажмите на эту ссылку: https://github.com/prolightHub/KaTemplate

Шаги: Скачайте, загрузите и распакуйте в нужное место. Затем переименуйте папку и заголовок в index.html.

Затем откройте js/index.js.

И поместите свой код в функцию:

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

createProcessing(main);

Откройте index.html

И все должно работать... Есть вопросы - задавайте.

person Prolight    schedule 08.06.2019
comment
Я предлагаю вам проверить мое неофициальное расширение KA_Downloader. Он включает кнопку загрузки под проектами Академии Хана рядом с кнопкой голосования. - person Prolight; 11.06.2019
comment
Это репозиторий. - person Prolight; 11.06.2019

arrow_upward
1
arrow_downward

Бесстыдная самореклама: я написал руководство по развертыванию 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>

В этом случае файл processing.js находится рядом с файлом index.html, а строка <script src="processing.js"></script> загружает его. Затем вы можете использовать Processing.js в своем JavaScript. Вы также можете использовать отдельный файл .pde или .js для хранения кода Processing.js.

Также стоит отметить, что есть несколько тонких различий между Khan Academy и vanilla Processing.js, например, использование радианов и градусов.

person Kevin Workman    schedule 24.10.2017
comment
Я просто пытался сделать то, что вы предложили; однако я все еще получаю тот же результат, что и раньше. Я подробно описал, как выглядит мой результат, в разделе комментариев к моему вопросу выше. - person Adish War; 25.10.2017
comment
Кроме того, я вижу больше различий в версии Pro от KA. JS и выше. Нравится - объявления/инициализации функций разные, и void нужно писать перед именем функции. И аргументы background() тоже разные. Есть ли где-нибудь полный список всех таких отличий? - person Adish War; 25.10.2017
comment
@AdishWar Я рекомендую вам прочитать справочный центр Processing.js и справочник по Processing.js. Это объясняет некоторые различия. Кое-что из того, что вы указали, на самом деле не является различиями между Khan Academy и Processing.js, просто в обоих случаях есть разные способы делать что-то. Например, вы можете дать функции background() 1, 2 или 3 аргумента. Пожалуйста, попробуйте. - person Kevin Workman; 25.10.2017
comment
@AdishWar Если у вас все еще есть проблемы, опубликуйте минимально воспроизводимый пример в новом сообщении с вопросом и мы пойдем оттуда. Также обратите внимание, что вы должны искать ошибки в консоли JavaScript. - person Kevin Workman; 25.10.2017