전체보기807

• 자바스크립트 아스키 코드 정렬 배열을 인자로 받아서 아스키 코드 순으로 정렬을 한 뒤 리턴하는 함수를 작성해 보겠습니다. function asciiSort(input, reverse) { var output = [], temp; if (input != undefined && input != null) { for (var i = 0; i < input.length; i++) { output.push(input[i]); } for (var i = 0; i < input.length; i++) { for (var j = i + 1; j < input.length; j++) { if (compareTo(output[i], output[j], reverse)) { temp = output[i]; output[i] = output[j]; out.. 프로그래밍 & IT 정보/Javascript 2020. 9. 24.

• 

  테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 지난 강의 리뷰 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #4 - 블럭 쌓 sangminem.tistory.com 점점 게임의 완성도가 높아지고 있습니다. 기세를 몰아서 더욱 높여 보겠습니다. 1. 최고 점수 표시 2. 블럭 색깔 추가 3. 배경음, 효과음 적용 위 3가지 사항을 이번에도 거침없이 적용할 예정이에요. 소스 코드 재정비 잠시 다시 한 번 코드 관리하기 좋.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 24.

• 

  테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 sangminem.tistory.com 지난 시간까지 기본적인 테트리스의 기능은 구현이 완료 되었습니다. 지금부터는 부가적인 기능을 구현해 보는 시간을 갖도록 할 거예요. 1. 게임 시작, 종료, 일시 정지 2. 레벨, 라인, 점수 계산 위와 같은 기능이 추가 되어야 더욱 게임 다운 게임이 되겠죠. 게임 시작, 종료, 일시 정지 일단 게임 시작, 일시 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 23.

• 

  테트리스 게임 개발 #5 - 하드 드랍 및 라인 제거 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 테트리 sangminem.tistory.com 지금부터는 테트리스의 필수적인 기능을 마무리 하는 시간을 가져 보겠습니다. 1. 하드 드랍 2. 라인 제거 3. 게임 종료 위와 같은 순서로 작성을 한 번 해볼게요. 하드 드랍 기능 구현 먼저 하드 드랍 기능입니다. 그러기 위해 새로운 키를 등록해야 겠죠. function keyHandler(event) { const inputKey = e.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 20.

• 

  테트리스 게임 개발 #4 - 블럭 쌓는 로직 작성 목차 지난 강의 리뷰 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 테트리스 게임 개발 #3 - 블럭 이동 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #1 - 소개 및 기본 화면 sangminem.tistory.com 이번에는 다음과 같은 기능을 구현해 보겠습니다. 1. 블럭이 위에서 아래로 자동으로 내려오고 2. 블럭이 바닥에 도달하면 새로운 블럭을 다시 내려오도록 해 볼게요. 3. 그런 다음 내려온 블럭을 쌓아 보겠습니다. 블럭 애니메이션 효과 애니메이션 효과를 주기 위해서는 window.requestAnimationFrame() 메서드를 이용하면 됩.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 18.

• 

  테트리스 게임 개발 #3 - 블럭 이동 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #1 - 소개 및 기본 화면 구성 테트리스 게임 개발 #1 - 소개 및 기본 화면 구성 게임 개발 하면 제일 먼저 떠 오르는 종류가 보드 게임, 그 중에서도 테트리 sangminem.tistory.com 앞서 main-board와 next-board에 block을 표시하는 것까지 해 보았는데요. 이번 포스팅에서는 직접 조작을 해 보겠습니다. 1. board에 표시된 block을 방향키로 움직여 보도록 할게요. :) 2. 그 전에 JavaScript 파일을 정비하고 가야 할 필요가 있어보입니다. 소스 코드 정비 하나의 파일에 체.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 16.

• 

  테트리스 게임 개발 #2 - 블럭 모양 및 랜덤 선택 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #1 - HTML, 자바스크립트, CSS를 활용하여 기본 화면 구성 테트리스 게임 개발 #1 - HTML, 자바스크립트, CSS를 활용하여 기본 화면 구성 게임 개발 하면 제일 먼저 떠 오르는 종류가 보드 게임, 그 중에서도 테트리스가 아닌가 싶어요. 게다가 최근 웹 언어가 활용도가 높고 그 만큼 관심이 커지고 있기 때문에 지금부터 순수 HTML, Ja sangminem.tistory.com 지난 포스팅에서는 테트리스 게임을 만들기 위해 아래와 같이 기본적인 틀만 간단히 구현해 보았는데요. 1. 지금부터는 main-board와 next-board에 특정 블럭을 선택하고 2. 선택된 블럭을 그려 볼게요. 블럭 모양 구성 테트리스 게임에서는 아래와 같이 블럭의 모양을.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 12.

• 

  테트리스 게임 개발 #1 - HTML, 자바스크립트, CSS를 활용하여 기본 화면 구성 게임 개발 하면 제일 먼저 떠 오르는 종류가 보드 게임, 그 중에서도 테트리스가 아닌가 싶어요. 게다가 최근 웹 언어가 활용도가 높고 그 만큼 관심이 커지고 있기 때문에 지금부터 순수 HTML, JavaScript, CSS 만을 이용하여 테트리스 게임을 만들어 보기로 할건데요. 목차 데모(Demo) 완성되면 위처럼 동작을 합니다. (실제 플레이 가능합니다) 기대되지 않나요? ㅎㅎ 테트리스 - 민이게임 테트리스 민이게임 sangminem-game.web.app 깃허브(GitHub) 소스 공유 GitHub Sangminem Tetris sangminem/tetris made with javascript, html, css. Contribute to sangminem/tetris development by c.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 10.

• 파이썬 조건문 (if, 딕셔너리 활용) 조건문에 대해 간단히 알아 보겠습니다. 1. if 문 test = 5 if test > 참입니다 조건이 하나만 있는 if 문입니다. 10은 5보다 작으므로 조건이 참이 되고 '참입니다' 문구가 출력됩니다. test = 15 if test > 두번째 조건이 참입니다 다음은 조건이 2개가 있는 if/elif 문 입니다. 조건이 2개 이상 있을 경우는 elif 문으로 추가하면 됩니다. 여기서 15는 10보다 작지 않으므로 첫번째 조건이 만족하지 않고 20보다는 작으므로 두번째 조건이 만족하여 '두번째 조건이 참입니다' 가 출력.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• 파이썬 반복문 (for, while) 자주 쓰이는 반복문에 대해 간단히 알아보겠습니다. 1. for 문 test_list = [1,2,3,4,5] for test in test_list: print(test) # 출력 결과 # 1 # 2 # 3 # 4 # 5 test_list 배열의 데이터 개수만큼 반복하여 수행됩니다. for i in range(5): print(i) # 출력 결과 # 0 # 1 # 2 # 3 # 4 range 메서드를 사용하면 원하는 범위만큼 반복 수행이 가능합니다. 2. while 문 test_list = [1,2,3,4,5] cnt = 0 while cnt != len(test_list): print(test_list[cnt]) cnt += 1 # 출력 결과 # 1 # 2 # 3 # 4 # 5 while문은 조건이 참.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• 

  파이썬 BeautifulSoup 파싱(Parsing) 다양한 방법 파이썬을 공부하면서 html 문서에서 특정 태그를 가져오는 다양한 방법에 대해 정리를 해 보았습니다. 다음과 같은 HTML 문서가 있다고 가정을 하고 BeautifulSoup 모듈을 이용해서 특정 태그를 파싱해 오는 방법을 하나씩 보도록 할게요. from bs4 import BeautifulSoup html = """ Content1 Content2 Goal Content3 """ soup = BeautifulSoup(html, "html.parser") 목표는 아래 태그입니다. Goal 1. find() 메서드 활용 print(soup.find('div',id='target')) #tag, id print(soup.find('div',attrs={'id':'target'})) #tag, 속성으로서의 i.. 프로그래밍 & IT 정보/Python 2020. 9. 2.

• 

  [왕초보 코딩 6강] 웹 계산기 만들기 2 - HTML, JavaScript(자바스크립트) #지난강의 sangminem.tistory.com/23 [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) 지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요 이 강의는 자연스럽게 sangminem.tistory.com 안녕하세요. 5강을 보지 않으신 분은 5강부터 봐주시기 바랄게요. 이어서 웹 계산기 만들기를 진행하겠습니다. 지금부터는 값1, 값2, 연산자에 값을 넣고 계산하기 버튼을 누르면 결과에 계산된 값이 찍히게끔 기능을 만들어 보도록 하겠습니다. 그리고 입/출력된 값들을 모두 지우는 초기화 기능도 만들어 보겠습니다. 자 그럼 진행해 볼게요. 값1: .. 코딩 강의/왕초보인데 가능할까요 2020. 9. 2.