본문 바로가기
728x90
반응형

전체 글648

슈팅게임 페이지 가꿔보기 전혀 꾸미지 않았었던 페이지를 부트스트랩을 이용해서 아주 기본적인 것만 만들어 주었다. title을 토리 슈팅게임으로 바꾸었다. 내브바에 "토리 슈팅게임" 제목을 적어주었고, 내 블로그 주소와 깃허브 주소 링크를 넣어두었다. 게임 설명을 alert창 파란색에 적어두고, 난이도를 선택할 수 있게 하였다. 비둘기가 떨어지는 속도를 level이라는 변수로 바꾸고, select form에서 난이도를 선택하면 그에 맞는 속도로 비둘기가 떨어지게 하였다. select form에서 input 이벤트가 발생하면 main(), createEnemy()가 실행되도록 하였다. 그래서 난이도를 선택해야 게임이 실행된다. (처음에는 createEnemy()는 원래대로 두었었는데, 그렇게 했더니 페이지가 로드되고 시간이 조금 지.. 2023. 2. 5.
자바스크립트로 슈팅게임을 만들다 어제 자기전에 유튜브 보다가 자바스크립트로 슈팅게임 만들기 영상을 봤는데 생각보다 따라해볼만 한 난이도라서 영상보면서 똑같이 만들어봤다. 더보기 '코딩알려주는누나'라는 유튜버께서 알려주는 슈팅게임 만드는 방법. 하나부터 열까지 다 알려주기때문에 나같은 초보자들도 잘 이해하면서 할 수 있다. https://yeomdonghwan.github.io/슈팅게임 tori-game 슈팅게임을 해보세요. 좌우 화살표로 움직이고 스페이스바를 눌러 토끼똥을 발사해보세요. ~토리가 비둘기를 무찌를 수 있게 도와주세요~ 블로그 깃허브 배경 이미지 출처 Freepik yeomdonghwan.github.io 영상에서 알려준 것 그대로 만들었기 때문에 내가 만든것이 아니라서 큰 의미는 없지만 자바스크립트로 이런것도 할 수 있구.. 2023. 2. 4.
[자바] 백준 11660번: 구간 합 구하기 5 https://www.acmicpc.net/problem/11660 11660번: 구간 합 구하기 5 첫째 줄에 표의 크기 N과 합을 구해야 하는 횟수 M이 주어진다. (1 ≤ N ≤ 1024, 1 ≤ M ≤ 100,000) 둘째 줄부터 N개의 줄에는 표에 채워져 있는 수가 1행부터 차례대로 주어진다. 다음 M개의 줄에는 네 www.acmicpc.net 2차원 배열을 만들어서 0행,0열은 모두 0으로 채우고, 한 행씩 입력을 받는데 arr[i][j]=arr[i][j-1]+입력받은값 으로 배열을 채워서, 각 행은 오른쪽으로 가면서 누적합이 기록되게 하였다. 이제 x1,y1,x2,y2를 입력받고 for(int i=x1;i 2023. 2. 4.
[자바스크립트] sticky 활용하기 position: sticky; sticky를 이용해 보자. sfjeifjwiflwejewljwelfjwelfwje fejwfljw wejfewjflwel fewj lwejfw wejflwejfkljl wejflkwejflk wejfklwj image는 float:right, position: sticky가 설정되어있고 text는 float:left가 설정되어 있다. text가 왼쪽, image가 오른쪽으로 배치되었다 image는 sticky, top:100px로 설정을 해놓았기 때문에 스크롤해도 위에서 100px만큼 떨어진 위치에 고정되어있다. 이렇게 고정된 image는 부모태그 안에서 고정되어있게 된다. (부모태그가 끝나면 같이 스크롤되어 올라감) 애플 홈페이지를 구경하다 보면 스크롤 이벤트를 정말 .. 2023. 2. 3.
[자바] 백준 11659번: 구간 합 구하기 4 https://www.acmicpc.net/problem/11659 11659번: 구간 합 구하기 4 첫째 줄에 수의 개수 N과 합을 구해야 하는 횟수 M이 주어진다. 둘째 줄에는 N개의 수가 주어진다. 수는 1,000보다 작거나 같은 자연수이다. 셋째 줄부터 M개의 줄에는 합을 구해야 하는 구간 i와 j www.acmicpc.net 구간합을 구하면 되는데, 숫자가 변하지 않기 때문에 누적합을 배열에 넣어놓고 배열[j]-배열[i-1] 값을 꺼내 출력하면 된다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public clas.. 2023. 2. 3.
대구 동성로 빠레뜨 한남/랜디스 도넛/꼬지짱 유퀴즈에 나왔다는 빠레뜨한남... 유퀴즈를 안봐서 진짠지는 모르겠지만 그렇다고 한다. 4명이 가서 1인1메뉴씩 시켰다. 양은 딱 1인분 정도이긴 하지만 성인남성이 메뉴 하나만 시켜서 먹기에는 좀 아쉬움이 드는 양이었다 (적게먹거나 여자라면 괜찮을듯) 나는 라구파스타를 시켰는데 맛은~ 특별하다기 보다는 익숙하게 맛있는 맛이었다 사실 평범하면 맛있는거라고 생각하기도 한다. 오른쪽은 오렌지에이드. 사이다에 시럽같은거 넣어준것같은데 5천원은 좀 비싸긴 하지만... 양식 먹으면서 탄산 안먹기가 힘들어서.. 전체적으로는 맛있었고 메뉴들도 예쁘게 나와서 좋았다. 배채우러 오기보다는 오순도순 여자들끼리 예쁜거 먹으러 오거나 데이트코스로 좋을 것 같다는 생각이 들었다. (우리는 음식 나오고서 5분만에 2명이 식사를 끝냈.. 2023. 2. 3.
[자바스크립트] 브라우저 로컬 스토리지(localStorage)사용하기 브라우저에 데이터를 저장하는 방법을 알아보자. localStorage.setItem('ㅇㅇ','kkk'); localStorage.setItem('name',[1,2,3]);//안됨 var arr=[1,2,3]; var newArr=JSON.stringify(arr); localStorage.setItem('name',newArr); var 꺼낸거=localStorage.getItem('name'); var newArr=JSON.parse(꺼낸거); console.log(newArr[0]); 로컬스토리지는 key:value의 형태로 저장할 수 있다. 문자나 숫자만 넣을 수 있어서, Array, Object자료형은 저장을 할 수 없다. 이때는 JSON.stringify() 메소드를 이용해서 문자열의 형태로.. 2023. 2. 2.
[자바스크립트] sort,map,filter var arr=[4,203,44,3,29]; arr.sort(); 이런 array를 정렬하기 위한 sort메소드가 있다. 과연 잘 정렬되었을까? 정렬이 되긴 되었지만 우리가 기대하는 값이 나오지 않았다. 아마 맨 앞 문자 기준으로 정렬이 되지 않았나 싶다. 그럼 숫자순으로 정렬하려면 어떻게 해야할까? arr.sort(function(a,b){ return a - b; }); 이렇게 sort안에 콜백함수를 넣어주면 된다. 이 콜백함수는 자바에서 쓰던 compareTo와 비슷하다고 보면 될 것 같다. 리턴값이 음수인지, 양수인지에 따라 위치가 바뀌는데, a-b를 리턴하면 오름차순 정렬이 된다. var c_arr=['a','c','d','b']; c_arr.sort(function(o1,o2){ if(o1o2.. 2023. 2. 2.
[자바스크립트] Ajax GET/POST 서버에 데이터를 보내거나(POST) 서버에서 데이터를 읽을 때(GET) 어떻게 GET/POST를 요청하는가? AJAX를 이용해서 get,post요청을 해보자. $.get('https://codingapple1.github.io/price.json').done(function(data){ console.log(data); }).fail(function(){ console.log('실패'); }); $get('url주소').done()으로 get요청할 수 있다. done()에는 콜백함수를 넣는데, done(function(data)){})와 같이 인자를 넣어주면, 해당 변수에 데이터가 담기게 된다. GET을 실패할 경우에는 .fail()이 실행된다. 더보기 버튼 만들기 더보기 버튼을 누르면, 서버에서 물품정.. 2023. 2. 2.
[자바스크립트] html생성하기, forEach, for in 반복문 var a=document.createElement('p'); a.innerHTML='ddd'; document.querySelector('#test').appendChild(a); /*---------------------------------------*/ var 템플릿 = '안녕' document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿); $('#test').append(템플릿); document.createElement 메소드를 이용해서 html을 생성, appendChild 메소드를 이용해서 생성한 html을 원하는 요소 안에 넣을 수 있다. 이 방법 말고도, 변수에 html내용을 문자열로 작성해놓은 다음, .html 혹은 .ap.. 2023. 2. 2.
[자바] 백준 11051번: 이항 계수2 https://www.acmicpc.net/problem/11051 11051번: 이항 계수 2 첫째 줄에 \(N\)과 \(K\)가 주어진다. (1 ≤ \(N\) ≤ 1,000, 0 ≤ \(K\) ≤ \(N\)) www.acmicpc.net 이항 계수 1과 같은 문제지만, 조건이 1 2023. 2. 2.
[자바] 백준 1644번: 소수의 연속합 https://www.acmicpc.net/problem/1644 1644번: 소수의 연속합 첫째 줄에 자연수 N이 주어진다. (1 ≤ N ≤ 4,000,000) www.acmicpc.net 소수는 에라토스테네스의 체 알고리즘을 이용해서 소수만 따로 arraylist에 모아 두고, 구해놓은 arraylist를 이용해서 투포인터 알고리즘을 쓰면 연속합의 개수를 쉽게 구할 수 있다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.ArrayList; public class P1644 { public static void main(String[] args) thr.. 2023. 2. 1.
트리아 레이저 제모기 구매기 피부가 좀 밝은편이라 면도를 해도 수염자국이 심해서 셀프 레이저제모를 해보기로 했다. 트리아 레이저제모기가 새제품은 30만원대인것 같은데 당근마켓에 10만원에 판다고 하는 분이 계셔서 바로 사러 갔다. 한강공원인데 옆에 강이 바짝말라서 물이 한방울도 없다.. 그나저나 옆에 주택가가 있었는데 꽤 운치있어보였다. 어찌저찌 거래하고 돌아오는 길... 당근마켓에 13만원->쿨거시 10만원이라고 적혀있어서 쿨거래 할테니까 10만원에 해주실수 있냐고 물어보려다가 이걸 물어보는 순간 쿨거가 아니게 되는건가....해서 혼자 생각만 하고있었는데 계좌이체 해드릴 때 10만원만 보내달라고 하셔서 10만원에 사왔다. 내부에는 설명서, 본체, 충전기로 간단하게 구성돼 있다. 위에 달린 버튼으로 전원을 켤 수 있고 켜진 상태에서.. 2023. 2. 1.
SL(에스엘) 채용 프로세스 설명회 들으러 간 날 계명대에서 채용설명회를 한다고 해서 계명대로 가는중. 계명대는 학교가 참 예쁘다 꽃보다남자에 나올 정도면 말 다한거긴 하지만 말이다. 계명대 성서캠은 이렇게 생겼다. 나는 계명대가 이렇게 크다고 생각을 못했다 대구에 있으니 좀 조그맣지 않을까 했는데 생각보다는 아주 컸다. 설명회가 진행될 바우어관 도착 도착하니 선물상자를 하나씩 주셨는데 상자 안에는 L폴더, 샌드위치, 마스크, 손난로가 들어있었다. ... SL(에스엘) 채용 프로세스 설명회를 들었다. 사실 SL이라는 회사를 원래는 몰랐다. SL은 자동차 부품을 만드는 B2B기업인데, 대표적으로는 자동차 헤드라이트를 만든다고 한다. 현대차,BMW 등등 많은 기업에서 SL의 부품을 사용한다고 한다. 그리고 신뢰,도전,겸손에 대한 이야기를 하셨는데 신뢰에 대.. 2023. 2. 1.
[자바스크립트] form-select 상품선택 모자 셔츠 이런 select 폼이 있다. 유저가 select에서 어떤 것을 선택했는지 어떻게 알 수 있을까? $('.form-select').val(); .val()로 알 수 있다. 이제 input 이벤트리스너를 활용해서 상품이 "셔츠" 가 선택될 때, 사이즈 선택 select form이 나오도록 해 보자. 상품선택 모자 셔츠 100 95 우선 셀렉트 폼을 각각 만들어 준다. 사이즈 선택 셀렉트의 경우에는, 상품을 셔츠로 선택했을 때만 보여야 하므로 unshow라는 클래스를 붙여 평상시에는 display:none;이 되도록 하였다. $('.form-select').eq(0).on('input', function () { var value = $('.form-select').eq(0).val();.. 2023. 2. 1.
[자바스크립트] Array와 Object 자료형 var car = ['소나타',50000,'white']; //array var car2 ={name:'소나타',price: 50000}; //object array는 배열, object는 맵(key:value)이라고 보면 된다. car[0]; car2.price; 이런식으로 값을 꺼내 사용할 수 있다. Array는 순서가 존재해서 인덱싱, 정렬,삽입등이 가능하고 Object는 key값으로 value를 뽑을 수 있어 데이터를 보기에 편하다. var car2 ={name:'소나타',price: 50000}; $('.card').html(car2.name +'/'+car2.price); 이렇게 Object자료형 변수에서 값을 꺼내서 사용할 수 있다. var car2 ={name:'소나타',price: [50.. 2023. 1. 31.
[자바] 백준 1837번: 암호제작 https://www.acmicpc.net/problem/1837 1837번: 암호제작 원룡이는 한 컴퓨터 보안 회사에서 일을 하고 있다. 그러던 도중, 원룡이는 YESWOA.COM 으로부터 홈페이지 유저들의 비밀키를 만들라는 지시를 받았다. 원룡이는 비밀 키를 다음과 같은 방법으로 www.acmicpc.net 10의 100승까지 되는 엄청 큰 숫자를 다뤄야 하기 때문에 BigInteger을 사용한다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.math.BigInteger; import java.util.StringTokenizer; public class P1.. 2023. 1. 31.
[자바스크립트] 이벤트 버블링 응용과 dataset 저번 시간에 이벤트 버블링에 대해 배웠다. 이러한 탭을 만들 때, Products Information Shipping list라는 요소 안에 tab-button이 존재하기 때문에 이벤트리스너를 list에 하나만 달아서 3개의 버튼을 모두 조작가능하게 할 수 있다. 추가로, data-id="0" 처럼 뒤에 붙여놓은것이 보일 텐데 data-데이터이름="값" 의 형태로 데이터를 저장해둘 수 있다. 나중에 이를 활용하여 이벤트에 써 보자. function tabOpen(i) { $('.tab-button').removeClass('orange'); $('.tab-button').eq(i).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-c.. 2023. 1. 30.
[자바스크립트] 이벤트 버블 이런 모달창이 있다. 검은색 배경을 클릭하면 모달창이 꺼지도록 하고싶어서 자바스크립트를 작성했다. 이렇게 작성했다. 그런데 잘 작동될까? 이 black-bg 위에 하얀색 모달 창이 얹혀있는 상태이기 때문에, 하얀색 모달창 부분을 클릭해도 이벤트가 발생하게 된다. 어떠한 요소의 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. $('~~~').on('click',function(e){ e.target;//유저가 실제로 누른거 e.currentTarget; // this e.preventDefault(); //이벤트 기본동작을 막음 submit 등 e.stopPropagation();//내 상위 요소로의 이벤트 버블링을 막음 }) 이벤트리스너의 콜백함수에 파라미터.. 2023. 1. 30.
[자바] 백준 6588번: 골드바흐의 추측 https://www.acmicpc.net/problem/6588 6588번: 골드바흐의 추측 각 테스트 케이스에 대해서, n = a + b 형태로 출력한다. 이때, a와 b는 홀수 소수이다. 숫자와 연산자는 공백 하나로 구분되어져 있다. 만약, n을 만들 수 있는 방법이 여러 가지라면, b-a가 가장 큰 www.acmicpc.net 에라토스테네스의 체 알고리즘으로 소수를 판별해놓고, 반복문으로 i를 2~100만까지 증가시키면서 i가 소수이고, n-i가 소수인 경우에 출력한다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class P6588 { static boolean.. 2023. 1. 30.
728x90
반응형

티스토리툴바