가위바위보게임
-
JavaScript 입문 : 가위바위보 게임 - 3판2승제 만들기컴퓨터 알아가기/JavaScript 2022. 7. 19. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 강좌에서는 숙제로 5판3선승제를 만들어보는 내용이 있습니다만, 같은 개념으로 가위바위보 게임 3판 2선승제를 만들어 보도록 하겠습니다. 현재까지 코드는 무한정 가위바위보 게임이 잔행되는 게임으로 어떤 결론에 도달하게 되면 게임이 멈추게 하는 목적이 있습니다. 1. 3판 2선승제란 코드를 고민하기 위해서 3판 2선승제에 대해 정의하면 다음과 같습니다. ▶ 사람이든 컴퓨터든 먼저 2승을 한 쪽이 승리한다. ▶ 무승부는 점수를 계산하지 않는다. 2. 코드에 필요한 요소 상기 정의에 따라 코드에 필요한 요소를 고민하면 나 또는 컴퓨터가 이기면 해당 변수에 1점씩 추가가 되고 2점이 되면 승리를 표시하도록 합니다. if문으로 표시할 수 있습니다...
-
JavaScript 입문 : 가위바위보 게임 - 코드 줄이기컴퓨터 알아가기/JavaScript 2022. 7. 14. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 if문을 사용하여 가위바위보 게임을 만들어 보았습니다. 다음과 같은 코딩을 사용하였는데 이 상태로도 물론 프로그램이 돌아가기 때문에 더 이상 정리할 필요성은 없어 보이는데 강좌에 따르면 중복되는 부분을 찾아서 코드를 줄이는 연습을 합니다. 우선 어떤 형태가 있는지 확인하고 최종적으로는 어떤 코드가 더 편한지 스스로 판단해 봐야 겠습니다. 무작정 코드를 줄인다고 해서 능사는 아닌 듯 합니다. 최소한 나중에 봤을때 읽을 수 있고 이해할 수 있는 코드가 훨씬 더 좋지 않을까 생각해 봅니다만.. 1. 가위바위보 JS코드 기본 2. 중복코드 줄이기 상기 기본 JS코드에서 if문 자체가 너무길고 뭔가 중복된 느낌이 있지만 그렇다고 꼭 중복..
-
JavaScript 입문 : 가위바위보 게임 - 승부내기, 점수 계산하기컴퓨터 알아가기/JavaScript 2022. 7. 13. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이제는 본격적으로 가위바위보 게임의 규칙을 찾아서 승부를 내고 승부 결과에 따라 점수를 계산하는 프로그램을 고민해 보는 시간인데요. 조금 어렵긴해도 천천히 진행하면서 이해해 볼려고 합니다. 1. 조건부 연산자를 사용하여 내가 선택하는 게임 연결 무슨말이냐 하면 가위바위보 3가지 경우를 컴퓨터와 게임을 하는데 내 선택도 필요합니다. 현재까지는 가위 바위 보에 대한 HTML 버튼만 만들어 놓은 상태에서 내가 선택하는 기능을 추가해야 합니다. HTML 구문을 보면 다음과 같이 되어 있습니다, 여기서 JS상에서 연결 시켜줄 수 있는 방법은 event target을 사용하는 방식인데 '가위', '바위', '보'는 textContent 이므로 ev..
-
JavaScript 입문 : 가위바위보 게임 - addEventListener와 removeEventListener / if문으로 버그 해결컴퓨터 알아가기/JavaScript 2022. 7. 9. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ addEventListener() 함수의 비활성화 함수 removeEventListener() 지난시간 같은 아이디를 사용하고 setTimeout( )내 clearInterval( ) 함수를 한번 더 사용함으로써 버튼을 더블클릭이상으로 하였을 경우 나타나는 버그를 간단히 수정해 보았습니다. 또 한가지 방법은 버튼을 활성화 시키는 addEventListener( )함수를 비활성화 시키는 방법입니다. 즉, setTimeout( ) 함수내 removeEventListener( ) 함수를 사용함으로써 버튼을 누르지 못하게 강제할 수 있습니다. 순서는 setTimeout() 함수로 진입하기 전 setInterval( ) 함수 전체가 addEv..
-
JavaScript 입문 : 가위바위보 게임 - clearInterval(), clearTimeout()컴퓨터 알아가기/JavaScript 2022. 7. 8. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난 시간 다음 그림과 같이 브라우저에서 setInterval 함수를 이용하여 가위바위보 그림이 무한루프로 변하게 설정을 해 보았습니다. setInterval은 또 setTimeout 함수로 바꾸어 할 수도 있었구요. 그림을 보면 가위바위보가 무한정 0.05초 간격으로 변하고 있고 밑에 가위 바위 보의 각 버튼을 만들어 놓았습니다. 즉, 버튼을 누르면 그림이 멈추면서 승패에 대한 점수를 계산하는 방식으로 되어 있습니다. 우선 무한정 돌고있는 그림을 멈추는 함수 명령어가 필요합니다. setInterval() 함수를 멈추게 하는 함수는 clearInterval() 함수입니다. 참고로 setTimeout() 함수를 취소하는 함수는 clearT..
-
JavaScript 입문 : 가위바위보 게임 - 기본구조 만들기 (HTML, CSS, JS)컴퓨터 알아가기/JavaScript 2022. 6. 27. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ 가위바위보 게임 기본구조 만들기 가위바위보 게임을 위해서 HTML내 기본구조를 만들어 놓아야 합니다. 다시한번 말씀 드리지만 HTML내 CSS와 JS를 연결시켜 놓고 각각의 파일에 내용을 다루도록 하겠습니다. 1. HTML 기본 구조 순서도에는 반영하지 않았지만 향후 순서도에도 업데이트가 필요합니다. HTML의 기본구조로서 맨위에 가위바위보 그림이 필요하고 밑에는 각 버튼에 대한 구분, 그리고 마지막 밑에는 점수계산에 대한 구분을 하도록 하겠습니다. 2. CSS 기본 구조 첫번째 태그에 사용될 가위바위보 그림이 반영되는 곳으로 id가 computer로 하였고 보여지는 그림모양의 크기를 나타냅니다. 일단 강좌에 나와있는 그림을 사용하지..