For this week's assignment, I made a small house at night. The scene uses simple shapes: a triangle for the roof, rectangles for the walls and windows, and circles for the moon and stars. When the mouse enters a window, it turns yellow. When the mouse leaves, it becomes dark again.
I kept the interaction small so I could focus on functions. A lit window suggests that someone is home, even though there are no people in the sketch. Moving between the windows changes which part of the house feels occupied.
The sketch needs several kinds of work: drawing the setting, drawing the house, checking the mouse position, and choosing each window's color. I divided these tasks into drawSky(), drawGround(), drawHouse(), drawWindow(x, y), and drawHint().
The names describe what each function does. In draw(), I can read the calls in order and understand how the scene is built without reading every drawing instruction. Commenting out drawHouse() should remove the walls, roof, and door, while leaving the windows visible because they have separate calls. Commenting out one window call should remove only that window.
All four windows use the same function with different positions:
drawWindow(160, 220);
drawWindow(260, 220);
Inside the function, the frame, glass, and dividing lines are positioned relative to x and y. The mouse check also uses these parameters, so each window responds in its own location.
This means I can change the shared function to update all four windows. I do not need four separate copies of the drawing and interaction code.
One detail is that the window does not remember being lit. Every frame, the program checks the mouse again and chooses a color. The current version works like a temporary light controlled by the cursor.
For a next step, I would like each window to act more like a real light switch.
做function的步骤:
第一步：定义 function
function ______( ){
}