2

I'm a student using Khan Academy to learn coding, and I've made quite a progress there. I've also learnt a fair bit of HTML, CSS and JS in my college. I was wondering if there's a way to play my game (on Khan Academy, written in ProcessingJS) as an offline HTML page.

Now, I've done a fair amount of research before asking here. I've tried the following:

1. This HTML template on Khan Academy.
2. This template too.
3. And this one on Stack Overflow too.

Using any of the above templates gives me a half-baked output, and it seems that the keyboard controls aren't working. Neither are the animations.

Thanks in advance!

Adish War
  • 31
  • 1
  • 5
  • Can you explain what output you are getting? – jrtapsell Oct 24 '17 at 10:00
  • Ideally, my output should be a yellow Pacman that's opening and closing its mouth repeatedly. The canvas is deep blue, and the Pacman has an eye that's the same color as the canvas. Also, when I press the arrow keys, the Pacman should move in the corresponding direction. I'm getting this o/p perfectly on KA.
    However, what I'm getting in my offline webpage is a deep blue canvas, with a yellow Pacman, that's neither chewing nor moving when arrow keys are pressed.
    The above three methods and the solution suggested by Kevin (below) yield the same, unresponsive result.     – Adish War Oct 25 '17 at 15:02
  • Did you ever get this figured out? – Kevin Workman Dec 05 '17 at 23:47
  • Hey @KevinWorkman, thanks for checking back here. About that, it didn't work, although it _may_ have worked if I had poured some more time into it. I tried doing it again just now, and still no progress. Have you come up with a new method to make it work? – Adish War Dec 07 '17 at 08:09
  • Hey, It worked! The template you provided works well. A few functions such as `playSound()` don't work, and functions should be `void draw() { };` rather than `var draw = function() { };`. Angles need to be in radians by default, rather than degrees. After these much changes, the code worked just fine. Thanks @KevinWorkman for the template below :) – Adish War Dec 07 '17 at 15:55
  • @AdishWar No problem. Note that you can [accept answers](https://stackoverflow.com/help/someone-answers) if they helped you. – Kevin Workman Dec 07 '17 at 17:17

2 Answers2

1

Shameless self-promotion: I've written a tutorial on deploying Processing.js available here.

You can create an "offline" version of your page by downloading the Processing.js library, which you can get here.

Once you have that, then you can load that file into a .html file. Here's an example index.html file:

<!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>

In this case, the processing.js file is right next to the index.html file, and the <script src="processing.js"></script> line loads it. Then you can use Processing.js in your JavaScript. You could also use a separate .pde or .js file to contain your Processing.js code.

It's also worth noting that there are a few subtle differences between Khan Academy and vanilla Processing.js, such as using radians vs degrees.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • I just tried doing what you suggested; however, I'm still getting the same output as before. I've elaborated on how my output looks in the comments section of my question above. – Adish War Oct 25 '17 at 14:58
  • Also, I can see more differences in KA's version of Pro. JS and your above one. Like - function declarations/initializations are different, and `void` needs to be written before the function name. And, the arguments of `background()` are different too. Is there a complete list of all such differences somewhere? – Adish War Oct 25 '17 at 15:11
  • @AdishWar I recommend you read through [the Processing.js help center](http://processingjs.org/articles/p5QuickStart.html) and [the Processing.js reference](http://processingjs.org/reference/). This explains some of the differences. Some of what you pointed out aren't really differences between Khan Academy and Processing.js, there are just different ways to do things in both. For example you can give the `background()` function 1, 2, or 3 arguments. Please try things out. – Kevin Workman Oct 25 '17 at 16:06
  • @AdishWar If you're still having trouble, then please post a [mcve] in a new question post, and we'll go from there. Also note that you should be looking at [the JavaScript console](http://happycoding.io/tutorials/javascript/developer-tools) for any errors. – Kevin Workman Oct 25 '17 at 16:07
0

Actually from now on, someone has made a way for almost all Khan Academy projects to work offline...

And that someone is me, aren't I awesome? Yeah Yeah what ever. Anyway just click this link: https://github.com/prolightHub/KaTemplate

Steps: Download load it and extract it to where you want it. Then rename the folder and title in index.html.

Then open js/index.js

And put your code into the function:

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

createProcessing(main);

Open index.html

And it should all work... Have any questions just ask me.

Prolight
  • 380
  • 2
  • 15