웹 게임을 만들며 배우는 자바스크립트

웹 게임을 만들며 배우는 자바스크립트

(25개의 수강평)

5372명의 수강생
Javascript게임개발
무료
지식공유자 · 조현영
114회 수업· 총 22시간 3분수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 초급
강호승 프로필

동일질문 html을 유지한채 진행한다면 강호승 8시간 전
js로 반복문을 통해서 td태그를 생성함과 동시에 배열에 집어 넣는 방법 말고 html로 테이블의 틀을 작성했다면, 각 칸들의 값을 어떻게 '칸들'변수에 집어 넣을 수 있을까요?

0
강호승 프로필

아래 질문하신분이랑 동일한 질문입니다. 강호승 8시간 전
js로 반복문을 통해서 td태그를 생성함과 동시에 배열에 집어 넣는 방법 말고 html로 테이블의 틀을 작성했다면, 각 칸들의 값을 어떻게 '칸들'변수에 집어 넣을 수 있을까요? 아래 질문만 답이없어 혹시 못보셨을까 다시 올려봅니다

0
dlgydlf12345 프로필

for문하면 더 간단하게 할 수 있는데 foreach로 보여주신 이유가 무엇인가요??? dlgydlf12345 2일 전
let arr = Array(45); console.log(arr); for (let i = 0; i < 45; ++i) {   arr[i] = i + 1; }

1
kaoe1112@naver.com 프로필

가위바위보 질문있습니다 kaoe1112@naver.com 22일 전
가위바위보.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #computer { width: 160px; height: 200px; background: url('https://imagescdn.gettyimagesbank.com/500/17/859/219/0/824700804.jpg') -30px -80px; } </style> </head> <body> <div id="computer"></div> <div> <button id="scissor" class="btn">가위</button> <button id="rock" class="btn">바위</button> <button id="paper" class="btn">보</button> </div> <script src="가위바위보.js"></script> </body> </html> ------------------가위바위보.js var left = 0; setInterval(function () { if (left === 0) { left = '-175px'; } else if (left === '-175px') { left = '-300x'; } else { left = 0; } document.querySelector('#computer').style.background = 'url(https://imagescdn.gettyimagesbank.com/500/17/859/219/0/824700804.jpg) -30px -80px' + left + '0'; }, 100); ------------------질문 이미지 변경이 안되는데 어떤게 문제인지 모르겠습니다.

1
홍민영 프로필

구구단 js 질문 홍민영 1달 전
html <!doctype html> <html>     <head>         <meta charset="utf-8">         <title>구구단</title>     </head>     <body>         <div id = "word1"></div>         <form id="form">             <input type="text" id="inputText">             <input type="button" id="btn" value="제출">         </form>         <div id="result"></div>         <script src="gugudan.js"></script>     </body> </html> js var random1 = Math.ceil(Math.random()*9); var random2 = Math.ceil(Math.random()*9); var answer = random1 * random2; var word1 = document.getElementById("word1"); word1.textContent = String(random1)+" * "+String(random2)+" = ?"; var form = document.getElementById("form"); form.addEventListener("submit",function(e){     e.preventDefault();     var inputText = document.getElementById("inputText");     var result = document.getElementById("result");     console.log(answer, inputText.value);     if(Number(inputText.value)===answer){         result.textContent = "정답입니다.";         random1 = Math.ceil(Math.random()*9);         random2 = Math.ceil(Math.random()*9);         answer = random1 * random2;         word1.textContent = String(random1)+" * "+String(random2)+" = ?";         inputText.value="";         inputText.focus();     }     else{         result.textContent="오답입니다.";         inputText.value="";         inputText.focus();     } }); 구구단 화면을 HTML로 만들었는데 엔터하면 잘 작동하는데 버튼을 누르면 작동이 안돼요,, 어디가 문제일까요..?ㅠㅠ

1
bigpel66 프로필

워... 지립니다.. bigpel66 1달 전
감사합니다 선생님

0
사랑수학 프로필

자스스톤 응용 사랑수학 1달 전
초보자라 질문할 점이 참 많습니다. html파일은 깃허브에 있는 최종버전을 그대로 쓰는 상황입니다. js 파일은 카드 구성은 일단 했으나 구현 부분에 있어서는 주석으로 달아놓기는 했습니다만 function Card() 함수의 if문 부분을 어떻게 수정해야 하는지를 모르겠습니다. 일단 이 결과를 실행해보니 이런 결과가 나옵니다. 어떻게 수정해야 하나요? function Gcard(name, att, hp, cost) {     this.name = name;     this.att = att;     this.hp = hp;     this.cost = cost; } var 알파 = new Card('알파', 8, 35, 1); var 베타 = new Card('베타', 900, 8570, 6); var 감마 = new Card('감마', 5, 30, 1); var 오메가 = new Card('오메가', 450, 7500, 5); var 제타 = new Card('제타', 15, 70, 2); var 델타 = new Card('델타', 740, 6850, 5); var 시그마 = new Card('시그마', 6, 60, 1); var 람다 = new Card('람다', 320, 3140, 5); var 라디안 = new Card('라디안', 10, 170, 2); var 루트 = new Card('루트', 11, 60, 2); var 엡실론 = new Card('엡실론', 880, 9120, 6); var 파이 = new Card('파이', 7, 40, 1); var 로 = new Card('로', 6, 45, 1); var 타우 = new Card('타우', 400, 3065, 5); var 오미크론 = new Card('오미크론', 50, 180, 3); var 카파 = new Card('카파', 40, 220, 3); var 뮤 = new Card('뮤', 9, 85, 1); var 뉴 = new Card('뉴', 100, 550, 3); var 카이 = new Card('카이', 1500, 25620, 10); var 프시 = new Card('프시', 1620, 21000, 10); var 상대 = {     영웅: document.getElementById('rival-hero'),     덱: document.getElementById('rival-deck'),     필드: document.getElementById('rival-cards'),     코스트: document.getElementById('rival-cost'),     덱data: [],     영웅data: [],     필드data: [],     선택카드: null,     선택카드data: null, }; var 나 = {     영웅: document.getElementById('my-hero'),     덱: document.getElementById('my-deck'),     필드: document.getElementById('my-cards'),     코스트: document.getElementById('my-cost'),     덱data: [],     영웅data: [],     필드data: [],     선택카드: null,     선택카드data: null, }; 상대.덱data.push(알파) 상대.덱data.push(시그마) 상대.덱data.push(뮤) 상대.덱data.push(뉴) 상대.덱data.push(로) 상대.덱data.push(파이) 상대.덱data.push(제타) 상대.덱data.push(오메가) 상대.덱data.push(엡실론) 상대.덱data.push(프시) 나.덱data.push(델타) 나.덱data.push(타우) 나.덱data.push(람다) 나.덱data.push(라디안) 나.덱data.push(감마) 나.덱data.push(오미크론) 나.덱data.push(카파) 나.덱data.push(루트) 나.덱data.push(베타) 나.덱data.push(카이) var 턴버튼 = document.getElementById('turn-btn'); var 턴 = true; // true면 내턴, false면 니턴 function 덱에서필드로(데이터, 내턴) {     var 객체 = 내턴 ? 나 : 상대; // 조건 ? 참 : 거짓;     var 현재코스트 = Number(객체.코스트.textContent);     if (현재코스트 < 데이터.cost) {         return 'end';     }     var idx = 객체.덱data.indexOf(데이터);     객체.덱data.splice(idx, 1);     객체.필드data.push(데이터);     객체.덱.innerHTML = '';     필드다시그리기(객체);     덱다시그리기(객체);     데이터.field = true;     객체.코스트.textContent = 현재코스트 - 데이터.cost; } function 필드다시그리기(객체) {     객체.필드.innerHTML = '';     객체.필드data.forEach(function(data) {         카드돔연결(data, 객체.필드);     }); } function 덱다시그리기(객체) {     객체.덱.innerHTML = '';     객체.덱data.forEach(function(data) {         카드돔연결(data, 객체.덱);     });     데이터.field = true;     객체.코스트.textContent = 현재코스트 - 데이터.cost; } function 영웅다시그리기(객체) {     객체.영웅.innerHTML = '';     카드돔연결(객체.영웅data, 객체.영웅, true); } function 화면다시그리기(내화면) {     var 객체 = 내화면 ? 나 : 상대; // 조건 ? 참 : 거짓;     필드다시그리기(객체);     덱다시그리기(객체);     영웅다시그리기(객체); } function 턴액션수행(카드, 데이터, 내턴) {     // 턴이 끝난 카드면 아무일도 일어나지 않음     var 아군 = 내턴 ? 나 : 상대;     var 적군 = 내턴 ? 상대 : 나;     if (카드.classList.contains('card-turnover')) {         return;     }     // 적군 카드면서 아군 카드가 선택되어 있고, 또 그게 턴이 끝난 카드가 아니면 공격     var 적군카드 = 내턴 ? !데이터.mine : 데이터.mine;     if (적군카드 && 아군.선택카드) {         데이터.hp = 데이터.hp - 아군.선택카드data.att;         if (데이터.hp <= 0) { // 카드가 죽었을 때             var 인덱스 = 적군.필드data.indexOf(데이터);             if (인덱스 > -1) { // 쫄병이 죽었을 때                 적군.필드data.splice(인덱스, 1);             } else { // 영웅이 죽었을 때                 alert('승리하셨습니다!');                 초기세팅();             }         }         화면다시그리기(!내턴);         아군.선택카드.classList.remove('card-selected');         아군.선택카드.classList.add('card-turnover');         아군.선택카드 = null;         아군.선택카드data = null;         return;     } else if (적군카드) { // 상대 카드면         return;     }     if (데이터.field) { // 카드가 필드에 있으면         카드.parentNode.querySelectorAll('.card').forEach(function(card) {             card.classList.remove('card-selected');         });         카드.classList.add('card-selected');         아군.선택카드 = 카드;         아군.선택카드data = 데이터;     } else { // 덱이 있으면         if (덱에서필드로(데이터, 내턴) !== 'end') {             내턴 ? 내덱생성(1) : 상대덱생성(1);         }     } } function 카드돔연결(데이터, 돔, 영웅) {     var 카드 = document.querySelector('.card-hidden .card').cloneNode(true);     카드.querySelector('.card-cost').textContent = 데이터.cost;     카드.querySelector('.card-att').textContent = 데이터.att;     카드.querySelector('.card-hp').textContent = 데이터.hp;     if (영웅) {         카드.querySelector('.card-cost').style.display = 'none';         var 이름 = document.createElement('div');         이름.textContent = '영웅';         카드.appendChild(이름)     }     카드.addEventListener('click', function() {         if (턴) { // 내 턴이면             if (!데이터.mine || 데이터.field) { // 상대 카드거나 카드가 필드에 있으면                 return;             }             if (덱에서필드로(데이터, true) !== 'end') {                 내덱생성(1);             }         } else { // 상대 턴인데             if (데이터.mine || 데이터.field) { // 내 카드거나 카드가 필드에 있으면                 return;             }             if (덱에서필드로(데이터, false) !== 'end') {                 상대덱생성(1);             }         }         턴액션수행(카드, 데이터, 턴);     });     돔.appendChild(카드); } function 상대덱생성(개수) {     for (var i = 0; i < 개수; i++) {         상대.덱data.push(카드공장());     }     상대.덱.innerHTML = '';     상대.덱data.forEach(function(data) {         카드돔연결(data, 상대.덱);     });     덱다시그리기(상대); } function 내덱생성(개수) {     for (var i = 0; i < 개수; i++) {         나.덱data.push(카드공장(false, true));     }     나.덱.innerText = '';     나.덱data.forEach(function(data) {         카드돔연결(data, 나.덱);     });     덱다시그리기(나); } function 내영웅생성() {     나.영웅data = 카드공장(true, true);     카드돔연결(나.영웅data, 나.영웅, true); } function 상대영웅생성() {     상대.영웅data = 카드공장(true);     카드돔연결(상대.영웅data, 상대.영웅, true); } function Card(영웅, 내카드) {     if (영웅) {         this.att = Math.ceil(Math.random()) + 4;         this.hp = Math.ceil(Math.random()) + 9999; //영웅영역 - 값 1개만 출력되야 함(실행시 10개 나옴)-공격력 5 체력 10000의 고정값         this.hero = true;         this.field = true;     } else {         this.att = Math.ceil(Math.random() * 5);         this.hp = Math.ceil(Math.random() * 5); //카드영역- 각 팀당 미리 셋팅 된 10개의 고유 카드 중 5개 랜덤으로 뽑히게 해야함         this.cost = Math.floor((this.att + this.hp) / 2);     }     if (내카드) {         this.mine = true;     } } function 카드공장(영웅, 내카드) {     return new Card(영웅, 내카드); } function 초기세팅() {     상대덱생성(5);     내덱생성(5);     내영웅생성();     상대영웅생성();     화면다시그리기(true); // 상대화면     화면다시그리기(false); // 내화면 } 턴버튼.addEventListener('click', function() {     턴 = !턴;     var 객체 = 턴 ? 나 : 상대;     document.getElementById('rival').classList.toggle('turn');     document.getElementById('my').classList.toggle('turn');     필드다시그리기(객체);     영웅다시그리기(객체);     턴 = !턴; // 턴을 넘기는 코드     if (턴) {         나.코스트.textContent = 10;     } else {         상대.코스트.textContent = 10;     }     document.getElementById('rival').classList.toggle('turn');     document.getElementById('my').classList.toggle('turn'); }); 초기세팅();

1
사랑수학 프로필

자스스톤 응용법 질문 사랑수학 1달 전
 math 객체를 사용하셔서 난수값 연산으로 랜덤 능력치를 가진 5장의 카드가 덱에 생성되게 되어있는 것 같습니다만  카드 var 상대 = {     영웅: document.getElementById('rival-hero'),     덱: document.getElementById('rival-deck'),     필드: document.getElementById('rival-cards'),     코스트: document.getElementById('rival-cost'),     덱data: [알파, 베타, 감마, 오메가, 제타, 델타, 빔펠],     영웅data: [],     필드data: [],     선택카드: null,     선택카드data: null,  이런 식으로 기존 코드에 덱 data 배열에 따로 미리 만들어둔 카드 이름을 넣고 이런 식으로 미리 카드에 따른 능력치 값을 입력시켜놓았는데 이걸 화면상에 구현하는 법을 모르겠습니다. function Card(name, att, hp, cost) {     this.name = name;     this.att = att;     this.hp = hp;     this.cost = cost; } var 알파 = new Card('알파', 8, 35, 1) var 베타 = new Card('베타', 900, 8570, 6) var 감마 = new Card('감마', 5, 30, 1) var 오메가 = new Card('오메가', 450, 7500, 5) var 제타 = new Card('제타', 15, 70, 2) var 델타 = new Card('델타', 740, 6850, 5)

3
사랑수학 프로필

자스스톤 사랑수학 1달 전
자스스톤 html파일과 js파일의 완성본 코드를 한번에 볼 수 있는 깃허브 주소가 있으시면 알려주세요

4
오쯔 프로필

제가 찾은 버그가 있는데요.! 오쯔 2달 전
깃허브 코드 돌려봤을 때 버그가 있어서 질문 올립니다. 겜이 끝나고 다시 초기세팅될 때 상대카드 누르면 NaN이라고 뜨는 버그가 있고요. (이건 해결했습니다) 덱에서 필드로 놓고 카드를 써서 턴오버상태가 됐을 때 만약 코스트가 남아 덱의 카드를 누르면 턴오버, selected 상태가 풀립니다. 필드의 상태를 고정시켜야 문제가 해결될 것 같은데.. 흠 화면다시그리기로 인해 버그를 해결 못하겠네요. 잠시 제가 생각해본 해결책은 현재 필드의 데이터상태를 다른 변수로 선언한 배열에다 저장하고 화면다시그릴때 저장된 배열의 상태를 적용해주는 형태로 하면 될 것 같은데.. 조금만 힌트를 주실 수 있나요.?

1
과연 프로필

join undefined..? 과연 2달 전
안녕하세요 선생님! 질문이 있습니다 console.log로 arr, arr.join(""), answer 다 찍어봤는데 잘나오는데 비교문에서부터 실행이 안됩니다. ㅠ__ㅠ 영어로만했지 강의랑 똑같이 썻습니다. 전체코드도 남겨봅니다... 왜안되는걸까요?... https://github.com/jellybrown/javaScript/blob/master/baseball.js

3
시원한라떼 프로필

[로또] 쌤 배열 랜덤 while 반복문 관련 질문 드려요 시원한라떼 2달 전
쌤 while 문을 while (후보군.length > 0) { } 이렇게 ↑후보군.length >  0 으로 안하고 while (후보군.length){ } 후보군.lenght 로만 해도, 랜덤 반복문이 돌아가요. > 0 이 없어도 조건문이 참이니 돌아가는거 같은데 이 경우,  > 0 빼도 될까요? 어차피 배열 후보군은 0 보다 계속 클테니 상관 없는게 아닐까요? p.s 쌤 2020 초보 자바스크립트 유튜브 라이브방송 잘보구 있어요 ㅠㅠ 아직 로또 수업밖에 진도 안나갔지만, 복습겸 따라하며 라방 볼께요ㅠ 

1
미니마우쯔 프로필

슨생님 지뢰찾기에서 질문있어요! 미니마우쯔 2달 전
슨생님 지뢰찾기에서  옆칸.click()으로 재귀함수가 되잖아요 값을 많이 입력하면 콜스택이 되버려서 setTimeout 으로 바꿧더니 너무 느리게 클릭이 되버리는데 이런경우에는 어떻게 해결해야 할까요? 밑에코드부분이요 ~~             if (dataset[옆칸줄][옆칸칸] !== 코드표.연칸) {                 옆칸.click();            }

2
don_sound 프로필

html로 테이블을 작성하게되면 각 칸들을 배열에 어떻게 넣을 수 있을까요? don_sound 2달 전
js로 반복문을 통해서 td태그를 생성함과 동시에 배열에 집어 넣는 방법 말고 html로 테이블의 틀을 작성했다면, 각 칸들의 값을 어떻게 '칸들'변수에 집어 넣을 수 있을까요?

0
시원한라떼 프로필

쌤 if~else 문 질문 드려요 시원한라떼 2달 전
쌤  숫자야구 틀렸을때, if 틀린횟수 > 3 문에  else 안넣으면  결과.textContent="3번 넘게 틀려서 실패. 답은" + 숫자배열.join('');  실행 안되는 이유가 뭔가요? else 안넣으면 해당 if 문 무시 되고 결과.textContent="스트라이크" +"볼입니다" 로 바로 뛰어넘어가는 이유가 있을까용...?

0
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스