Putting your Processing.js Games on a Web Page

About this lesson

Tutorial on structuring a web project and at the end putting a pjs game in it.

Show Platform Skills
Portfolio
Add your games to your portfolio website!
Planning
Step 1
In this lesson, we'll be showing you how to put your processing.js games you make at MV Code Club on a web page!
Step 2
Make a New Folder and name it something!

In this step, I'm using sublime text.

Step 3
Proper Web Project structure

In your newly created project folder, make a CSS, HTML, JS folder and another folder for images or assets.

Step 4
Make your Index.html file

Make a basic html file using this template and save it as index.html in your project's directory.

We do this by opening up a new file and saving it as an html file.

Check Your Work
Step 5
Website folder structure

Make sure your project looks something like this!
We need one folder each for containing our: html, css(styles), js(scripts), and our images.

Step 6
Open the index file with your favorite text editor!
Step 7
Import the processing.js library.

Add this line of code to the head of your index.html file!
This is how your html file knows that we're using the processing.js library.

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>

Step 8
Add the canvas HTML element

Put <canvas id="mycanvas"></canvas> in the body of your html.

To learn more about canvas and how it works, go here

Step 9
Putting your processing.js code into your html file!

Copy/paste this code into your html file's body in order to make a script element that contains a reference to your source code.

Then, copy/paste the code from any processing.js game made at MV Code Club into the sketchProc function.

<script>

    var sketchProc = function(processingInstance) {
        with (processingInstance) {




        }
    }

    var canvas = document.getElementById("mycanvas"); 
    var processingInstance = new Processing(canvas, sketchProc); 

</script>
Check Your Work
Step 10
Open your index.html file with chrome!

If you open up your index file with chrome, you should see your game in the browser.

Putting your Processing.js Games on a Web Page Info

Account

MVCode

Created By

t doggo

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach