Season 01 - 07 이벤트 + 상태, 진짜 움직이는 오브젝트!

🎮 Season 01 - 07 이벤트 + 상태, 진짜 움직이는 오브젝트!

“움직임은 상태 변화에서 시작된다 — 리온의 깃발, 세이의 질문, 딕의 폭발적인 반응!”

코딩스타랩 교실, 오늘은 유난히 활기찼다. 딕은 아침부터 이상한 소리를 냈다.
“슈웅—! 타탁! 도도도도!”

세이가 물었다.
“뭐 하는 거야…?”

딕은 당당하게 말했다.
“오늘은 ‘움직임’이 주제일 것 같아서 미리 연습 중!”

리온은 노트북을 펼치며 말했다.
“맞아. 오늘부터는 진짜 오브젝트를 움직여볼 거야.”

그 말에 딕은 환호했다.
“드디어!! 움직인다 움직인다아아아!!”

세이는 미소 지었다.
“근데… 어떻게 움직여? 누가 시켜?”

리온은 칠판에 단어를 썼다.
state (상태)

“움직임은 상태 변화에서 시작돼.”

🧠 1. 상태(state)란 무엇인가?

리온은 칠판에 작은 깃발 그림을 그렸다. 깃발 아래엔 글자가 적혀 있었다.


let x = 0;

세이가 말했다.
“x는… 깃발의 위치?”

리온이 고개를 끄덕였다.
“응. 지금은 x = 0. 이게 ‘현재 상태’야.”

딕: “그럼 x가 바뀌면… 깃발이 움직이는 거네?”

리온: “정확해.”

세이는 조용히 덧붙였다.
“그럼 움직임은 그냥… 상태의 변화를 반복하는 거구나.”

리온은 만족스럽게 웃었다.
“그래, 그걸 알면 절반은 끝났어.”

✨ 2. 상태를 바꾸는 힘 — 이벤트(event)

리온은 키보드를 가리켰다.
“이벤트는 상태를 바꾸는 ‘계기’야. 즉, 키를 누르는 순간 상태가 변하고… 상태가 변하면 움직임이 발생하지.”

딕은 이미 마음속에서 폭죽이 터지고 있었다.
“그럼 내가 누르면 바로 움직인다고? 지금?”

리온: “시험해보자.”


let x = 0;

document.addEventListener("keydown", function() {
  x = x + 10;
  console.log("현재 위치:", x);
});

딕이 키를 눌렀다.
“똑!”

콘솔에 숫자가 떴다.

현재 위치: 10
현재 위치: 20
현재 위치: 30

딕은 입을 크게 벌렸다.
“오오오오옷!!! 움직인다아아아!!!! (아직 화면에서는 안 움직이지만)”

세이는 피식 웃었다.
“딕아… 아직 콘솔이잖아.”

딕: “…조금만 기다려. 곧 진짜 움직인다.”

🚀 3. 상태 + 이벤트 = 움직임

리온은 드디어 화면에 표시되는 코드를 보여줬다.


let x = 0;

document.addEventListener("keydown", () => {
  x += 10;
  document.getElementById("box").style.left = x + "px";
});

세이가 깜짝 놀랐다.
“우와! 이제 진짜 위치가 바뀌네?”

딕은 이미 미친 듯이 키를 누르고 있었다.
“간다!! 간다!! 신나!!!”

파란 상자(box)는 왼쪽에서 오른쪽으로 빠르게 달려가기 시작했다.

리온: “이게 바로 게임의 움직임 구조야.”

세이: “상태가 바뀌니까… 화면도 바뀌네.”

딕: “그리고 내가 누르니까! 내가 움직이는 거네!!!”

리온은 삼인방을 보며 말했다.
“그래. 이벤트는 사용자 행동, 상태는 게임의 현재 상황… 그리고 그 둘이 만나면 움직임이 만들어져.”

⚡ 4. 방향 상태까지 추가하면?

세이는 손을 들었다.
“근데… 왼쪽으로는 못 가?”

리온은 곧바로 코드를 덧붙였다.


document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowRight") {
    x += 10;
  }

  if (event.key === "ArrowLeft") {
    x -= 10;
  }

  box.style.left = x + "px";
});

딕은 둘 다 눌러보았다.
“오른쪽!! 왼쪽!! 오른쪽!! 왼쪽!!”

세이는 웃음을 참고 말했다.
“딕 너무 신났어…”

리온: “이제 게임의 절반은 만든 셈이야.”

🎯 5. 오늘의 실험 정리

state(상태) = 오브젝트의 현재 정보
event(이벤트) = 상태가 변하는 계기
state + event → 화면 변화
방향키 입력 = 좌우 이동
게임의 핵심은 “상태 변화의 반복”

세이는 조용히 말했다.
“게임이란… 마음의 움직임을 화면에 그리는 거야.”

딕은 크게 웃으며 말했다.
“그럼 내 마음은 지금 완전 폭발하는 중!!!”

리온은 웃으며 다음 칸을 그렸다.
“Season 01 - 08 충돌! 경계! 그리고 작은 위기.”

🌍 English Summary (≈500 words)

Season 01 - 07: “Events + State = Real Movement!”
In this episode, the trio—Leon, Sei, and Dick—discover the core logic behind real game movement: state and event working together. The kids experiment with how user actions (events) change game data (state), and how those changes immediately transform what appears on screen. They create a small moving object controlled by arrow keys, learning that movement is nothing more than repeated state updates triggered by events. This marks the moment they truly enter “game development.” MAKE · PLAY · DREAM.

#코딩스타랩 #상태 #이벤트 #초등코딩 #중등코딩 #게임기초 #리온세이딕 #자바스크립트기초 #움직이는오브젝트 #코딩교육

Coding Star Lab

Season 01 - 07 이벤트 + 상태, 진짜 움직이는 오브젝트!