setup()
setup() runs once when the sketch starts. It defines the game world layout (rooms), initializes the player, spawns enemies and items, and sets up input listeners. This is where you design your level—by moving room coordinates and changing colors, you reshape the entire game.
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
textAlign(CENTER, CENTER);
rooms = {
mainRoom: { x: 0, y: 0, w: 600, h: 400, color: '#333333', 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
};
staircases = [
{ x: rooms.mainRoom.x + 200, y: rooms.mainRoom.y + rooms.mainRoom.h - 50, w: 200, h: 50, targetRoom: "floor0", targetPlayerX: rooms.floor0.x + 300, targetPlayerY: rooms.floor0.y + 50 },
{ x: rooms.floor0.x + 300, y: rooms.floor0.y, w: 200, h: 50, targetRoom: "mainRoom", targetPlayerX: rooms.mainRoom.x + 300, targetPlayerY: rooms.mainRoom.y + rooms.mainRoom.h - player.h },
{ x: rooms.floor0.x + rooms.floor0.w - 50, y: rooms.floor0.y + 200, w: 50, h: 200, targetRoom: "floor1", targetPlayerX: rooms.floor1.x + 50, targetPlayerY: rooms.floor1.y + 300 },
{ x: rooms.floor1.x, y: rooms.floor1.y + 200, w: 50, h: 200, targetRoom: "floor0", targetPlayerX: rooms.floor0.x + rooms.floor0.w - 50, targetPlayerY: rooms.floor0.y + 300 },
{ x: rooms.floor1.x + rooms.floor1.w - 50, y: rooms.floor1.y + 200, w: 50, h: 200, targetRoom: "floor2", targetPlayerX: rooms.floor2.x + 50, targetPlayerY: rooms.floor2.y + 300 },
{ x: rooms.floor2.x, y: rooms.floor2.y + 200, w: 50, h: 200, targetRoom: "floor1", targetPlayerX: rooms.floor1.x + rooms.floor1.w - 50, targetPlayerY: rooms.floor1.y + 300 },
{ x: rooms.floor2.x + rooms.floor2.w - 50, y: rooms.floor2.y + 200, w: 50, h: 200, targetRoom: "floor3", targetPlayerX: rooms.floor3.x + 50, targetPlayerY: rooms.floor3.y + 300 },
{ x: rooms.floor3.x, y: rooms.floor3.y + 200, w: 50, h: 200, targetRoom: "floor2", targetPlayerX: rooms.floor2.x + rooms.floor2.w - 50, targetPlayerY: rooms.floor2.y + 300 },
{ x: rooms.floor3.x + rooms.floor3.w - 50, y: rooms.floor3.y + 200, w: 50, h: 200, targetRoom: "floor4", targetPlayerX: rooms.floor4.x + 50, targetPlayerY: rooms.floor4.y + 300 },
{ x: rooms.floor4.x, y: rooms.floor4.y + 200, w: 50, h: 200, targetRoom: "floor3", targetPlayerX: rooms.floor3.x + rooms.floor3.w - 50, targetPlayerY: rooms.floor3.y + 300 }
];
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
};
for (let i = 0; i < MAX_MONSTERS; i++) {
spawnMonster();
}
spawnCollectibles();
if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
// Permission will be requested in touchStarted()
} else {
window.addEventListener('deviceorientation', handleDeviceOrientation);
deviceOrientationGranted = true;
}
}Line-by-line explanation (7 lines)
🔧 Subcomponents:
function-call
Canvas and text setup
createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire window and prepares text rendering
object-literal
Room definitions
rooms = { mainRoom: {...}, floor0: {...}, floor1: {...} };
Defines the layout of six rooms with positions, sizes, colors, and floor numbers for AI pathfinding
object-literal
Player object initialization
player = { x: rooms.mainRoom.x + 100, y: rooms.mainRoom.y + 100, ... };
Creates the player object with position, velocity, and state flags
array-literal
Staircase portals
staircases = [ { x: rooms.mainRoom.x + 200, y: ... }, ... ];
Defines transition points between rooms so players can move between floors
object-literal
Joystick UI object
joystick = { baseX: width * 0.2, baseY: height * 0.8, ... };
Sets up the left-side joystick with position, radius, and touch tracking
for-loop
Monster spawning
for (let i = 0; i < MAX_MONSTERS; i++) { spawnMonster(); }
Populates the world with five monsters in random floor rooms
conditional
Device orientation setup
if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function')
Checks if the device supports iOS-style permission-based orientation events
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window—essential for a full-screen game
noStroke();- Removes outlines from all shapes drawn after this, making the procedural graphics cleaner
textAlign(CENTER, CENTER);- Centers all text around its x,y coordinates rather than using top-left as origin
rooms = { mainRoom: {...}, floor0: {...} };- Defines six rooms with position, size, color, and floor number—rooms are the building blocks of the game world
player = { x: rooms.mainRoom.x + 100, y: rooms.mainRoom.y + 100, ... };- Initializes the player as an object with position (100 pixels into the safe zone), velocity (initially zero), width/height, and state flags
for (let i = 0; i < MAX_MONSTERS; i++) { spawnMonster(); }- Loops five times to spawn five monsters at random locations in the floor rooms
spawnCollectibles();- Populates the world with five keys—one in each floor room for the player to collect
