[javascript] 양구하기 게임

 

https://amy4229.github.io/saveSheepGame/

 

# 양구하기 게임

### 양을 구하는 게임으로 늑대를 정해진 게임동안 조준해서 늑대를 모두 없애면 이기는 게임
### 시간을 초과하거나, 양을 쏘게되면, 지게된다.

### 제한 사항 : 10초, 늑대 5마리
 
## 개발환경
OS: windows11
Language: javascript
HTML5,CSS3

## 기타파일
### images
#### 자체제작 :
배경.jpg, sun.png
#### pixabay.com :
gun.png, lamb.png, sheep.png, sniper.gif, sun.png, wolf_bone.png, wolf.png

### Sounds
#### 배경음악
BGM팩토리 (https://bgmfactory.com)
사용음원 - 식물소개
#### 효과음 음원
freesound.org            
180961__kleeb__gunshots,253174__suntemple__r

etro-you-lose-sfx,425663__camo1018__clapping.mp3

https://github.com/amy4229/saveSheepGame

GitHub - amy4229/saveSheepGame: Game for saving sheep form wild wolves using pure javascript

양구하기 게임을 작성해보았다. 

저작권 관련해서 공유와 사용이 허용된 라이센스의 이미지와 사운드 파일의 출처표기를 하였고, 

pixabay는 픽사베이 라이센스로 별도 출처표기가 필요없는 이미지만 사용하였다. 

 

언어 : javascript / HTML5, CSS3

사운드:  Audio Web APIs

 

주요 코드 

태양의 움직임관련 :

• animate사용
• 전체 너비에서 태양의 너비를 뺀 길이를 transition을 지정해 제한시간 10초동안 지나가도록 설정하여
• 제한 시간동안 왼쪽 끝에서 오른쪽 끝으로 해가 이동하여 시간 흐름을 나타내었다.

function moveSun(){
    sunMove_ani = sun_comp.animate([
        {"transform" : "translateX("+(GAME_WIDTH-SUN_WIDTH)+"px)"}
    ],{
        duration: 10000,
        iterations: 1,
      });

}

 

좌표관련 : 

• 창 확대/ 축소에 따라 늑대의 위치가 바뀌면 안되기 때문에 반응형이 아닌 크기 고정으로 구현
• 배경화면이 있는 메인의 position을 relative, 양과 늑대의 위치를 position: absolute로 지정하여 배경의 메인부분을 기준으로 위치를 지정할 수 있도록 설정
• Math.random()기능을 이용해 시작시 전체 동물들의 위치를 임의의 값으로 설정
• 늑대와 양의 위치가 겹치는 경우를 대비해 늑대의 z-index를 더 높게 설정하고 
• 늑대와 늑대가 겹치는 경우 죽은 늑대의 z-index를 낮추어 모든 늑대를 다 공격할 수 있도록 설정

function printSheep(howMany){
    for(let i = 0; i < howMany; i++ ){
        const sheepKill =()=>lose(MSG_GAME_OVER_SHEEP_KILL);
        makeAnimal(CLASS_SHEEP,sheepKill);
    }
}

function printWolf(howMany){
    for(let i = 0; i < howMany; i++ ){
        makeAnimal(CLASS_WOLF, shotWolf)
    }
}

function makeAnimal (animalClass, callback) {
    const animal = document.createElement("div");
    animal.classList.add(animalClass);
    animal.style.left = getRandomX(); 
    animal.style.top = getRandomY();
    main_comp.appendChild(animal);
    animal.addEventListener("click", callback);
}

function getRandomX (){
    const max_x = main_comp.clientWidth-WIDTH_OF_ANIMAL;
    return Math.floor(Math.random()* max_x)+"px";
}

function getRandomY (){
    const max_y = main_comp.clientHeight-HEIGHT_OF_ANIMAL;
    return Math.floor(Math.random()* max_y)+"px";
}

function shotWolf(e){
    e.target.classList.add(CLASS_DIE);
    e.target.removeEventListener("click",shotWolf);
    killed_wolves++;
    wolfRemain_comp.textContent = `남은 늑대: ${NUMBER_OF_WOLVES - killed_wolves}마리`;
    if(killed_wolves == NUMBER_OF_WOLVES){
        win();
    }
}