frame은 "틀"이란 뜻이다. work은 "일하다"라는 뜻으로 이것을 합쳐보면 "틀을 가지고 일하다"가 된다. 즉 프레임워크는 일정한 틀과 뼈대를 가지고 일하다라는 뜻으로 제공받은 일정한 요소와 틀, 규약을 가지고 무언가를 만드는 일이다. It업계에서는 이것을 프레임워크라고 한다. 즉 소프트웨어에서의 프레임워크는 "프로그램을 개발하기 위해 사용되는 틀을 제공하는 프로그램" 이라고 본다.

프레임워크는 여러종류가 존재한다. 자바프레임워크에서는 Struts, Spring, 전자정부 프레임워크 등이 존재하고 QRM 프레임워크는 myBatis(iBatis), Hibernate 등이 있으며 자바스크립트 프레임워크는 AngularJS, React, Polymer, Ember 등, 프론트엔드 프레임워크는 Bootstrap, Foundation, MDL 등이 있다.

프레임워크의 장점

1. 효율적이다 기본적인 틀이 존재하기에 시간도 절약이 되며 훨씬 더 빨리 만들수있다.

2. 유지보수가 쉽다. 하나하나 개개인이 짜놓았던 코드라면 다른사람이 볼 경우 알기 어렵지만 프레임워크를 사용한 코드라면 체계적이기 때문에 다른사람이 만든것이라도 알아보기가 쉽기에 다른사람이 고칠수도있다.

프레임워크의 단점

1. 학습시간이 길다. 기본적인 틀과 사용법을 익혀야 하기 때문에 프레임워크에 있는 코드를 학습하는데 오랜 시간이 걸린다.

2. 자유도 프레임워크는 제작자가 만든 구조에서 크게 벗어날수가 없기에 개발자가 자유롭거나 유연하게 만들기가 힘들다.

프레임워크는 배우는 시간이 길지만 한번 배우면 유용하게 사용할수 있을것이다.

문제 설명

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ left ≤ right ≤ 1,000

입출력 예

left right result 13 17 43 24 27 52 입출력 예 설명 입출력 예 #1

다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.

수 약수 약수의 개수 13 1, 13 2 14 1, 2, 7, 14 4 15 1, 3, 5, 15 4 16 1, 2, 4, 8, 16 5 17 1, 17 2 따라서, 13 + 14 + 15 - 16 + 17 = 43을 return 해야 합니다.

입출력 예 #2

다음 표는 24부터 27까지의 수들의 약수를 모두 나타낸 것입니다. 수 약수 약수의 개수 24 1, 2, 3, 4, 6, 8, 12, 24 8 25 1, 5, 25 3 26 1, 2, 13, 26 4 27 1, 3, 9, 27 4 따라서, 24 - 25 + 26 + 27 = 52를 return 해야 합니다.

function solution(left, right) {
  var answer = 0;
      for(let i = left; i <= right; i++){

      let num = 1;
            for(j=2; j<=i; j++) { 
              if(i%j == 0) num++;
    }
            if(num%2 == 0 ){
        answer += i
      }else{
        answer -= i
      }

  }

      return answer;
}

맨 처음 생각한 방법은

1. 1부터 1000까지 숫자 대입 가능하게 if로 조건 걸기
2. 대입한 숫자와 사이의 수의 약수를 알기 위해 for 사용
3. 약수의 수가 짝수인지 홀수인지 판별
4. 짝수인 수와 홀수인 수를 각 각 더하고 뺌
5. 더하고 뺀값을 리턴값으로 출력 이거 였지만 이렇게 한다면 if안에 for, for안에 if 등 너무 복잡해서 다시 검색하고 생각하며 풀어본 결과

re 1. for을 이용하여 left부터 right 까지함 2. 하나의 함수를 만들고 for을 사용하여 숫자가 사라질때 까지 2로 나누고 3. 나누어지면 answer에 +, 안 나누어지면 answer에 - 로 하여 더하고 뺀다. 4. answer을 리턴값으로 출력 이렇게 새로 풀었다. 기말고사 후 바로 수술하고 거의 2달 만에 문제를 풀어서 가물가물하고 힘들었지만 천천히 떠올리면서 풀었더니 어느 정도 할 수 있었다.

문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

입출력 예

arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]]

def solution(arr1, arr2):
    answer = [[] for x in range(len(arr2))]
    for i in range(len(arr1)):           
        for j in range(len(arr1[i])):     
            answer[i].append(arr1[i][j] + arr2[i][j])


    return answer

파이썬을 공부하고 있었기에 이번에는 원래 풀었던 문제를 파이썬으로 풀었다.

문제 설명

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

제한사항

arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다.

입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1]

입출력 예 설명

입출력 예#1 arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 [5, 10]을 리턴합니다.

입출력 예#2 arr의 모든 원소는 1으로 나누어 떨어집니다. 원소를 오름차순으로 정렬해 [1, 2, 3, 36]을 리턴합니다.

입출력 예#3 3, 2, 6은 10으로 나누어 떨어지지 않습니다. 나누어 떨어지는 원소가 없으므로 [-1]을 리턴합니다.

function solution(arr, divisor) {
    let answer = [];
    for(let i = 0; i < arr.length; i++){
        if(arr[i] % divisor === 0){
         answer.push(arr[i]);  
        };
    };
    answer.sort(function(a, b){return a - b});
    if (answer.length === 0){
        answer.push(-1);
    };
    return answer;
};

이 문제는 여태까지 풀었던 문제들의 for, if를 반복적으로 쓰던걸 합친 문제인것 같아 반복느낌으로 풀었다.

문제 설명

String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

제한 사항

seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다.

입출력 예

seoul return ["Jane", "Kim"] "김서방은 1에 있다"

function solution(seoul) {
    for (let i = 0; i < seoul.length; i++) {
        if (seoul[i] === 'Kim') {
            return '김서방은 '+ i +'에 있다';
        }
    }
}

x에 서울을 넣어야하는 문제라고 생각하여 for을 사용하여 김의 위치를 찾고 찾으면 넣어 문제를 푸는것으로 생각하여 문제를 풀었다

문제 설명

정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요.

제한 사항

n은 0 이상 3000이하인 정수입니다.

입출력 예 n return 12 28 5 6

입출력 예 설명

입출력 예 #1

12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다.

입출력 예 #2

5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다.

function solution(n) {
    let answer = 0;
    for (let i = 0; i <= n; i++) {
        if( n % i === 0) { 
        answer += i}
    }
    return answer
}

전에 풀었던 문제와 비슷한 문제였길래 단순히 정수를 나누고 나눈값을 더하여 리턴하였다

문제 설명

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

제한 조건

n은 길이 10,000이하인 자연수입니다.

입출력 예 n return 3 "수박수" 4 "수박수박"

function solution(n) { 
    let answer = ""; 
    for(let i=0; i < n; i++){ 
        answer += i % 2 == 0 ? "수" : "박"; 
    } 
    return answer; 
}

가장 먼저 하나씩 늘어나게 반복문을 설정한후 그 늘어나는게 2로 나누어지면 박을 안 나누어지면 박을 넣게 만들었다.

문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]]

function solution(arr1, arr2) {
    let answer = [];

    for(let i=0; i<arr1.length; i++){ 
        let sum = [];
          for(let j=0; j<arr1[i].length; j++) { 
           sum.push(arr1[i][j] + arr2[i][j]) } 
            answer.push(sum)

}

    return answer
}

내가 이문제를 보고 먼저 생각한것은 1.arr1의 크기를 파악하고 2.arr2의 크기를 파학 3.그후 arr1과 arr2를 더하고 answer에 넣는것을 생각하였고 어떻게 크기를 한번에 파악할까 고민하면서 시간을 날리다가 생각해보니 한번에 할 필요가 없다고 느껴 이중for문을 사용하여 하였다. 마지막으로 answer에 push를 이용하여 더해진 값을 넣으면 된다.

리스트에서 a =[1,2,3] , a[0]를 치면 1이 나온다. 이렇듯 n[]에 자신이 구하고 싶은 요소값을 넣으면 그게 무슨 엘리먼트인지 나온다.

리스트의 슬라이싱이 있다 슬라이싱은 n[0:2] 이렇게 적게 되면 [1,2,3]이렇게 나온다 정확히는 0번째에서 2번째까지 출력한다라고 생각하면 된다. [:2]이렇게 적으면 처음부터 2까지이고 [0:]이면 0번째부터 끝까지 이다.

리스트의 길이를 구하는 법은 length인데 이걸 줄여서 len이라고 쓴다.

리스트에서 특정 부분의 엘리먼트를 지우고 싶을때 del 객체를 넣으면 되고 다른 방법으로는 remove,pop이 있다. remove는 리스트에서 지정한 엘리먼트의 첫번째를 지우는 함수이다. pop은 리스트의 맨 마지막을 요소를 돌려주고 삭제하는 함수이다.

append = 리스트의 맨뒤에 요소를 추가해준다.

sort = 리스트의 요소를 정렬해주는 함수이다.

reverse = 리스트의 요소를 그대로 역순으로 뒤집어준다.

index = 리스트의 요소값이 입력한값이 있으면 그 값의 위치를 돌려준다.

count = 리스트의 x값이 몇개가 있는지 세준다.

if,else는 다른것과 같이 사용이 가능하고 여기서는 elif가 있으며 elif는 else if와 같다. elif는 이전 조건문이 거짓일때 출력이 되는 조건문이다.

에라토스네테서의 체는 먼저 1을 지우고 그후 2는 두고 2의 배수를 지운다 3도 마찬가지로 3을 두고 3의 배수는 지운다. 이걸 7까지 하면 돤다.

n까지의 소수를 구할때 루트n이하의 수의 배수를 지우면 된다.

사진출처:https://new.somai.co.kr/%EC%97%90%EB%9D%BC%ED%86%A0%EC%8A%A4%ED%85%8C%EB%84%A4%EC%8A%A4%EC%9D%98-%EC%B2%B4/

문제 설명

1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요.

소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.)

제한 조건

n은 2이상 1000000이하의 자연수입니다.

입출력 예 n result 10 4 5 3

입출력 예 설명

입출력 예 #1 1부터 10 사이의 소수는 [2,3,5,7] 4개가 존재하므로 4를 반환

입출력 예 #2 1부터 5 사이의 소수는 [2,3,5] 3개가 존재하므로 3를 반환

function solution(n){
    const Arr = new Array(n).fill(1)
    Arr[0] = 0;
    for(let i = 2; i*i <= n; i++){ 

        for(let j = i*i; j <= n; j+=i){
            Arr[j-1]=0;
        }
    }

    return Arr.filter((el)=>el==1).length

맨 처음에 생각하였을때는 입력 받는 숫자를 2까지 각 각 나누고 그걸 1과 자신만으로 나누어 지는지 알아볼려고했지만 할수록 막혔다 그래서 어쩔 수 없이 다른 사람이 만든것을 보고 생각하여 만들었다

코딩 출처: https://chaeyoung2.tistory.com/41

그리고 계속 알아본 결과 에라토스테네스의 체를 사용하면 쉽게 알 수 있다고 하여 그걸 공부하기로 했다.

문제 설명

두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

제한 조건

a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다.

입출력 예 a b return 3 5 12 3 3 3 5 3 12

function solution(a, b) {
  let answer = 0;
  let min = 0;
  let max = 0;
  if(a > b){
    max = a; min = b
  }else if(b > a){
    max = b; min = a
  }else if(a == b){
    max = a; min = b
  }
    for(let i = min; i <= max; i++){
      answer = answer + i
    }
    return answer;
}

이걸 풀때는 간다낳게 생각해보았다. 일단 가장 큰값과 가장 작은 값을 알아내고 그 수들의 사이에 들어가는 수들을 알아내어 더한다는 생각을 하였고 가장 큰값과 가장 작은 값을 알기 위해 if문을 사용하여 구하였고 사이의 값을 더하는것은 for문을 사용하여 더하였다.

문제 설명

임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요.

제한 사항

n은 1이상, 50000000000000 이하인 양의 정수입니다.

입출력 예 n return 121 144 3 -1

입출력 예 설명

입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다.

입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다.

function solution(n) {
    let answer = 0;
    let number = Math.sqrt(n)
    let nu = Number.isInteger(number);
    if(nu == true){
      answer = Math.pow(number + 1, 2)
    }else if (nu == false){
      answer = -1
    }



    return answer;
}

맨 처음 이걸 받고 나는 가장 먼저 생각 나는것이 1.숫자를 제곱인지 판별하고 2.제곱이면 그거에 1을 더하고 제곱한다 이렇게 간단하게 생각하였으며 간단하게 풀었다

게임코딩을 시작하면서 내가 좋아하는게임을 내손으로 만든다는 생각에 좀 신이 났지만 어렵겠다는 생각이 먼저 들고 막막하였다. 그렇게 막상 시작하니 초반의 한 것을 그대로 모든것에 반복하는 것에 불과하다는 생각이 들었다. 계속하여 만들고 있다 보니 새로보는 코드나 많이 봤던 코드가 쓰였다. 하지만 반복만 한다고 그렇게 쉽지는 않았다. 왜냐하면 코딩을 할 때 가장 큰 문제는 역시 오류 였기 때문에 반복이라고 마냥 좋아 할수는 없는 문제였다. 아까와 똑같이 하여 만들었다고 생각하였지만 오류가 떠 알아보니 오타가 난것,하지만 그 오타를 알아채지 못해 다른게 문제 일까 건들다가 더 큰 문제가 생기고 그냥 차라리 새로 만들자라는 생각이 들어 아예 새로 만들고 또 잘 되면 마냥 좋아하면서 만들었다. 내가 게임을 좋아하고 자주 하면서 지내는것이 맞지만 막상 만들고 보니 지치고 힘든 것은 그대로 였다. 이것들을 1주일 동안 만들어 보면서 여태까지 게임에서 오류가 뜨면 ㅈ망겜 등 욕을 해왔지만 이것을 하여보니 게임에서 오류가 뜨는것이 이해가 되었다. 그래도 내가 게임하다 오류가 뜨면 욕은 할거다.(할거는 해야지) 지치고 힘들고 기초적이지만 내가 만든게임이 움직이고 몬스터를 잡고 레벨업을 한다는것이 대단하고 뿌듯하게 느껴졌다.

문제 설명

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

제한 조건

x는 1 이상, 10000 이하인 정수입니다. 입출력 예 arr return 10 true 12 true 11 false 13 false

입출력 예 설명

입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.

입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.

입출력 예 #3 11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.

입출력 예 #4 13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.

function solution(x) {
    let answer = true;
    const str = String(x).split("");
    const result = str.reduce((acc, cur, idx) => { return acc += parseInt(cur); }, 0);
    if( x%result == 0){
      return answer = true
    } else {
      return answer = false
    }



    return answer;
}

맨 처음 내가 생각한 방법은 1.숫자를 문자로 바꾸고 2.문자를 나누고 3.반복문으로 답을 구하는 방법이었지만 더 간결하게 할 수 있는 다른 방법을 찾아서 위와 같은 방법을 알아냈다.

문제 설명

정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.

제한사항

arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다.

입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5

function solution(arr) {

    const average = arr.reduce((a, b) => a + b, 0) / arr.length;
    return average;


}

맨 처음 이 문제를 보았을때 어떻게 해야되지? 라는 생각이 가장 먼저 머리에서 떠올랐다. 평균을 구할려면 for문을 이용해서 구해야 되나? 아니면 더 쉬운 방법이 있나? 라는 생각이 들어 검색을 해보니 바로 보이는 것이 reduce를 사용하는 것이었다. 하지만 reduce사용이 쉬운 것도 아니었다. 처음 보는 단어 처음보는 설명이라 고민할때 그냥 간단히 있는 형태를 가져다가 사용을 하였다. 좀 더 공부해서 알아 봐야겠다.

stageInfo를 생성하고 if문을 사용하여 현재 스테이지의 레벨에 맞게 몬스터를 넣어 준다.

if(i === 10){
                allMonsterComProp.arr[i] = new Monster(stageInfo.monster[this.level].bossMon, hero.movex + gameProp.screenWidth + 600 * i);
            }else{
                allMonsterComProp.arr[i] = new Monster(stageInfo.monster[this.level].defaultMon, hero.movex + gameProp.screenWidth + 700 * i);
            }

이렇게 만든다.

그리고 히어로도 이것과 같게 if문을 사용하여 현재 레벨에 따라 각 각의 스텟으로 바꾼다.

이번에는 점수 추가로 만든다.

html에서 game_info에서 score_box 엘리먼트를 추가한다.

그 후 css에서 꾸미고 js에서 스코어 변수를 추가해 준다.

초기 score은 0으로 하고 몬스터를 잡을수록 점수가 추가되게 만들기 위해 몬스터들의 js에서 점수를 추가해주고 몬스터가 죽었을때 점수를 반영해줄 메소드인 setScore를 만든다.

setScore에는 기초 score에 몬스터들의 값을 더한다.

그 후 score_box에 넣어 반영해준다.

그리고 점수는 dead메소드에서 호출하여 화면 맨 위에서 보이게 만들어 준다.

이번에는 게임에 넣을 추가 기능인 슬라이드 등을 만든다.

여기서도 충돌과 죽었을때 모션을 넣었던것과 같이하여 모션을 새로 만들고 히어로모션때 키를 누르면 움직였던것과 같이 if문을 이용하여 c키가 눌리면 슬라이드가 되게 만든다.

여기서는 히어로의 레벨업을 만들어 준다.

하지만 다른것과 같이 hp를 만들때와 똑같기에 hp를 그대로 복붙하여 붙이고 구분을 하기 위해 css에서 색상과 간격을 바꿔둔다.

마지막으로 npc를 만드는데 여기서도 다른 수리검,히어로,몬스터 등 과 같이 여태까지 하였던 것을 그대로 하면 완성이 된다.

여태까지 했던 것과 똑같이 사진을 keyframe모션으로 이미지를 크기 지정 해서 넣고 나오는 것은 if문을 사용하여 hp가0이 되었을때 캐릭터가 죽는 모션을 넣고 충돌하였을때 모션은 히어로hp가 깎일때 충돌 모션이 나오게 만든다.

이때 충돌 후 원래 모션으로 돌아가지 않는 문제가 존재하는데 이때는 setTimeout을 이용하여 crash 클래스를 삭제한다.

0.4초 후에 충돌 모션이 사라지게 만들면 충돌 후 충돌 애니메이션이 나오고 그 후 원래 일반 애니메이션으로 돌아온다.

죽었을때는 저번에 사용하였던 dead를 가져와 dead가 출력되면 죽은 모션이 나오게 만든다.

이번에는 게임이 끝날때 game over로 게임 종료 처리를 한다.

html 파일에 game over class를 새로 만들고 css에서 game over일 때 화면을 살짝 검게 그리고 game over글자를 나타나게 만든다.

이번에는 데미지 엘리먼트를 만들어 데미지를 나오게 만든다.

여태까지 해왔던 것과 같이 수리검이 충돌하였을때 damageView 메소드를 만들고 damageView를 css에서 꾸민다.

데미지를 꾸민 후 랜덤으로 위치를 나타내기 위해 keyframe을 사용하여

@keyframes textDamage {
    0% {opacity: 0; bottom:0;}
    70% {opacity: 1; bottom:50px;}
    100% {opacity: 0; bottom:90px;}
}

이렇게 하여 데미지가 위로 올라가면서 점점 연해 지도록 만들었다.

그리고 여기damageView에서 let textPosition = Math.random() * -100; 를 사용하여 0부터 100까지 랜덤으로 생성되게 만들었다.

이번에는 몬스터들을 만들고 보스몬스터와 몬스터 러쉬를 한다.

몬스터를 만드는것은 여태까지 해왔던 수리검,히어로와 같이 만들어 주면 된다. 보스몬스터도 똑같이 만들어 주면 된다.

하지만 여기서 보스 몬스터는 몬스터 러쉬가 끝난후 맨 마지막에 나와야 하기에 우선 for문으로 인스턴스를 생성하고 몬스터 배여렝 담아 준다.

그리고 몬스터의 소환 위치의 i를 곱해서 몬스터의 소환 위치의 간격을 정해준다.

몬스터를 만드는것은 히어로를 만들거나 수리검을 만든것과 똑같이 만들어 주면 된다.

몬스터를 만들었다면 가장 중요한 수리검이 몬스터에 충돌될수있게 만들기위해 수리검배열에서 새로 엘리먼트를 만들고 거시서 if문과 position을 사용하여 수리검의 왼쪽값이나 오른쪽값이 몬스터의 왼쪽값이나 오른쪽값보다 크다면 수리검을 삭제하게 만들어 준다.

하지만 이러면 히어로가 몬스터 너머에서 때리면 수리검은 몬스터보다 왼쪽이나 오른쪽에 있다고 판단하여 수리검이 나가자마자 삭제된다.

이 문제를 해결해주기 위해서 수리검의 다른값이 몬스터의 몸안에 즉 왼쪽에서 날린다면 몬스터의 오른쪽값보다 작다면을 추가로 넣어주면 해결된다.

이때쯤 하나의 문제가 생기는데 수리검을 만드는것은 무한히 만들게 하였기에 메모리에 과부하가 걸리게 된다.

이 문제는 반복문으로 추돌한 수리검과 화면 밖에 나간 수리검 인스턴스를 배열에서 삭제하면 된다.

그 후 몬스터의 체력과 위치조정 등 을 해주기 위해 몬스터 클래스를 만들어주고 거기에서 document등을 이용하여 클래스의 체력 등을 만들어준다.

그리고 체력을 만들었다면 그 체력과 히어로가 공격을 한다면 체력을 달게 만들어야하기에 updatehp를 만들고 히어로class에서도 공격력을 만들어 수리검이 몬스터가 충돌하면 updatehp를 호출하게 만든다.

updatehp에서는 hpvalue - hero.attackDamage를 넣고 몬스터의 hp가 마이너스로 가지 않겠끔 제일 낮은 값을 0으로 설정한다.

그리고 여기서 몬스터의 hp가 0이 되면 몬스터가 사라지게끔 만들어 주는데 updatehp에서 if문을 사용하여 몬스터의 피가 0이되면 dead메소드를 호출하게 만들고 dead메소드는 this.el.classList.add("remove")를 넣어 만든다.

사라지는 시간은 0.2초로 만든다.

그 후 몬스터가 대량생성되어도 괜찮게 하기 위해 간격을 만들어 넣어 준다.

이제 몬스터가 이동할 수 있게 만들기 위해 수리검을 이동시켰을때와 같이 움직이게 한다.

그리고 히어로와 충돌했을때 피가 사라지게 하기 위해 히어로의 피를 만들어주고 몬스터에게 각 각의 데미지를 주고 수리검이 몬스터와 충돌하면 몬스터의 피가 다는 것을 그대로 가져다가 쓰면 된다.