tetris11

• 

  Tetris game development #1-JavaScript, HTML, CSS, responsive web Select the language you need from the flag button at the top of the blog. All content on this blog can be translated using the translation function. The original of this article is here. sangminem.tistory.com/37 The first thing that comes to mind when developing games is board games, Among them, I think it is Tetris. Besides, the recent web language is highly utilized and the interest is growing.. For foreigners/English 2020. 11. 15.

• 

  테트리스 게임 개발 #10 - 모바일 플레이 기능 구현 목차 지난 강의 리뷰 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색 sangminem.tistory.com 이번에는 약속드린 대로 모바일에서 조작 가능하도록 버튼을 만들어 보겠습니다. 모바일 뷰에서는 고려할 사항이 좀 더 많습니다. 메타 설정 수정 하나하나 생각해 보겠습니다. 먼저 play.html을 수정할 건데요. 모바일 기기에서 최적화 된 화면을 보여주기 위한 메타 설정 값입니다. 일반적인 사항이라 특별한 설정이 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 sangminem.tistory.com 이번 시간에는 한층 더 고급스러워진 게임에 더욱 난이도 높은 기능을 추가해 보도록 해볼게요. 1. 먼저 콤보 기능을 만들어 볼 거구요. 2. 특정 레벨 이상에서 일정 시간이 지나면 밑에서 한 줄씩 올라오는 로직을 구현해 보겠습니다. 별 거 아닌 거 같아도 생각보다 고려할 게 많습니다. 정신 바짝 차리고 따라 오세요. 콤보 기능 추가 .. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 10. 1.

• 

  테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 목차 지난 강의 리뷰 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 목차 지난 강의 리뷰 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 테트리스 게임 개발 #6 - 시작, 종료, 일시 정지 및 레벨, 라인, 점수 계산 기능 구현 목차 sangminem.tistory.com 이제 테트리스는 저희 손 안에 있습니다. 원하는대로 바꾸도록 해 볼거예요. 1. main-board와 next-board에 밝은 색 무늬도 추가하여 1자 블럭이 잘 보이도록 할 겁니다. 2. 그리고 블럭에 스타일 옵션을 추가하여 블럭을 좀 더 고급스럽게 만들어.. 코딩 강의/컨텐츠를 만들어 볼까요 2020. 9. 28.

• 

  테트리스 게임 개발 #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.