반응형 css14 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 지난 시간에 이어서 인트로 부분과 결과 부분을 작성해 보겠습니다. 인트로, 메인, 결과 전부 html 파일 하나에서 보여줄 예정입니다. 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 기다리고 기다리던 심리 테스트 만들기 강좌를 시작하겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 심리 테스트를 sangminem.tistory.com 목차 인트로 화면 작성 test.html에 이어서 작성을 해 보겠습니다. 인트로 HTML 작성 테스트를 시작합니다 심리 테스트 시작 전에 도입 멘트를 표시하기 위한 부분입니다. 마찬가지로 클래스 이름을 미리 붙여서 지정해 놓았.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 13. 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요. 목차 컨셉 케릭터나 배경을 디자인 할 능력이 없으므로 최대한 심플한 컨셉으로 가보겠습니다. 필요 스킬 기본적인 웹 언어(HTML, CSS, JavaScript)와 자바스크립트 라이브러리(또는 프레임워크)인 jQuery, Vue 등을 사전에 알고 있으시면 더욱 수월하게 진행하실 수 있습니다. 완성 후 동작 화면 시작부터 심플 합니다. 인트로 부분도 심플 합니다. 테스트 질문, 답변 부분도 심플 합니다. 결과 화면 마저 심플 합니다. 모든 게 심플합니다. 데모(Demo) 아래 화면에서 시작하기를 누르면 실제로 동작합니다. 소리를 켜보세요. 인트로 부분.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 9. 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. 티스토리(TISTORY) 블로그 제목에 반응형 웹 CSS 스타일 설정하기 1. 관리 페이지 접속 > 꾸미기 > 스킨 편집 클릭 2. html 편집 클릭 3. CSS 클릭 4. @media screen 구문 입력 이 구문은 화면의 너비가 360px 이하가 되면 적용하겠다는 의미입니다. 아래 보이는 이미지는 상단 블로그 이름에 적용한 스타일인데요. 화면 너비에 따라서 3가지 크기로 변경되도록 설정을 해 놓았습니다. * 화면 너비가 767px 초과인 경우 * 화면 너비가 767px 이하 360px 초과인 경우 * 화면 너비가 360px 이하인 경우 이와 같이 브라우저 크기에 따라 스타일을 다르게 지정할 수 있습니다. 정보/블로그 운영팁 2020. 10. 6. 테트리스 게임 개발 #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. 이전 1 2 다음 반응형
