setup()
setup() runs once when the sketch starts. It is the place to initialize all game objects (player, monsters, rooms, UI buttons) and set up the p5.sound audio context. Understanding setup() is critical because every game object you reference later in draw() must be created here first.
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
textAlign(CENTER, CENTER);
rooms = {
mainRoom: { x: 0, y: 0, w: 600, h: 400, color: '#333333', floor: -1,
scrapMachine: { x: 500, y: 150, w: 80, h: 100 },
lockers: [
{ x: 100, y: 300, w: 40, h: 60 },
{ x: 150, y: 300, w: 40, h: 60 },
{ x: 200, y: 300, w: 40, h: 60 }
],
computer: { x: 300, y: 100, w: 60, h: 60 }
},
monsterRoom: { x: 600, y: 0, w: 400, h: 400, color: '#222222', floor: -1 },
floor0: { x: 0, y: 400, w: 800, h: 600, color: '#554444', floor: 0 },
floor1: { x: 800, y: 400, w: 800, h: 600, color: '#445544', floor: 1 },
floor2: { x: 1600, y: 400, w: 800, h: 600, color: '#665555', floor: 2 },
floor3: { x: 2400, y: 400, w: 800, h: 600, color: '#556655', floor: 3 },
floor4: { x: 3200, y: 400, w: 800, h: 600, color: '#776666', floor: 4 }
};
player = {
x: rooms.mainRoom.x + 100,
y: rooms.mainRoom.y + 100,
w: 30,
h: 30,
vx: 0,
vy: 0,
isMoving: false,
isRunning: false
};
boombox.x = rooms.mainRoom.x + rooms.mainRoom.w / 2;
boombox.y = rooms.mainRoom.y + rooms.mainRoom.h / 2;
boombox.w = 80;
boombox.h = 60;
joystick = {
baseX: width * 0.2,
baseY: height * 0.8,
radius: 60,
knobX: width * 0.2,
knobY: height * 0.8,
active: false,
touchId: -1,
maxX: width * 0.4
};
runButton = {
x: width * 0.8,
y: height * 0.8,
w: 80,
h: 80,
active: false,
touchId: -1
};
modButton = {
x: width * 0.9,
y: height * 0.1,
w: 80,
h: 40,
active: false,
touchId: -1
};
for (let i = 0; i < MAX_MONSTERS; i++) {
spawnMonster();
}
spawnCollectibles();
if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
} else {
window.addEventListener('deviceorientation', handleDeviceOrientation);
deviceOrientationGranted = true;
}
gameState = "loading";
loadingTimer = 0;
}Line-by-line explanation (8 lines)
🔧 Subcomponents:
object-initialization
Room Geometry Setup
rooms = { mainRoom: {...}, floor0: {...}, floor1: {...} };
Defines the world as a collection of named rooms with x, y, width, height coordinates, background colors, and floor numbers used by AI for pathfinding
object-initialization
Player Object Creation
player = { x: rooms.mainRoom.x + 100, y: rooms.mainRoom.y + 100, w: 30, h: 30, vx: 0, vy: 0, isMoving: false, isRunning: false };
Creates the player object with position, dimensions, velocity, and state flags for animation
for-loop
Monster Spawning Loop
for (let i = 0; i < MAX_MONSTERS; i++) { spawnMonster(); }
Populates the monsters array with five randomly positioned enemies across the floors
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire window—this full-screen approach is ideal for immersive mobile games
noStroke();- Disables outlines on all shapes so procedural drawing looks cleaner and less cluttered
textAlign(CENTER, CENTER);- Sets all text to center horizontally and vertically, making UI text positioning intuitive (text drawn at x,y appears centered)
rooms = { mainRoom: {...}, floor0: {...} };- Defines the entire game world as a collection of connected rooms, each with position, size, color, and a floor number for AI pathfinding logic
player = { x: rooms.mainRoom.x + 100, y: rooms.mainRoom.y + 100, ... };- Initializes the player at a fixed spawn position in the main room with zero velocity and isMoving/isRunning flags for state management
for (let i = 0; i < MAX_MONSTERS; i++) { spawnMonster(); }- Loops to spawn five monsters spread randomly across floor rooms (never in main room or monster room)
spawnCollectibles();- Populates the collectibles array with keys and scrap pieces across all floors based on mod settings
gameState = "loading";- Sets the game to display the loading screen on first frame before transitioning to the start screen
