반응형 JavaScript25 테트리스 게임 개발 #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. [왕초보 코딩 6강] 웹 계산기 만들기 2 - HTML, JavaScript(자바스크립트) #지난강의 sangminem.tistory.com/23 [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) 지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요 이 강의는 자연스럽게 sangminem.tistory.com 안녕하세요. 5강을 보지 않으신 분은 5강부터 봐주시기 바랄게요. 이어서 웹 계산기 만들기를 진행하겠습니다. 지금부터는 값1, 값2, 연산자에 값을 넣고 계산하기 버튼을 누르면 결과에 계산된 값이 찍히게끔 기능을 만들어 보도록 하겠습니다. 그리고 입/출력된 값들을 모두 지우는 초기화 기능도 만들어 보겠습니다. 자 그럼 진행해 볼게요. 값1: .. 코딩 강의/왕초보인데 가능할까요 2020. 9. 2. [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) #지난강의 sangminem.tistory.com/22 [왕초보 코딩 4강] 프로그래머 첫걸음 이 글을 우연히 보고 들어오신 분이 대부분이겠죠? 만약 꾸준히 공부할 마음이 생겨서 일부러 찾아 오신 분이라면 책임지고 끝까지 가르쳐 드리겠습니다. 열정만큼은 이미 합격입니다. 코딩 별 sangminem.tistory.com 지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요. 이 강의는 자연스럽게 코딩과 가까워지고 싶은 분들을 위한 것이므로 진행에 있어서 필요하지 않은 교과서적인 설명은 따로 하지 않습니다. 또한 코딩 왕초보를 위한 강의인 만큼 전문적인 용어는 가급적 쓰지 않고 이해를 바탕으로 진행하겠.. 코딩 강의/왕초보인데 가능할까요 2020. 9. 2. 자바스크립트 크롤링 따라하기 안녕하세요. 오늘은 번외로 실용적인 내용을 준비했습니다. 목차 크롤링이 필요한 이유 아끼는 대학 후배를 오랜만에 만났는데 한 웹사이트에서 검색을 하여 수백 건에 이르는 결과를 일일이 한 땀 한 땀 엑셀에 붙여넣는 노가다성 작업을 한다면서 힘들어 하더라구요. 그 말을 듣고 제가 가만히 있을 수는 없었죠. 어떻게든 한방에 할 수 있는 방법을 찾아보겠다고 호언장담을 했습니다. 크롤링이란 사실 크롤링이라는 용어는 잘 몰랐는데 들어보니 저는 스크래핑으로 알고 있었던 기술이었어요. 보통 이 두 가지 용어를 혼용해서 쓰는거 같아요. 간단히 말하면 웹페이지 내용을 그대로 읽어와서 원하는 내용을 추출하는 작업인데요. 어떻게 사용하느냐에 따라 굉장히 유용한 결과물을 얻어낼 수 있어 보입니다. 크롤링을 위한 사전 준비 이 .. 코딩 강의/유용한 스킬 없을까요 2020. 8. 26. [왕초보 코딩 3강] 나도 프로그래머가 될 수 있을까 #지난강의 sangminem.tistory.com/20 [왕초보 코딩 2강] 컴퓨터와의 첫 소통 안녕하세요. 많이 기다리셨다구요? 아닌거 알아요. 죄송합니다. 오늘은 실제로 뭐라도 하나 직접 해보면서 대체 컴퓨터와 의사소통을 어떻게 한다는거야? 하고 막연하게만 느껴졌던 부분을 살 sangminem.tistory.com 안녕하세요. 금방 다시 인사드리네요. ㅎㅎ 아무도 안 보는데 혼자 인사중.. 안타깝게도(?) 제가 시간이 많아서 바로 강의 하나를 더 올릴 수 있게 됐어요. 혹시 2강에서 벌써 좌절하신 분 계신가요. 없을거라 믿겠습니다. 그렇다면 이 글도 안보고 있겠죠. 원래 컴퓨터와 소통하기가 좀 힘들어요. 이 녀석은 문과 감성이 통하지 않거든요. 두리뭉실하게 말하거나 시적인 표현을 쓰면 알아듣지를 못합.. 코딩 강의/왕초보인데 가능할까요 2020. 7. 11. 로컬스토리지에서 배열로 저장하는 방법 목차 목표 JSON Object를 활용하여 localStorage에 배열 형태로 값을 저장할 수 있습니다. 방법 JSON Object를 만들어 저장하고 불러오는 방식으로 구현하였습니다. Set 함수 구현 key에 대응하는 value를 배열로 갖는 JSON Object를 만든 후 JSON String으로 변환하여 localStorage에 저장합니다. function setArray(key, value, limitMax){ var str = localStorage.getItem(key); var obj = {}; try { obj = JSON.parse(str); } catch { obj = {}; } if(!obj){ obj = {}; obj[key] = []; } obj[key].push(value); .. 프로그래밍 & IT 정보/Javascript 2020. 7. 3. 자바스크립트 URL 및 E-Mail 링크 자동 생성 [목표] URL 및 E-Mail 입력 시 자동으로 태그 링크를 생성합니다. [방법] 아래와 같이 정규식을 활용하여 태그를 추가합니다. function autoLink(id) { var container = document.getElementById(id); var doc = container.innerHTML; var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi"); var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi"); container.innerHTML = doc.replace.. 프로그래밍 & IT 정보/Javascript 2020. 7. 3. 자바스크립트 JSON 오브젝트 복사 [목표] Javascript에서 객체 원본을 그대로 유지하고자 할 때 복사하여 사용합니다. ※ 대입연산자(=)를 사용할 경우는 참조(Reference) 변수가 되기 때문에 주의가 필요합니다. [방법] 1. 기본으로 제공되는 함수가 없으므로 라이브러리를 구하거나 직접 만들어 써야합니다. function clone(obj) { if (null == obj || "object" != typeof obj) return obj; var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]; } return copy; } 위와 같은 방법은 value가 object라면 복사가 되지 않고 .. 프로그래밍 & IT 정보/Javascript 2020. 7. 2. 이전 1 2 3 다음 💲 추천 글 반응형