class player {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = 30;
this.speed = 10;
}
move(){
//code in here.....
}
}
class - This is the name of the class and will be called in the main sketch.js file to create a new instance of this class. You will need to reference in the index.js.
constructor - This part of the code is called once only when an instance of this class is created. In the constructor we need to set up properties/variables for our object class. This is going to include x and y coordinates etc
this. - a complicated construct that gives scope to the properties for this class only. Each time we call variables in the class file we need to use this. keyword. We will be able to access these properties from the main sketch.js page and within other functions in the class file with the variable and dot notation.
example var player.x would return the x position of the enemy
Functions - other functions can be created in the class file. In the example we have added a move() function inside the class brackets. Note no keyword function required.
Here are some examples of how we add functions and methods to our class. Please note that any variables created in the constructor needed to be referenced with dot notation 'this.'.
player.js
class player {
//these instructions run when a class instance is created in sketch.js
// you may pass arguments into the constructor
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = 30; //set diameter of circle for sprite
this.speed = 10; //how many pixels to move each frame when moved
}
//Listen for key press and check that the player is still on the screen, update x and y position
move() {
if (keyIsDown(RIGHT_ARROW) && this.x < width - this.diameter) { //test to see if sprite is in canvas
this.x += this.speed;
}
if (keyIsDown(LEFT_ARROW) && this.x > 0) { //test to see if sprite is in canvas
this.x -= this.speed;
}
if (keyIsDown(UP_ARROW) && this.y > 0) { //test to see if sprite is in canvas
this.y -= this.speed;
}
if (keyIsDown(DOWN_ARROW) && this.y < height - this.diameter) { //test to see if sprite is in canvas
this.y += this.speed;
}
}
//update and display the player on the canvas
display() {
fill(255, 204, 0); //set colour
rect(this.x, this.y, this.diameter, this.diameter); //draw and set position
}
}
Remember that all code needs to sit inside the class brackets.
Each function needs to have a open and close curly bracket to define its block
To refer to each variable you need to use this.variable name within the entire class file
Each time a new class file is created, add a script src line to the the index.html file that connects to the class file. Make sure this goes above the sketch.js file link.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!--Add file link here .... -->
<script src="player.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body></html>
To create a new instance of the class object in your main sketch.JS we write the code new class_name()
See example below where we add a new player() from the player.js class file
sketch.js
var p; //declare as a global variable
function setup() {
createCanvas(640, 360); // set canvas size
p = new player(); //create a new player instance from the connected player() class and attach to global variable
}
function draw() {
//new code....
}
Each time we wish to access the instance of player and its in built in methods, properties and functions we use the following . notation. See the following:
player.move(); //update movement of player. Move() is located in the class file
player.x // get the x position of the player. X is located in the class file
In games and animations you may wish to have to have multiple raindrops, enemies, platforms on the stage at one time. We need to keep track of all these objects by storing them in an array.
var enemies = []; // create a new global array called enemieS
When using a for loop, always iterate backwards through the array so that when deleting an element the index is not shifted.
Place the following code in the draw() function. See example - rain simulator
You may run any class method using the same code chunk.
var enemies = []; // create a new global array called enemieS
//function to add new instance of the class and store this instance in the array
function preload(){
...
addNewEnemy(); // we will make this function below
}
function draw(){
for(var i = enemies.length-1;i>=0;i--){ // loop backwards through the array and splice (take)
// one from length to ensure you start at the last index
enemies[i].move(); // this runs the method move() from the enemy class file on that instance/object
}
}
function addNewEnemy(){
var e = new enemy(); // create an instance of a new enemy (enemy is the class name) in a temporary variable
enemies.push(e); // push to the end of the array the new object class
}