본문 바로가기

분류 전체보기142

[JavaScript]2d 벽돌깨기 게임 요새 자바스크립트 공부중 재밌다 ㅋ.ㅋ 전엔 자바스크립트 너무 싫었는데ㅠ 요샌 재밌넹 가볍게 만들 수 있고 프로젝트도 빨리 끝나다보니 완성된 결과물을 빨리 볼 수있어서 간결하다는 느낌을 받는다 요건 소스 먼저 만들고 하나씩 뜯어보는 중 참고링크가 공부에 많은 도움이 된다 참고링크 : https://developer.mozilla.org/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it 캔버스 생성과 그리기 - 게임 개발 | MDN 이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를.. 2024. 3. 24.
[JavaScript]카드 짝 맞추기 게임 1. 카드 매칭 상태 이해하기 카드 게임은 뒷면이 보이는 카드들에서 임의의 두 장을 클릭해서 숫자가 맞는지를 맞추는 게임 카드는 뒷면이 보이고 있고, 클릭한 카드는 뒤집어지면서 앞면의 숫자가 표시 그리고 임의로 선택한 두 장의 카드 숫자가 일치하면 해당 카드는 일치한 카드로 표시가 되어 앞면이 보이는 상태로 고정이 됩니다. 매치된 카드는 색상을 다르게 하거나 해서 매치된 카드임을 표시 따라서 카드는 뒷면, 앞면, 매치됨 3가지 상태를 가지게 되며, 앞면과 뒷면 상태를 왔다 갔다 하다가, 최종적으로는 매치됨 상태로 고정이 됨 상태의 구분은 CSS 클래스로 함 "back"은 뒷면, "front"는 앞면, 그리고 매치된 카드는 앞면이면서 매치된 것이기 때문에 "front", "matched" 2개의 클래스를 .. 2024. 3. 24.
고인물 테스트 사이트 #고인물테스트 #거침없이하이킥고인물 #거침없이하이킥퀴즈 #거침킥테스트 #거침킥고인물 #거침킥퀴즈 #하이킥고인물 #하이킥테스트 #하이킥고인물 #하이킥퀴즈 #고인물퀴즈 https://testgo2024.netlify.app/ 2024. 3. 17.
Chapter 2-6. 무기 : Weapon Manager Chapter 2. 무기 Weapon Manager 🚖 무기 교체 📜WeaponManager.cs Holder에 붙인다. 매니저이니만큼 모두가 공유할 수 있는 static 멤버들을 가지고 있다. static 클래스 변수 접근이 쉽고 게임 내내 메모리에 남아 있다. 공유 되야 하므로. 따라서 남발하면 안되고 적재적소에 사용 하기를 권장 무기 교체 여러 무기들의 동작 관리 using System.Collections; using System.Collections.Generic; using UnityEngine; public class WeaponManager : MonoBehaviour { public static bool isChangeWeapon = false; // 무기 교체 중복 실행 방지. (Tru.. 2024. 3. 11.
Chapter 2-5. 무기 : 크로스헤어 Chapter 2. 무기 크로스헤어 🚖 크로스헤어 UI 만들기 CrossHair 빈 게임 오브젝트. 크로스 헤어를 나타내는 아래 5 가지 UI 요소들을 부모로서 묶는다. 크로스 헤어를 나타내는 5 가지의 이미지 UI 요소. 위치를 크로스헤어에 맞게 각각 설정해주었다. Dot 크로스 헤어 가운데 점. 크기 3 X 3. Line Right 크로스 헤어 오른쪽 선. 크기 20 X 3. Line Left 크로스 헤어 왼쪽 선. 크기 20 X 3. Line Up 크로스 헤어 위쪽 선. 크기 3 X 20. Line Down 크로스 헤어 아래쪽 선. 크기 3 X 20. 🚖 크로스헤어 애니메이션 동작에 따라 크로스헤어가 벌어지거나 투명해지는 등등 변화를 줄 것이라 애니메이션이 필요하다. 발사할 때 크로스 헤어가 벌어짐.. 2024. 3. 11.
Chapter 2-4. 무기 : 총알 HUD Chapter 2. 무기 총알의 상태를 알 수 있는 HUD 🚖 총알 HUD 만들기 캔버스 총알 HUD 를 그릴 종이 마련 캔버스 추가 Create - UI - Canvas Canvas의 Render Mode는 Screen Space -Overlay 로 해준다. 캔버스는 언제나 게임 화면 위에 덮어 씌워 그려지게 된다. ### 이미지 왼쪽 하단에 현재 총알 상태를 나타낼 배경 이미지 캔버스 위에 이미지 UI 를 추가해준다. 이미지 UI 는 Sprite 만 추가할 수 있다. 이미지 UI에 추가할 이미지 파일 설정 Texture Type 을 Sprite 로 설정 이미지 크기 맞추기 예를 들어 Sprite 이미지 파일의 너비 높이가가 182 x 38 이라면 182 를 커버할 수 있도록 Max Size를 256으.. 2024. 3. 11.

티스토리툴바