p5.js is a great framework to teach students the basic principles of programming: it allows them to quickly jump in and start creating sketches.
This project uses p5.js and is intended to teach students the use of classes and object-oriented programming. It is inspired by p5.play, but uses the new ES6 classes and properties.
You will need the following file structure:
index.html
[MyGameClass].js
settings/
↳ Settings.js
Where [MyGameClass] is the name of your game.
Make sure you name your file after your game (No worries, you can change it later if you want). For example, if you want to make a Snake game, you might want to call your file Snake.js.
Having created the file Snake.js, you need to add it to the head element of your index.html. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Snake.js"></script>
</head>
<body>
</body>
</html>Inside of Snake.js you then create a new class called Snake that extends from Game. Inside the constructor, don't forget to call the constructor of the super class!
Also, if you want, you can already add an empty Update() method as well.
class Snake extends Game {
constructor() {
super();
}
Update() {
}
}The Settings.js file contains a Settings class that is necessary for the game to run.
A minimal Settings class looks like this:
!!! Change
MyGameClassto whatever you named the class in[MyGameClass].js
class Settings {
// IMPORTANT! Change MyGameClass to the name of your game class
static GameClass = MyGameClass;
// Collision layers where you can put your gameObjects on
// Add layers to your own liking...
static Layers = {
PLAYER: 0,
GROUND: 1
};
// Set which layers can collide with which other layers
// e.g. objects on the PLAYER layer can collide with objects on the GROUND layer
static LayerInteractions = {
[Settings.Layers.PLAYER]: [Settings.Layers.GROUND]
};
// background color for your game
static BackgroundColor = "#FFF";
// width and height of your game
static GameWidth = 800;
static GameHeight = 600;
// debug mode: shows stats and collision boxes on screen
static Debug = false;
// shows stats on screen
static ShowStats = true;
// shows the grid on screen
static ShowGrid = false;
// the size of each box in the grid
static GridSize = 50;
}Add the following script elements to the head element of your index.html. Make sure these are in the same order, and are loaded in first!
<script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/gh/t-informatica/p5-play-oo/release/lib.js"></script>A example index.html file might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Missile Command</title>
<!-- external lib files -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/gh/t-informatica/[email protected]/release/lib.js"></script>
<!-- your gameobject classes (inherit from GameObject) -->
<!-- the game class -->
<script src="MyGameClass.js"></script>
<!-- SETTINGS -->
<script src="settings/Settings.js"></script>
</head>
<body>
</body>
</html>