Putting a Processing Javascript project onto an HTML page with Images!

Planning

Step 1

This lesson will show you how to place a Javascript game that has images onto your website.

It's not too hard, but it does require us to modify our Javascript code.

Step 2

First, find your Javascript repo that has a working game with images.

For this lesson, I will be using an example using basic code used in our Javascript Game Design lesson.

If you don't have a Javascript game with images, then you should probably stop doing this lesson and switch to the Javascript Game Design course.

Step 3

If you don't have one already, add a *setup* function that will define what dimensions our screen size will be.

This function should be above the draw function for us to easily find it in our code.

Step 4

This next step is important for our images to work in HTML, find the code that loads the image to a variable.

For HTML to correctly load the image, it needs to be done in the setup function.

FOR EVERY IMAGE LOADED, the variable must be defined outside the setup function.

Then the variable must be set to the loaded image inside the setup function.

Change this code for all image variables:

Check Your Work

Step 5

Run your code

The game should not have changed at all.

If some images stopped working, then ask an instructor for help.

Step 6

Before we start HTML code, make sure all images have an x position, y position, width, and height.

Usually, most people never did this for the groundImage in their Javascript Game Design project.

Step 7

Let's now open a new HTML repo.

You can also add to your portfolio repo by making a new HTML file.

Step 8

Add this code to our new HTML file

COPY and PASTE this code to the new HTML file:

<!DOCTYPE html>
<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js'></script>
</head>

<body>
    <script src="index.js"></script>
</body>

Information

Step 9

What did we just add?

The script in the head tag is telling our website to include the Javascript Processing libraries.

The script in the body tag is where the actual game canvas will be created using the game code inside of index.js.

Step 10

It's time to copy your Javascript game code

Paste the Javascript code into the index.js file in your HTML repo.

Step 11

Add all the pictures used in your Javascript game to your asset list

Click this button to add a new asset:

Step 12

For each asset, you will need to copy the asset link

To copy the asset link press this button:

Step 13

Paste the asset link to the place where we load the image

The link will be much longer than it used to be:

Step 14

The "size" function will not create a canvas in HTML.

Let's replace the size() function with a new one called createCanvas()

Check Your Work

Step 15

Save and reload your website

You should see the game running with images on your website!

Challenge

Step 16

There will probably still be some problems with your game

For example, the arrow keys probably wont work when testing your movement.

This is because the variables LEFT, RIGHT, UP, and DOWN are not defined.

How else can we compare the keyCode values?

Hint: http://keycode.info/

Putting a Processing Javascript project onto an HTML page with Images! Info

Account

MVCode

Created By

aaronjau101

Course:

Create a Portfolio

Access Level

account

Created over 2 years ago

Published Assigned 243 times

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