빈 코드 · 직접 만든 동작

무엇을 움직이게 할까요?

상태를 만들고, 입력에 동작을 연결하세요.
코드를 적용하면 장면이 바뀝니다. 같은 이름의 상태는 이어집니다.

01 코드

빈 작업물

편집만으로 실행 중인 코드는 바뀌지 않습니다.

아직 작성한 코드가 없습니다.

02 실행 장면

적용 전

아직 아무것도 없습니다도형이나 글자를 선언하고 코드를 적용하세요.

0 frame · 정지

정지하면 시간만 멈춥니다. 아래 입력은 정지 중에도 작동합니다.

내가 선언한 입력

눌렀을 때 .down / 놓았을 때 .up

입력을 선언하면 여기에 버튼이 생깁니다.

장면을 클릭하면 키보드로 입력할 수 있습니다. 코드나 폼을 편집하는 동안에는 전달되지 않습니다.

03 현재 상태

revision 0

선언한 상태의 값이 표시됩니다.

마지막 입력아직 없음

실행 비용과 범위

코어가 보고한 WebAssembly 메모리입니다. 브라우저·편집기·렌더러의 메모리와 프로세스 전체 사용량은 포함하지 않습니다. 예약 공간 안에 사용 중인 코드·상태·스테이징 공간이 포함되므로 합산하지 않습니다.

시간 지연으로 건너뛴 프레임: 0

언어 안내

조각을 조합해 자신의 동작을 만드세요.

1. 기억할 값

이름은 영문으로, 처음 값은 숫자로 정합니다.

state count = 0
state x = 80

2. 입력과 반응

버튼 이름과 키를 선언하고 .down / .up에 연결합니다.

input tap = Space
on tap.down {
  count = count + 1
}

3. 보일 것

좌표와 크기를 상태에 연결할 수 있습니다.

box tile(x, 180, 40, 40, "#7ed9ae")
text label(40, 60, count, "Count: ")

4. 시간에 따른 변화

실행하면 매 프레임 반응합니다. dt는 1/60초입니다.

on frame {
  x = x + 30 * dt
  if x > 600 { x = 0 }
}

표현식 · 입력 키 · 제한 보기

표현식
+ - * /, < <= > >= == !=, && || !, 괄호, min(a,b), max(a,b), clamp(x,lo,hi)를 사용합니다. 논리 연산은 양쪽을 모두 계산합니다.

도형
box id(x,y,width,height,"#rrggbb")
circle id(x,y,radius,"#rrggbb")
text id(x,y,value,"접두사")
글자의 value는 숫자 표현식입니다. 문자 접두사는 생략할 수 있습니다.

입력
Space, Enter, ArrowLeft/Right/Up/Down, KeyA~KeyZ, Digit0~Digit9. 같은 키는 하나의 입력에 연결합니다.

직접 조작
input drag = pointer(tile)로 도형에 입력을 연결합니다. on drag.down / .move / .up / .cancel에서 event_x, event_y는 장면 좌표입니다. 이동 방식과 취소 시 동작도 코드로 정합니다. 초점이나 포인터 캡처를 잃으면 .cancel이 전달됩니다.

값과 규칙 재사용
record Tile { x=0; y=0 }로 필드를 정하고 item green = Tile(x=80)으로 대상을 만듭니다. rule move(t: Tile) { t.x=event_x }를 on drag.move use move(green)으로 연결합니다. 화면에서는 green.x를 읽습니다. 규칙은 연결한 대상의 값을 직접 바꿉니다.

여러 도형의 입력 묶기
input drag = pointer { green_box: green; blue_box: blue }로 연결하고 on drag.move use move(drag.target)으로 현재 조작 대상을 전달합니다. 같은 레코드 타입의 대상끼리 묶으며, 각 도형은 따로 잡고 놓을 수 있습니다.

이 실험의 범위
상태 32개 · 입력 8개 · 도형/글자 24개 · 반응 64개 · 컴파일된 명령 512개 · 코드 32 KiB. 반복문, 함수 선언, 자동 충돌·물리는 없습니다. 줄바꿈 또는 세미콜론으로 구분하고 #으로 주석을 씁니다.

0으로 나누기 등 계산 실패 시 해당 이벤트의 상태 변경 전체를 취소합니다. 입력을 누르고 있을 때는 새 코드를 적용할 수 없습니다.

완성된 예제 살펴보기

선택한 코드를 편집기에 불러옵니다. 자동으로 적용되지 않습니다.

같은 동작을 일반 JavaScript로 만든 비교 앱 ↗충전 예제와 비교할 수 있습니다. 새 탭에서 열립니다.