안녕하세요 느종입니다.
오늘도 횡스크롤 게임 자바스크립트 코드를 작성해 보겠습니다. 벌써 5번째 시간이네요. 함께 공부해요!
1. 자바스크립트 코드
1. main() : 플레이어, 장애물, 배경 화면의 객체를 생성하고 그리는 메인 함수입니다.
2. ctx.clearRect(0, 0, canvas.width, canvas.height) : 캔버스에 그림을 그리기 전에 캔버스를 초기화해 줍니다.
3. background = new Background(assets.background, 0, 0, 800, 300, BACKGROUND_SPEED) : 배경 화면의 객체를 생성합니다. 기존에 만들어 두었던 배경 화면 이미지를 가져오고, x좌표는 0, y좌표는 0, 가로 크기는 800, 세로 크기는 300, 그리고 배경 화면이 지나가는 속도를 입력해 줍니다.
4. background.draw() : 배경 화면 객체 안의 그리기 함수 draw()를 이용하여 배경 화면을 캔버스에 그려줍니다.
5. player = new Player(assets.player, PLAYER_X_COORDINATE, PLAYER_Y_COORDINATE, PLAYER_WIDTH, PLAYER_HEIGHT) : 플레이어의 객체를 생성합니다. 플레이어의 이미지를 가져오고, 플레이어의 고정 x좌표, 고정 y좌표, 플레이어의 크기, 플레이어의 높이 값을 입력해 줍니다.
6. player.draw() : 플레이어도 배경 화면 같이 객체 안의 함수를 이용하여 그려줍니다.
7. randomObstacleHeight = randomFunc(MAX_OBSTACLE_HEIGHT, MIN_OBSTACLE_HEIGHT) : 추후에 설명할 함수이지만, 장애물의 최대 높이 값과, 최소 높이 값 사이에서 임의적인 높이 값을 계산하는 함수입니다.
8. obstacle = new Obstacle(assets.obstacle, canvas.width + 10, GROUND_Y_COORDINATE - randomObstacleHeight, OBSTACLE_WIDTH, randomObstacleHeight) : 장애물의 객체를 생성합니다. 장애물 이미지를 가져오고, x좌표, y좌표, 크기, 높이를 입력합니다. x좌표의 경우에는 캔버스 밖에서 생성되어 나오도록 하기 위해 캔버스의 크기보다 10을 더해주었습니다. y좌표는 지표(땅) 높이에서 임의적으로 계산된 높이를 빼줌으로써 나타내었습니다. 높이는 위에서 계산한 임의적인 높이 값을 입력해 주었습니다.
9. obstacle.draw() : 장애물 객체 내 그리기 함수를 통해 캔버스에 그려줍니다.
10. loop() : requestAnimationFrame을 사용하여 실행시킬 함수입니다.
11. if(state !== GAME_STATE.PLAY) return : 게임 상태가 play가 아니라면 함수를 나갑니다.
12. ctx.clearRect(0, 0, canvas.width, canvas.height) : 배경 화면, 플레이어, 장애물이 움직이는 모습처럼 보이기 위해서는 프레임마다 캔버스를 초기화해주어야 합니다. 이 부분을 생략하실 경우 계속 이어져서 그려집니다.
13. background.update() : 배경 화면 객체 안의 업데이트 함수를 실행합니다. 업데이트 함수에 대해서는 저번 시간에 설명을 첨부하였습니다.
14. playerVY += GRAVITY * duration : 플레이어가 점프를 했을 때 Y축으로의 속도를 나타내는 값입니다.
15. player.y += playerVY * duration : 플레이어가 점프를 했을 경우 Y축의 좌표를 계산하는 값입니다.
16. let floorY = GROUND_Y_COORDINATE - player.h : 플레이어가 점프 후에 지표면에 도달했을 때 지표면 밑으로 떨어지는 것을 방지하기 위한 y좌표 값입니다.
17. if(player.y > floorY) { : 플레이어의 y좌표가 위에서 계산한 Y값보다 클 경우에는 지표면에 플레이어가 도달했을 때입니다.
18. player.y = floorY : 그때 플레이어의 y좌표는 위에서 계산한 Y값을 넣어줍니다.
19. playerVY = 0 : 지표면에 도달했을 경우에는 Y축으로의 속도가 0이 됩니다.
20. isJumping = false : 지표면에 있을 때는 점프 중이 아니므로 false 값을 넣어줍니다.
21. player.update() : 플레이어 객체 안의 업데이트 함수를 통해 플레이어를 그려줍니다.
22. for(let i=0; i<obstacles.length; i++) { : 모든 장애물이 포함된 배열을 for문을 통해 돌면서 그려줍니다.
23. obstacles[i].update() : 각각의 장애물 객체 안의 업데이트 함수를 통해 장애물을 그려줍니다.
24. if(!obstacles[i].passedChk) { : 플레이어가 장애물을 피해서 점프를 완벽히 했을 경우 득점을 계산하기 위한 if문입니다.
25. if(obstacles[i].x + obstacles[i].w < player.x) { : 플레이어의 x좌표보다 장애물 x좌표에 장애물 크기를 더한 값이 작으면 완전히 지나간 것입니다.
26. obstacles[i].passedChk = true : 장애물이 지나갔으므로 passedChk 변수를 true로 입력해 줍니다.
27. score++ : 점수를 +1 점 해줍니다.
28. hud.textContent = "점수 : " + score : 점수 화면에 현재 점수를 갱신해 줍니다.
29. if(obstacles[i].x + obstacles[i].w < -50) { : 장애물의 x좌표에 장애물의 크기를 더한 값이 -50보다 작다면 화면 밖으로 장애물이 지나간 것입니다.
30. obstacles.splice(i, 1) : 그 때 splice 메서드를 이용해서 배열에서 현재 장애물을 삭제해 줍니다.
31. if(intervalSpawn > 100 && firstOb === "first") { : 장애물을 생성하는 if문입니다. 처음 게임이 시작되고 loop문이 실행이 되면 intervalSpawn은 1씩 증가를 하게 됩니다. intervalSpawn값이 100을 넘어가고, firstOb(첫 번째 장애물인지 나타내는 변수)가 first일 때 첫 번째 장애물이 생성됩니다.
32. firstOb = "not_first" : 첫 번째 장애물이 생성되었으므로, 첫 번째가 아니라는 값을 넣어줍니다.
33. randomObstacleHeight = randomFunc(MAX_OBSTACLE_HEIGHT, MIN_OBSTACLE_HEIGHT) : 장애물의 높이를 계산합니다.
34. obstacle = new Obstacle(assets.obstacle, canvas.width + 10, GROUND_Y_COORDINATE - randomObstacleHeight, OBSTACLE_WIDTH, randomObstacleHeight, OBSTACLE_SPEED, false) : 메인 함수에서와 같이 장애물을 생성합니다.
35. obstacles.push(obstacle) : 장애물이 생성되었으므로, 장애물 배열에 추가해 줍니다.
36. spwanTime = randomFunc(MIN_OBSTACLE_SPAWN, MAX_OBSTACLE_SPAWN) : 다음 장애물 생성될 때까지 시간을 임의적으로 계산합니다.
37. } else if(intervalSpawn > spwanTime && firstOb === "not_first"){ : intervalSpawn이 임의적으로 계산한 spwanTime 값보다 크고, 첫 번째 장애물이 아닐 경우에 임의적이 높이를 계산하고, 장애물을 생성하고, 장애물 배열에 추가하는 것은 같습니다.
38. intervalSpawn = 0 : 그 후로도 임의적인 시간 간격을 두고 장애물이 생성되어야 하므로 intervalSpawn값을 초기화해 줍니다. 그 후에 다음 장애물 생성될 때까지의 시간을 계산합니다.
39. for(let i=0; i<obstacles.length; i++) { : 플레이어가 장애물과 충돌을 하였을 경우를 체크하기 위한 반복문입니다.
40. if(collisionFunc(player.x, player.y, player.w, player.h, obstacles[i].x, obstacles[i].y, obstacles[i].w, obstacles[i].h)) { : 충돌 함수인 collisionFunc을 통해서 충돌했는지를 검사합니다. 이 함수는 추후에 추가하도록 하겠습니다. 이때 필요한 변수는 플레이어의 x좌표, y좌표, 가로 크기, 세로 크기, 현재 장애물의 x좌표, y좌표, 가로 크기, 세로 크기입니다.
41. endFunc() : 이 것도 추후에 추가할 함수인데, 충돌했을 경우에 게임이 끝나고, 게임 종료 모달(팝업)창이 나타나도록 하는 함수입니다.
42. return : 게임이 끝났으므로 loop가 종료되어야 하므로 return을 입력해 줍니다.
43. intervalSpawn++ : 앞서 얘기했듯이 intervalSpawn은 1씩 증가합니다.
44. gameLoop = requestAnimationFrame(loop) : 프레임마다 loop함수가 반복하게 하기 위해 requestAnimationFrame를 입력해 줍니다. gameLoop 변수에 넣어주는 이유는 모든 게임이 종료되었을 때 cancelAnimationFrame(gameLoop) 메서드를 사용하기 위함입니다.