프로그래머가 되는 꿈

1. 가위바위보 게임 (4) 본문

프론트엔드 (Front-end)/React 프로젝트

1. 가위바위보 게임 (4)

AI박사 2026. 1. 17. 10:04

<알고리즘(순서)>

1. 박스 2개 (타이틀,사진,결과)

2. 가위 바위 보 버튼이 있다.

3. 버튼을 클릭하면 클릭한 값이 박스에 보인다.

4. 컴퓨터는 랜덤하게 아이템 선택이 된다.

5. 3,4의 결과를 가지고 누가 이겼는지 승패를 따진다.

6. 승패 결과에 따라 (박스의) 테두리 색이 바뀐다. (이기면 - 초록, 지면 - 빨강, 비기면 - 검정)

 

 

사진과 이름을 가지고 있는 객체를 만들자!

 

 

<버튼을 클릭하면...>

버튼 클릭할 때 쓰는 이벤트 리스너 : onClick

 

 

한번클릭

 

5번 클릭 (⑤표시)

-> onClick이 잘 작동되는 것을 알 수 있다.

 

=>

어떤 버튼을 누르던지 한번 클릭하면 (①,②,...)숫자가 올라가는 것을 볼 수 있다.

모든 버튼에서 onClick이 동작을 한다.

 

 

'프론트엔드 (Front-end) > React 프로젝트' 카테고리의 다른 글

1. 가위바위보 게임 (6)  (0) 2026.01.17
1. 가위바위보 게임 (5)  (0) 2026.01.17
1. 가위바위보 게임 (3)  (1) 2026.01.17
1. 가위바위보 게임 (2)  (0) 2026.01.17
1. 가위바위보 게임 (1)  (0) 2026.01.17