월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
renderGame 함수에 로그를 찍으면 무한루프가 돕니다
window.requestAnimationFrame 에서 계속 호출을 하고 있어서 그런 것 같은데스위치를 만들어야 할까요?
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검이 날아가지 않습니다
const renderGame에서 keyMotion()까지는 작동을 하는데그 이후 forEach부분부터는 작동하지 않는것같습니다, 왜이럴까요?오타도 없고 아무이상없습니다!혹시 window.requestAnimationFrame이 너무 빨라서 bulletComProp foreach가 씹히는걸까요? ㅠㅠ... 코드 보내드립니다<game.js> const renderGame = () => { hero.keyMotion(); bulletComProp.arr.forEach((arr,i)=>{ arr.moveBullet(); }) window.requestAnimationFrame(renderGame); } <class.js> if(key.keyDown['attack']){ this.el.classList.add('attack'); bulletComProp.arr.push(new Bullet()); } class Bullet { constructor(){ this.parentNode = document.querySelector(".game"); this.el = document.createElement("div"); this.el.className = "hero_bullet"; this.x = 0; this.y = 0; this.speed = 30; this.distance = 0; this.init(); } init(){ this.x = hero.position().left + hero.size().width/2; this.y = hero.position().bottom - hero.size().height/2; this.el.style.transform = `translate(${this.x}px, ${this.y}px)`; this.parentNode.appendChild(this.el); } moveBullet(){ this.distance += this.speed; this.el.style.transform = `translate(${this.distance}px, 100)`; this.el.style.backgroundColor = 'red'; } }
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검 방지턱(?) 현상
안녕하세요 코딩 1달차 뉴비입니다... 선생님의 지도에 따라 수리검 만들고 화면 밖을 벗어나면 수리검이 없어지는 효과까지 구현을 하였습니다만... 화면밖에서 사라질때 스크롤바가 뜬금없이 나와 방지턱에 걸린 마냥 hero가 올라갔다 내려갔다 합니다... 아래 그림처럼 말이죠... 브라우저 문제일까요?? 구글크롬 사용하고 있습니당..
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
requestanimationframe 성능관련 궁금증
안녕하세요 좋은 강의 잘 참고해서 재밌게 만들어보고있습니다. ^^requestanimationframe을 사용해서 애니메이션이 부드럽게 잘 이동합니다만애니메이션 종료를 따로 설정해주지 않으면 renderGame()은 무한히 반복될텐데 성능에 문제가 없을까요?bulletComProp.arr와 allMonsterComProp.arr의 경우 충돌하거나 사라질때 배열에서 삭제하기때문에 순회할게 없어 동작이 안된다고하더라도 hero.keyMotion 혹은 setGameBackground는 console로 찍어보니 값이 무한히 반복해서 성능에 문제가 되지 않을까 고민해보게 되네요답변주시면 감사하겠습니다정말 감사합니다.
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
frame 질문합니다.
요즘 모니터가 거의다 144hz 인데 수업에서는 60hz를 기준으로 잡고 하시더라구요 144 모니터에서 실행 시킬경우 케릭터가 너무 빨리 달리는것 처럼 모션이 보이는데 이경우는 어떻게 60fps로 고정을 할 수 있나요
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
개발툴은 어떤걸 사용하나요?
제가 인프런에서 강의를 처음 듣게되었는데개발툴을 어떤걸 사용해야할지 모르겠어서요혹시 강의 중 사용하신 개발툴을 알 수 있을까요?
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
e.which에 대한 질문입니다.
강의를 보다가 궁금한점이 있어 질문드립니다. (해당 영상에서는 9:56에 있습니다.) 영상에서는 e.which 라는 걸 사용하여 해당 키를 눌렀을시 번호가 몇번째인지 알기 위해서 사용 하는것 같은데 제가 구글링을 해보니 mdn 에선 이걸 사용하는걸 권하지 않고 e.key 나 e.code 를 사용권장을 하더군요. (참고로 전 VSCode를 사용중인데요, 에디터 상에서도 e.which는 취소선 처리되어져서 나오더라구요. 기능은 작동 되었습니다.) e.key나 e.code를 사용할시에는 숫자가 아니고 예로들면 왼쪽 방향키를 눌렀다면 ArrowLeft 이런식으로 나오더라구요. 즉, e.which를 사용해도 되는건지를 여쭙고 싶었습니다. 감사합니다. 참고 링크입니다. http://daplus.net/javascript-keycode%EC%99%80-which/ https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검이 사라집니다
제 코드 입니다. 다른건 건들지 않고 닌자 크기만 css에서 변경했는데 수리검이 나오지 않습니다 왜 그런걸까요...? 확인해보니 밑으로 내릴 수 있는 스크롤이 생겨서 공격 모션시에 스크롤을 쭉 내려보면 밑에서 날라가고 있었습니다 ... 이유를 모르겠네요 ..
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
const 변수 및 Arrowfunction 방식 질문
안녕하세요 강사님 질문이 있습니다. 2:21 에서 const 는 흔히 상수형태로 잡기 위해 많이 쓰는걸로 알고 있는데요 이 const 상수 선언 방식에서 ()=> Arrow function 형태가 혼합해서 들어가는것 같은데 어떤 용도인지 궁금해서 질문 드립니다.
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
몬스터나 npc의 위치가 일정 크기를 넘어가면 히어로가 사라집니다.
몬스터든 npc든 생성 위치를 조금만 크게 잡아도 히어로가 이동하다 말고 사라집니다.(생성 위치를 600정도로 작게 잡으면 문제가 없습니다.) 수업을 들으며 똑같이 코딩했는데도 불구하고 이러한 현상이 나타나서 올려주신 complete 코드의 마지막 완성 코드를 실행해 봤는데도 마찬가지입니다. 아래 GIF 파일은 제공해주신 코드를 실행한 모습입니다.. 며칠째 이런 문제가 해결되지 않아 어떻게 해야될지 몰라 질문드립니다.
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검 방향 전환 처리에서 간단한 질문 있습니다.
수리검 생성시 수리검의 방향을 결정하는 변수를 선언해 히어로의 방향을 담는 이유는 잘 알겠는데, 거기서 그냥 this.bulletDirection = hero.direction; 을 하지 않고 this.bulletDirection = hero.direction === "left" ? "left" : "right"; 이렇게 하는 이유가 있나요? 어차피 히어로의 direction도 left 혹은 right인데 왜 이렇게 하는지 궁금합니다.
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
마이너스 좌표값(?) 사용
this.y = (hero.position().bottom - hero.size().height) / 2; 값이 마이너스인데 +로 바꾸면 화면에 안뜨더라고요 웹 상 좌표 읽는 방식이 다른 건가요?? 처음 강의 keyframe 설정할때도 background-position-x 값을 -3770px로 설정한 것과 +3770px와의 차이점을 알고싶습니다. 짧게 말해 보통 +값으로 하는데, -를 사용해야하는 이유를 알고싶습니다,, 좌표 어렵네여,,
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
코딩작업하고 웹화면 띄워서 확인하는 방법?
안녕하세요. 강의 잘듣고 있습니다. 초보적인 질문일 수 있는데...(긍데 제가 초보라......) 작업하고 웹화면띄워서 확인할 때마다 start debugging으로 하시는 건가요?? 코드 수정하고 매번 alt+b 눌러서 확인하는데, 새창띄우고 다시 F12눌러서 개발자도구 매번 여는게 너무 번거로운데... 어떻게 확인하는건지 궁금합니다.
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터가 점프하면서 앞으로 나아가게 만들고있습니다
점프하면 앞으로 나가게는 만들었는데 방향이 left인 상태에서 점프를 up하면 right을 향한채로 뒤로 점프하게 됩니다. 계속 생각해보다가 도무지 모르겠어서 질문드립니다..! up에서 기본으로 방향이 right으로 향하는거 같은데 어떻게 해결해야할까요 if (key.keyDown["right"] && key.keyDown["up"]) { this.el.classList.add("jump_run"); this.el.classList.remove("run"); this.el.classList.remove("jump"); this.el.classList.remove("flip"); this.direction = "right"; this.moveY = this.moveY - this.jump; this.moveX = this.moveX + this.speed; setTimeout(() => { this.el.classList.remove("jump_run"); this.el.classList.add("run"); }, 300); } else if (key.keyDown["left"] && key.keyDown["up"]) { this.el.classList.add("jump_run_back"); this.el.classList.add("flip"); this.el.classList.remove("run"); this.el.classList.remove("jump"); this.direction = "left"; this.moveY = this.moveY - this.jump; this.moveX = this.moveX - this.speed; setTimeout(() => { this.el.classList.remove("jump_run_back"); }, 300); ////// 이하 CSS .hero_box .hero.flip { transform: rotateY(180deg); } .hero_box .hero.jump { animation: hero_jump 0.5s 1; } .hero_box .hero.jump_run { animation: hero_jump_run 0.5s 1; } .hero_box .hero.jump_run_back { background-size: 1498px 182px; animation: hero_jump_run_back 0.5s 1; } @keyframes hero_jump_run_back { 0% { transform: translate(0, 0); } 50% { transform: translate(-25px, -150px); } 100% { transform: translate(-40px, 0); } } @keyframes hero_jump_run_back_flip { 0% { transform: rotateY(180deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(180deg); } }
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
전체 이미지에서 원하는 부분만 컷하고 싶어요(사진첨부)
사진 첨부한것처럼 전체에서 원하는 부분만 컷하고 싶은데 방법을 모르겟어요
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
질문있습니다.
혹시 배열 요소를 지울때 shift로 제일 처음 들어온 요소를 지우도록 구현하면 문제가 될까요??
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
깃헙 레포 질문드립니다.
혹시 깃허브 프라이빗 레파지토리에는 푸쉬해도 상관없을까요??
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터 기본 모션 만들기, 경로가 인식이 안되요.
complete 폴더에 있는 css 파일은 이미지 경로에 빨간줄이 안 그이는데 coding파일에 있는 css 파일은 이미지 경로에 빨간줄이 그이면서 인식이 안되요... complete에 있는 완성 파일도 지금 인텔리제이 쓰고 있는데 인텔리제이 개발툴로 파일 들어가서 실행시키면 이미지가 인식이 안되더라구요. 그냥 폴더에 html파일 실행시키면 이미지가 인식이 되고요;;
- 해결됨웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
몬스터가 참조가 안되는 이슈가 있습니다.
안녕하세요. 강의 중 stageInfo 에서 monster 를 아래처럼 선언하게 되면, greenMon 을 찾을 수 없다고 에러가 뜹니다. const stageInfo = { stage: [], monster: [ {defaultMon: greenMon, bossMon: greenMonBoss}, {defaultMon: yellowMon, bossMon: yellowMonBoss}, {defaultMon: pinkMon, bossMon: pinkMonBoss} ] } Uncaught ReferenceError: greenMon is not defined at game.js:27 올려주신 완성본 파일로 한번 덮어 씌워봤는데도 동일한 에러가 뜨는데요... 확인 해주실 수 있으실까요 ?? (앞에 stageInfo 에서 greenMon 을 추가할 때 Monster.greenMon 으로 수정하면 class Monster 에서 제대로 받아오지 못하는 것 같아요)
- 미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
기초적인 질문이라 부끄럽지만 질문 드립니다
안녕하세요, html, css는 잘 알지만 javascript는 이 강의로 처음 접해보기에 강의 진행에 어려움을 느껴 질문 드립니다. 강의 중 const windowEvent = () => { // 코드 내용 }; 위와 같은 형태가 나오는데요, 이게 함수를 만드는 문법인건가요? function 함수이름() { } 과 같은 형태는 자주 봤는데 처음 보는 형태라 질문 드립니다. 더불어 제가 쓰는 에디터에서 자꾸 노란줄이 생기는데요 (visual studio code 사용중입니다) 이것과 관련해 초기에 세팅 작업이 필요한건가요? 또 7강 진행 도중 this.el.parentNode.style.transform = 'translateX(${this.movex}px)' 부분이 동작하지 않아 this.el.parentNode.style.transform = 'translateX('+this.movex+'px)'; 위와 같이 바꿨더니 동작하는데, ${}가 어떤 것인지 설명 부탁드립니다. 좋은 강의에 부족한 실력이지만 열심히 따라가려고 노력하고 있습니다. 답변 기다리겠습니다. 감사합니다.