Embedded Files
HANDY CODE
Below are some skills you might want in developing your game
NOTE: In all programming languages there is more than one way to accomplish something. So you might find other ways to code up a solution other than those described below.
JavaScript
JavaScript
OBJECTS
OBJECTS
ARRAY OF OBJECTS
ARRAY OF OBJECTS
Levels
Use objects. See JavaScript Tutorial for Beginners - 18 - Objects
Use class constructor. See W3Schools
And an array of objects
GAME LEVELS
GAME LEVELS
Moving the camera.
Moving the camera.
If you want the character to stay in the center of the screen with the background moving behind you will need to learn to control the camera. The p5play docs will help.
Iteration to show lives
Iteration to show lives
for (i = 0; i < lives; i++){
rect(60 * i, 60, 55, 55);
}
Click on a sprite
Click on a sprite
function mousePressed() {
if(theBox.mouse.pressing()){
points++;
}else{
points--;
}
}
HTML features
HTML features
UPDATE HTML via JS
UPDATE HTML via JS
Retrieve the current html text
var ????? = id.textContent;
Alter the html text
id.textContent = 'ttt';
Alter the style - in this case the background colour
id.style.backgroundColor = 'ccc ';
where:
id is the html element id you want to retrieve info from
ttt is the new text
????? where to save the value
ccc is the colour
Notes:
See W3Schools
HTML id vs class
HTML id vs class
To update specific elements of an html interface via JavaScript means each html element you want to alter requires a name. that the program can use.
To alter:
a specific html element means you need to have a html id attached to that element. It must be unique within the .html file.
EG: <p id="p_name">
a group of html elements means they need to have a html class attached to the elements you want to change. Many elements can have the same class name.
EG: <p class="p_age">
<p class="p_address">
HTML naming convention
HTML naming convention
When developing JavaScript which updates a number of html elements, it soon becomes apparent you should have a naming convention for the html elements. Here is a suggested naming convention:
element type_name where element type is p for paragraph, b for button, d for division, i for input
EG:
p_name contains user's name
p_age contains user's age
b_start start button
i_name input box for user's name
ONLOAD
ONLOAD
To run a function when the page finishes loading
<body onload="myFunction()">
where:
myFunction is the function to run ONCE the page has loaded
W3CSS
W3CSS
Page updated
Report abuse