Player class
Classes bundle data (properties like x, y, size) and behavior (methods like move, show, hits) into a reusable template. Every instance of Player gets its own x, y, and size values, so you could create multiple ships without code duplication. The hits() method demonstrates collision detection—a skill used throughout game development.
🔬 This method binds the ship to your finger or cursor. What happens if you change this.x = touches[0].x to this.x += touches[0].x - this.x scaled by 0.1? Try: this.x += (touches[0].x - this.x) * 0.1 to make the ship smoothly lag behind your input.
move() {
// Player follows touch/mouse X position
if (touches.length > 0) {
this.x = touches[0].x;
} else {
this.x = mouseX;
}
this.x = constrain(this.x, this.size / 2, width - this.size / 2);
}
class Player {
constructor() {
this.size = 50;
this.x = width / 2;
this.y = height - this.size * 1.5;
this.speed = 10;
}
show() {
fill(0, 150, 255); // Blue ship
noStroke();
// Simple ship shape
triangle(this.x, this.y - this.size / 2,
this.x - this.size / 2, this.y + this.size / 2,
this.x + this.size / 2, this.y + this.size / 2);
}
move() {
// Player follows touch/mouse X position
if (touches.length > 0) {
this.x = touches[0].x;
} else {
this.x = mouseX;
}
this.x = constrain(this.x, this.size / 2, width - this.size / 2);
}
// Check collision with an enemy
hits(enemy) {
let d = dist(this.x, this.y, enemy.x, enemy.y);
return (d < this.size / 2 + enemy.size / 2);
}
}
Line-by-line explanation (14 lines)
🔧 Subcomponents:
this.y = height - this.size * 1.5;
Positions the ship near the bottom of the canvas with some margin
if (touches.length > 0) {
Checks for touch input on mobile, falls back to mouse on desktop
this.x = constrain(this.x, this.size / 2, width - this.size / 2);
Prevents the ship from moving off the left or right edge
let d = dist(this.x, this.y, enemy.x, enemy.y);
Calculates distance between ship and enemy to detect a hit
class Player {- Begins the Player class definition, a blueprint for creating the controllable ship
this.size = 50;- Sets the ship's size to 50 pixels—used for drawing and collision detection
this.x = width / 2;- Starts the ship horizontally centered on the canvas
this.y = height - this.size * 1.5;- Positions the ship near the bottom, with some space between it and the screen edge
this.speed = 10;- Stores the responsiveness value—higher means faster response to touch/mouse input
fill(0, 150, 255); // Blue ship- Sets the drawing color to bright blue (RGB: 0, 150, 255)
triangle(this.x, this.y - this.size / 2,- Draws a three-pointed triangle with the top point centered at the ship's position
if (touches.length > 0) {- Checks if the user is touching the screen—true on mobile, false on desktop
this.x = touches[0].x;- Moves the ship to the x position of the first touch
} else {- If no touches detected, use mouse input instead
this.x = mouseX;- Moves the ship to follow the current mouse x position
this.x = constrain(this.x, this.size / 2, width - this.size / 2);- Clamps the x position to keep the ship fully inside the canvas boundaries
let d = dist(this.x, this.y, enemy.x, enemy.y);- Calculates the Euclidean distance between the ship center and enemy center
return (d < this.size / 2 + enemy.size / 2);- Returns true if the distance is smaller than the sum of both radii—they are touching