본문 바로가기

전체 글137

자바로 리듬게임 만들기 2 (Thread를 통해 음악 재생) 음악을 실행하기 위해선 외부 라이브러리가 필요하다. jlayer라는 라이브러리를 다운받은 다음 bulid path를 통해 넣어준다. 그 다음 하나의 작은 프로그램(Thread) 를 상속받아 음악을 재생할 수 있게 해준다. 즉 현재 실행되고 있는 게임과 별도로 음악을 재생하기 위한 또다른 작은 프로그램이라고 할 수 있다. 클래스 Music클래스는 배경음, 혹은 효과음을 넣을 수 있는 클래스이다. 해당 클래스는 JLayer파일을 다운받아 빌드작업을 해주어야 한다. (Player사용가능) file에 음악관련 리소스를 가져와 넣어주고 음악파일 경로를 FileInputStream에 직접 지정해주며 이것을 BufferedInputStream을 거쳐서 Player로 받아 음악을 재생합니다.(buffered 안거쳐도 .. 2021. 9. 7.
자바로 리듬게임 따라만들기 1 클래스 만들기 실행할 Main클래스에 멤버로 게임화면 크기를 설정해준다. 모든 객체가 공유할 수 있도록 public static로 선언하고 바뀌지 않도록 final로 해준다. 실행할 수 있도록 main을 만들어주고 DynamicBeat()생성자를 호출한다. 다른 버전으로 만들 수 있도록 패키지를 1,2,로나누어 준다. 그리고 게임을 만드는 DynamicBeat클래스를 만들어준다. 먼저 윈도우화면에 보일 수 있도록 이미 존재하는 라이브러리 JFrame을 상속해준다. 멤버로 이미지를 넣을 수 있는 Image와 그릴 수 있는 Graphics를 선언해줍니다. 그 다음 생성자를 만들어줘야 한다. 먼저 몇가지 정해줘야 하는데 이름, 사이즈, 사이즈 조절여부, 화면이 나타날 위치, 그리고 중요한 게임창을 종료할 때 같이 프로그램이.. 2021. 9. 6.
업캐스팅 ,다운캐스팅 ,Instanceof 업 캐스팅이란! 부모타입으로 형변환 한 것을 의미한다. => 부모 타입의 객체에 자식생성자를 호출 => 부모 타입의 객체에 자식 클래스의 필드를 담아주는 것 => 업캐스팅 된 객체는 자식 클래스에서 추가된 내용을 사용할 수 없다 단!! 오버라이딩 된 메소드는 갖게 된다. 부모 클래스 객체명 =new 자식 생성자(); 그림으로 설명해보자면, 부모 클래스인 Car에는 on key, off key메소드가 있다. 자식 클래스인 superCar는 오버라이딩된 on music, off music메소드가 있다고 가정하자. 만약 superCar 클래스의 생성자를 호출한다면 먼저 부모인 Car 클래스 먼저 생성하기 때문에 넓이는 Car 클래스로 만든다. 따라서 빨간색 네모크기만큼 사용할 수 있다. 그래서 자식 클래스가 .. 2021. 9. 3.
시계 만들기 시계 date를 이용하기 위해서는 new Date()를 선언을 해주어야 한다. 그 안에서 각가의 시간, 분, 초를 이런 식으로 가져온다. 이때 1초가 지나갈 때마다 시계가 가는 것을 보기 위해 setInterval 함수를 이용해야한다. setInterval함수는 설정한 시간만큼 주기적으로 넣은 함수를 실행한다. setInterval(함수, 시간)이렇게 설정한다. 위의 코드에서는 1초마다 함수를 주기적으로 수행하라는 의미이다. 따라서 1초가 지날 때마다 시간이 바뀐다. D-DAY 시계만들어 보기 HTML에 시간을 표시할 수 있는 클래스를 넣어준다. 1) 가장 먼저 이 클래스를 받아온다. 2) Clock function을 만들어 주면서 오늘 날짜와 디데이를 크리스마스로 정했을 때 이렇게 받아온다. 달을 구할.. 2021. 9. 2.
JS이용한 간단한 게임 만들기 0부터 입력한 값으로 범위를 구하고 내가 예측한 번호를 입력한 후 PLAY를 누르면 내가 고른 번호는 고정되고 컴퓨터 번호는 play를 누를 때마다 랜덤으로 바뀐다. 만약 내가 고른 번호와 컴퓨터가 고른 번호가 같다면 you won!으로 바뀐다. 코딩 한 순서 HTML 1) 범위를 입력하는 input창은 최대 범위를 입력하는 것이라 max라는 id값을 넣어주고 숫자만 입력할 거라 type은 number로 해준다. 2) Play라는 버튼을 누르면 submit이 되면서 실행되야 하기 때문에 form태그 안에 넣어주고 받아올 수 있도록 GuessingArea라는 id값을 넣어주고 입력할 수 있도록 input을 넣어준다. 버튼을 누르면 Result div안에 있는 span에 내가 고른 번호와, 컴퓨터가 선택한 .. 2021. 9. 1.
async await promise를 더 깔끔하게 사용하는 것 먼저 promise를 사용하지 않았을 때 예시 =>hojin 이렇게 쓰면 바로 user를 출력할 수 있지만, 동기적으로 움직이기 때문에 유저정보를 다 받아올 때까지 다른 코드를 읽어오지 못해 시간이 오래걸린다. Promise 사용 동작이 완료되었기 때문에 fulfilled이고 then 콜백함수로 값을 받는다. 그러나 이렇게 promise를 사용하지 않고도 간단하게 사용할 수 있는 방법이 있다. async 사용 promise를 지우고 function앞에다가 async를 달아주면 코드 블록이 자동으로 promise로 바뀐다. await사용 ✔200,100이 아니라 2000,1000이다. =>🍎+🍌(출력 결과) getFruits는 두 과일을 다 가져오는 함수이다. aw.. 2021. 8. 28.
Promise 🔥개념 Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object이다. callback함수 대신 유용하게 사용할 수 있다. 정해진 기능을 수행하고 나서 정상적으로 기능이 수행되면, 성공한 메세지와 함께, 처리한 결과값을 전달한다. 하지만 문제가 발생하면 에러를 반환해준다. promise를 사용하는 이유!! 파일에서 큰 데이터를 읽어오는 경우, 동기적이면 전체적으로 파일이 수행되기까지 시간이 오래걸린다. 따라서 그럴 때는 비동기적으로 처리하여 시간을 줄일 수 있도록 promise로 수행하는 것이 효율적이다. 따라서, nerwork이나 file을 읽어오는 것은 promise로 처리하는 것이 좋다. Promise를 공부할 때 아래 2가지를 중점적으로 알아야 한다! 1. .. 2021. 8. 28.
비동기(asynchronous), 동기 (synchronous) 호이스팅: var, 함수 선언은 제일 위로 올라가는 것을 의미한다. 자바스크립트는 동기적 실행방식을 가지고 있으며, 호이스팅이 된 후 위에서부터 차례로 실행된다. 동기 : 요청 후 응답을 받아야 다음 동작을 실행하는 것을 의미하며, 한 번에 하나의 작업만 수행할 수 있다. 따라서 어떤 작업이 진행 중인 경우 다른 작업은 멈춘 상태로 유지하며 순서를 기다린다. 이러한 동기적 실행방식을 단일 스레드, 싱글 스레드라고도 한다. 비동기: 요청이 들어운 후 응답에 관계없이 바로 다음 동작을 실행하는 것을 의미한다. synchronous way 이렇게 작성한 순서대로 실행되는 것이 동기적 실행방식이다. asynchronous way callback 함수 : 전달해준 함수를 나중에 불러달라! 라는 함수 map, fi.. 2021. 8. 24.
JSON JSON (JavaScript Object Notation) : 성, 값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 DLA이다. HTTP (Hypertext Transfer Protocal) : 클라이언트와 서버가 어떻게 통신할 수 있는 지를 정의한 것 Hypertext: 는 웹의 하이퍼링크뿐만 아니라 전반적인 리소스(문저, 이미지파일), 등을 다 포함한 것. AJAX(Asynshronous Javascript And XML) : 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술 EX) XHR (XMLHttpRequest)=object :object를 이용함으로써 간단히 데이터를 주고 받을 수 있다. XML : HTML과 같은 .. 2021. 8. 23.
Java Script Array API이용한 퀴즈 1. Q1. make a string out of an array => apple,banana,orange :join api는 배열의 모든 요소를 하나의 문자열로 만들어주는 api이다. join()안에는 원하는 구분자를 넣어주면 된다. ============================================================== 2. Q2. make an array out of a string =>["🍎, 🥝, 🍌, 🍒"] : split메서드는 구분자를 이용하여, 하나의 string객체를 여러개의 문자열로 나눈다. split(구분자, limit) 만약 구분자를 넣지 않는다면 하나의 문자열로 정의되기 때문에 꼭 넣어주는 것이 좋다. limit은 옵션인데 배열의 원소가 limit의 개수가 .. 2021. 8. 22.
배열 array 1. 배열 선언 const arr1=new Array(); const arr1=[1,2]; 배열을 new로 선언할 수도 있고 [ ]안에 직접 넣을 수도 있다. index는 항상 0부터 시작한다. index덕분에 삽입 삭제가 유용하다. =============================================== 2. Index position const fruits=['apple','banana']; console.log(fruits); => 0: "apple" 1: "banana" 여기서 apple에게 접근하고 싶다면 console.log(fruits[0]); =>[ ]안에 해당 index를 넣으면 된다. 마지막 index에 접근하고 싶다면 console.log(fruits[fruits.legn.. 2021. 8. 19.
object 1. Literals and properties -javascript의 데이터 타입 - 자바 스크립트에 있는 거의 모든 objects는 instanceOf Objcet이다. ☆★ object는 {key : value}의 집합체이다!! key : 접근할 수 있는 property value : property가 가지고 있는 값 const obj1={}; => literal syntax const obj2=new Object(); =>constructor syntax function print(person){ console.log(person.name); console.log(person.age); } const hojin={name:'hojin',age:4}; => 이렇게 클래스 없이 바로 object생성할.. 2021. 8. 18.

티스토리툴바