setTimeout()
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 1. 카드 뒷면 보여주기 일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout( ) 함수를 활용합니다. startGame( ) 함수내에 작성해야 되겠죠. 4개의 태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add( ) 메소드를 ..
-
JavaScript 입문: 틱택토 게임 - 컴퓨터와 게임 (무작위 순서 이용)컴퓨터 알아가기/JavaScript 2022. 8. 28. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이차원배열을 일차원배열로 바꿔 코딩을 단순화 했으니 형식적으로라도 사람과 컴퓨터가 게임을 하는듯한 프로그램을 공부해 보고자 합니다. 즉 turn이 사람과 컴퓨터 순으로 바꾸면 될 듯 합니다. 컴퓨터가 turn을 하기 위해서는 순서도상 다음 부분에서 추가를 해주어여 될 듯 합니다. 여기서 확인할 수 있는 것은 지금까지 만든 코딩은 사람이 먼저 'O'를 입력하면 또 다른 사람이 'X'를 입력하는 방식이었습니다. 그 가운데 승부여부와 무승부에 대한 원리를 알아보았구요. 이제는 컴퓨터가 'X'를 입력할 수 있도록 턴을 변경해 주면서 승부판단을 해야 합니다. 1. 컴퓨터 턴 만들기 지난번 만든 것과 같은 컴퓨터의 턴을 이번에도 만들어 보겠습니다...
-
JavaScript 입문 : 화면 클릭 반응 속도 체크 - 잘못된 화면 클릭시 에러메시지 표시컴퓨터 알아가기/JavaScript 2022. 7. 29. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난 시간까지는 전체적인 흐름의 프로그램을 기본적으로 완성을 하였구요. 기본적 코딩 중 남아있는 부분이 빨간화면을 클릭할 경우 경고메시지를 나타내게 하는 작업이 있었습니다. 순서도상으로 보면 다음에 해당합니다. 코드는 지난시간 비워놓았던 else if 마지막에 사용할 수 있습니다. 1. 빨간카드시 에러메시지 코딩 코딩은 다음과같이 기본적으로 생각할 수 있습니다. classList 연습을 위해서 이번에는 remove와 add를 사용하였습니다. 브라우저를 실행하여 확인을 해보니 어딘가 이상한 점이 발견이 되었습니다. 작동은 잘되는데 원래 취지는 빨간카드를 클릭하면 에러메시지를 보여주고 다시 클릭이 되야 처음으로 돌아가야 하는데 에러메시지 후..
-
JavaScript 입문 : 가위바위보 게임 - clearInterval(), clearTimeout()컴퓨터 알아가기/JavaScript 2022. 7. 8. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난 시간 다음 그림과 같이 브라우저에서 setInterval 함수를 이용하여 가위바위보 그림이 무한루프로 변하게 설정을 해 보았습니다. setInterval은 또 setTimeout 함수로 바꾸어 할 수도 있었구요. 그림을 보면 가위바위보가 무한정 0.05초 간격으로 변하고 있고 밑에 가위 바위 보의 각 버튼을 만들어 놓았습니다. 즉, 버튼을 누르면 그림이 멈추면서 승패에 대한 점수를 계산하는 방식으로 되어 있습니다. 우선 무한정 돌고있는 그림을 멈추는 함수 명령어가 필요합니다. setInterval() 함수를 멈추게 하는 함수는 clearInterval() 함수입니다. 참고로 setTimeout() 함수를 취소하는 함수는 clearT..
-
JavaScript 입문 : 가위바위보 게임 - setInterval함수와 setTimeout함수컴퓨터 알아가기/JavaScript 2022. 7. 7. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 setInterval함수를 통하여 가위바위보 그림을 0.05초마다 바꾸도록 설정 하였고 중복되는 부분을 제거하여 간단하게 코딩을 해 보았습니다. 이제는 setInterval 함수내 사용되었던 코드를 별도의 함수로 외부에 선언하고 setInterval 함수자체의 모양을 setInterval(별도 함수이름, 50)의 모양으로 다듬어 보고자 하며 setTimeout함수로 대체해 보는 연습을 해 보도록 하겠습니다. 1. 외부함수 선언 setInterval 내에 사용되었던 if문을 외부로 선언하고 setInterval 자체는 간단하게 하고자 하면 다음과 같이 할 수 있습니다. 역시 브라우저 또한 잘 반영이 되어 돌아갑니다. 2. setT..
-
JavaScript 입문 : 로또추첨기 - 당첨볼 추출 및 정렬 / setTimeout( ) 함수컴퓨터 알아가기/JavaScript 2022. 5. 13. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금까지 로또추첨기에 대한 코딩 순서를 복습하자면 코딩에 대한 순서도 - 배열을 이용한 숫자 45개 준비 - 전체 숫자 무작위 섞기 (피셔 예이츠 셔플) 이었습니다. 지금부터는 섞인 45개의 숫자에서 당첨볼 6개와 보너스 볼을 뽑는 코딩을 공부할텐데 setTimer 함수 메소드를 이용하여 1초마다 공이 화면에 표시되는 과정을 해보고자 합니다. ▒ 6개 당첨볼 뽑기 지난 시간까지 무작위 섞인 45개의 공을 shuffle이라는 빈 배열에 배정 하였습니다. 여기서 앞 6개를 당첨번호로 (뒤 6개를 뽑아도 되고, 홀수번째나 짝수번째 봅아도 되고) 다음 7번째 볼을 보너스볼로 하겠습니다. slice()와 sort()를 이용하여 원본을 유지한채 뽑..