분류 전체보기
-
JavaScript 입문 : 가위바위보 게임 - 승부내기, 점수 계산하기컴퓨터 알아가기/JavaScript 2022. 7. 13. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이제는 본격적으로 가위바위보 게임의 규칙을 찾아서 승부를 내고 승부 결과에 따라 점수를 계산하는 프로그램을 고민해 보는 시간인데요. 조금 어렵긴해도 천천히 진행하면서 이해해 볼려고 합니다. 1. 조건부 연산자를 사용하여 내가 선택하는 게임 연결 무슨말이냐 하면 가위바위보 3가지 경우를 컴퓨터와 게임을 하는데 내 선택도 필요합니다. 현재까지는 가위 바위 보에 대한 HTML 버튼만 만들어 놓은 상태에서 내가 선택하는 기능을 추가해야 합니다. HTML 구문을 보면 다음과 같이 되어 있습니다, 여기서 JS상에서 연결 시켜줄 수 있는 방법은 event target을 사용하는 방식인데 '가위', '바위', '보'는 textContent 이므로 ev..
-
JavaScript 입문 : 이벤트 타겟 (event.target) 요소, textContent 사용 이해컴퓨터 알아가기/JavaScript 2022. 7. 12. 19:30
자바스크립트를 공부하면서 웬만한 사람들은 쉽게 이해하지만 돌아서면 잊어바리는 저로서는 시간이 날때마다 찾아보고 복습해야합니다. 아직까지는 지치지 않는 제 모습에 스스로 고마워하며 금일은 알듯말듯한 event 요소를 클릭하여 함수를 발생시키는 event target에 대한 이해를 해보고자 합니다. 이것저것 일부 사례로 공부를 하고자 합니다. 1. Event target 이란 Event target을 사용한다는 의미는 이벤트가 발생한 요소를 연다는 뜻입니다. 좀 더 풀어설명하면 event target 요소는 브라우저에 표시되는 HTML을 말하고 이러한 event target 요소를 발생시키는 행위를 클릭이나 스크롤로 보면됩니다. 이러한 행위가 발생하였을 경우 함수가 실행이 됩니다. 보통 함수실행을 event..
-
로블럭스 게임 만들기Metaverse 2022. 7. 11. 19:30
로블록스 (Rpblox)의 특징중 하나는 누구나 게임을 만들고 다른 사용자에게 이용할 수 있게 플랫폼을 구성해 놓은 것입니다. 우선 어떻게 사용해야 하는지 방법을 공부해보고 시간 나는대로 다양한 게임을 만들어 보고 싶은 아주 말도 안되는 욕심이 생겼습니다. 진행해보고 분명히 현실의 벽에 부딪쳐서 포기와 지속을 갈등하는 시기가 오겠군요. 1. 공개게임 만들수 있는 갯수 로블록스 공식 가이드라인에 따르면 공개게임 즉, 타인이 플레이할 수 있는 게임의 수를 하나의 계정당 200개로 한정하고 있습니다. 지금 느낌으로는 200개면 상당히 많은 갯수인데 아마도 아주 단순한 게임부터 시도하는 사람이 많아서 일거고 전세계 유저들에게 할당을 하기 위한 방편이라고 생각합니다. 이렇게 자신들만의 세계에서 하루종일 시간을 보..
-
메타버스 개념 및 유형Metaverse 2022. 7. 10. 19:30
메타버스의 개념은 어느정도 이해하였으리라 판단됩니다. 이 카테고리 처음글에 제가 내린 가설은 "세상에 없던것을 현실화 시켜 나의 꿈을 이루는 공간"이다 라고 적시했고 카테고리를 마칠때쯤이면 가설과 결론이 어느정도 부합되는지 확인할 수 있을 것 같습니다. 아울러, 개인에게 주는 즐거움뿐 아니라 가치창조가 가능한지도 보고 싶습니다. 역시 정부가 주도하는 메타버스 신산업을 기반으로 글을 풀어나가고자 합니다. 1. 메타버스 개념의 이해 많은 문헌과 정보를 보게되면 메타버스에 대한 개념을 다양하게 적어 놓은 것을 확인할 수 있는데 정부에서 발표한 개념에는 어떻게하면 돈이 되겠는가라는 항목을 추가하는 군요. 간단하게 정리하면 메타버스(MetaVerse)는 가상과 현실이 융합된 공간에서 사람 사물이 작용하며 경제 사..
-
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 입문 : 가위바위보 게임 - setInterval함수와 setTimeout함수컴퓨터 알아가기/JavaScript 2022. 7. 7. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 setInterval함수를 통하여 가위바위보 그림을 0.05초마다 바꾸도록 설정 하였고 중복되는 부분을 제거하여 간단하게 코딩을 해 보았습니다. 이제는 setInterval 함수내 사용되었던 코드를 별도의 함수로 외부에 선언하고 setInterval 함수자체의 모양을 setInterval(별도 함수이름, 50)의 모양으로 다듬어 보고자 하며 setTimeout함수로 대체해 보는 연습을 해 보도록 하겠습니다. 1. 외부함수 선언 setInterval 내에 사용되었던 if문을 외부로 선언하고 setInterval 자체는 간단하게 하고자 하면 다음과 같이 할 수 있습니다. 역시 브라우저 또한 잘 반영이 되어 돌아갑니다. 2. setT..
-
JavaScript 입문 : 가위바위보 게임 - 빠르게 그림변환 (setInterval)컴퓨터 알아가기/JavaScript 2022. 7. 6. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ 빠르게 그림변환 (setInterval 함수) 지난시간 개발자도구(F12)를 통하여 가위 바위 보 그림의 위치를 확인해 보았습니다. 무료로 사용할 수 있는 그림을 구한 관계로 순서가 바위 가위 보 순서로 되어 있는데 빠르게 그림을 변화시킬 예정이므로 큰 문제는 아닐 것으로 판단됩니다. 현재 그림에서 각각의 위치는 다음과 같이 나왔습니다. 바위 : 0 0 가위 : -83px 0 보 : -176px 0 그리고 지난시간 JS상 CSS 명령어를 주었던 위치관련된 style.background와 style.backgroundSize 두 명령어는 항상 세트로 작성해 주어야 합니다. 1. 변수객체 가위바위보 게임에 사용될 변수에서 공통점을 찾을 ..