나 개발자 진짜 되냐?

갑자기 만들어보게 된 웹게임 _ 장애물 피하면서 달리기 [ 1편 ] 본문

기타라고 해요!

갑자기 만들어보게 된 웹게임 _ 장애물 피하면서 달리기 [ 1편 ]

Snow Rabbit 2024. 9. 10. 12:34
반응형

 

# 게임의 기능 #

 

- 장애물이 가로방향에서 랜덤으로 나온다.

- 스페이스바를 누르면 점프한다.

- 장애물이 왼쪽으로 가게 되면 점수가 10점씩 올라간다.

- 장애물을 맞으면 게임이 종료된다.

 

 

< 준비물 >

 

 

VS cord

비쥬얼스튜디오 코드라고 부르더라..

왕신기

 

다운로드 후

 

테마 설정하고

왼쪽에 블럭모양 클릭

 

Live Server 

Indent rainbow

Bracket

 

다운로드

 

한국어버전으로 보고 싶으면 korean 치면 나온다..!!

 

제일 중요한것!

위에 석 삼자에서

자동저장을 눌러줘야 한다!!

 

다음 바탕화면에 파일 하나 만들어 준다!

 

왼쪽에 종이 두장을 눌러서 바탕화면에

파일을 하나 만들어 준다.

 

그다음 VS cord로 와서

만든 파일 안에서 또 파일 생성

 

 

index.html

 

main.js

 

style.css

 

이렇게 세 종류를 만든다!!

사진처럼 따라오면 성공!

 

 

다음에 이미지와 사운드 파일을

방금 만든 

파일에 같이 넣어준다!

 

 

요렇게!

 

 

< 여기서 용어정리 >

 

html : 웹페이지 구조

 

head와 body로 구성

head는 뭐 창크기, 검색 엔진, 타이틀 

body를 꾸며줄 친구들이 들어간다.

 

body는 html 안에 들어가는 모든 것!이라고 생각해 주면 좋다.

 

 

css : html을 꾸며주는 것

html랑 연결할 땐

link href ="style.css"을 해주어야 한다. 

 

js : 자바스크립트

html안에서 상호작용하는 것들 움직이는 것 들을 담아두는 곳

 

html이랑 연결할 땐

script src = "main.js"를 해주어야 한다.

 

즉, 우리는

html과 css로 틀을 만들고

안에서 동작하는 것들은

js안에서 만들어줘야 한다는 것이다..!!

 

 

 

자 먼저 html을 만들어보자!

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" />
    <title> 달리기 게임</title>
  </head>
  <body>
      <p id="subtitle"> 최고점을 향하여!! 😀</p>
      <p id="score">현재점수: 0</p>
    <main>
      <canvas id="canvas"></canvas>
    </main>
    <script src="main.js"></script>
  </body>
</html>

title는 왼쪽 위에 새창을 열게 되면 뜨는 글씨이다.

 

 

body안에 글자를 넣어준다

id = "" 는 이름지정이다.

subtitle라는 이름을 짓고 거기에 최고점을 향하여! 를 넣는 것이다.

 

위에 link를 통해 css를 불러오고,

밑에 script를 통해  js를 불러올 것이다.

 

저 main 안에 있는 canvas가

우리가 이제 만들어야 할 게임이다.!!

 

js보기 전에!

css를 잠시 살펴보고 가자

/* body styling */
body {
  background-color: #f0f0f0;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  padding: 20px;
}

/* canvas styling */
canvas {
  display: block;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
}

#subtitle {
  font-size: 20px;
  text-align: center;
}

/* 현재점수 */
#score {
  font-size: 40px;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}

 

 

body의 색상, 폰트

canvas의 색상 폰트

그 이외의 폰트와 색상을 바꿔주는 역할을 해준다.

 

 

 

main.js를 써보자!

/** 캔버스 설정 */
const canvas = document.getElementById("canvas"); // 캔버스 요소 가져오기
canvas.width = 800; // 캔버스 너비 설정
canvas.height = 500; // 캔버스 높이 설정
const ctx = canvas.getContext("2d"); // 2D 렌더링

/* 박스를 그립니다. */
ctx.fillStyle = 'green';
ctx.fillRect(10,400, 100,100);

 

먼저!

html에 있는 캔버스를 가져와야 한다.

 

 

const canvas = document.getElementById("canvas");

 

"canvas"라는 이름을 가진 Element를 get 해온다!

 

canvas.width = 800; // 캔버스 너비 설정
canvas.height = 500; // 캔버스 높이 설정

 


const ctx = canvas.getContext("2d"); // 2D 렌더링

ctx는 여기서 변수!

 

canvas.getContext("2d");이것을 매번 치기 번거롭고 복잡하기 때문에

이 긴걸 우리는 ctx라고 부를 거야!라는 뜻을 가지고 있다.

 

 

 

ctx.fillStyle = 'green';
ctx.fillRect(10,400, 100,100);

 

이제 그 밑에 상자를 하나 그리려고 하면

 

아까 그 긴걸 또 쓸 수 없어 만든 변수를 써주면 된다.

ctx!!

 

 

* const란 변수선언 할 때 쓰는 것

var, let, const 세 종류가 있는데

 const가 가장 엄격해서 자주 쓰인다.

 

 

ctx.fillRect(10,400, 100,100);

 

 

여기서 10, 400은

x 축 y 축으로

위치를 나타낸다

10, 400의 위치에다가 그림을 그릴 것이다!

 

사이즈는? 100, 100 px라고 생각해 주면 된다!

 

그러면!

이렇게 

초록색 상자가 나오게 된다!

 

 

앞으로 우리가 할 것

 

- 초록상자를 움직이게 하기

- 초록상자에 사람 넣어주기

 

이 전에!

우리는 변수를 설정해줘야 한다.!!

/** 게임 상태 변수 */
let gameStarted = false; // 게임 시작 여부
const BG_MOVING_SPEED = 3; // 배경 이동 속도
let bgX = 0; // 배경 X 좌표
let scoreText = document.getElementById("score"); // 점수 표시 요소
let score = 0; // 현재 점수

/** 게임 변수 */
let timer = 0; // 장애물 생성 시간
let obstacleArray = []; // 장애물 배열
let gameOver = false; // 게임 종료 여부
let jump = false; // 점프 여부
let jumpSpeed = 3; // 점프 속도

/** 오디오 객체 생성 및 설정 */
const jumpSound = new Audio(); // 점프 소리
jumpSound.src = "./sounds/jump.mp3";
const bgmSound = new Audio(); // 배경 음악
bgmSound.src = "./sounds/bgm.mp3";
const scoreSound = new Audio(); // 점수 획득 소리
scoreSound.src = "./sounds/score.mp3";
const defeatSound = new Audio(); // 게임 오버 소리
defeatSound.src = "./sounds/defeat1.mp3";

/** 이미지 객체 생성 및 설정 */
// (1) 배경
const bgImage = new Image();
bgImage.src = "./images/background.png";
// (2) 게임 시작
const startImage = new Image();
startImage.src = "./images/gamestart.png";
// (3) 게임 오버
const gameoverImage = new Image();
gameoverImage.src = "./images/gameover.png";
// (4) 게임 재시작
const restartImage = new Image();
restartImage.src = "./images/restart.png";
// (5) 달리는 르탄이 A
const rtanAImage = new Image();
rtanAImage.src = "./images/rtan_running_a.png";
// (6) 달리는 르탄이 B
const rtanBImage = new Image();
rtanBImage.src = "./images/rtan_running_b.png";
// (7) 게임 오버 르탄이
const rtanCrashImage = new Image();
rtanCrashImage.src = "./images/rtan_crash.png";
// (8) 장애물
const obstacleImage = new Image();
obstacleImage.src = "./images/obstacle1.png";

 

변수들이다. 다 const를 사용한 것을 볼 수 있다.

워낙 많기 때문에

복사해서 main.js 에 넣어주면 된다!

 

자! 우리는 이제

이 초록상자를 사람으로 구현해야 하니까!

 

const runman = {
    draw() {
        ctx.fillStyle = 'green';
        ctx.fillRect(10,400, 100,100);
    }
}

runman.draw()

요렇게!

runman을 만들어서

여기 안에!

ctx 파일을 넣어주면 된다!

 

그렇게 하고 맨 마지막줄처럼

runman.draw() 해주면

runman이 가지고 있는 이것들을 draw 해줘!

라는 뜻으로 표현이 되는 것이다!

 

 

아!

alt shift f를 누르면

정렬이 된다.

 

 draw라는 것을 만들어주고,

draw 안에 이런저런 것들을 넣어주면

draw는 약간 함수 같은 역할을 하게 된다.

그래서 밖에 나와서 써주면

draw라는 함수가 실행되는 것이다. 

 

 

fillRect 보면 뭐 따옴표 엄청 많고.. 조금.. 복잡 복잡하다.

개발자식으로 바꾸게 되면

 

....

const RUNMAN_WIDTH = 100; // 르탄이 가로 너비
const RUNMAN_HEIGHT = 100; // 르탄이 세로 높이
const RUNMAN_X = 10; // 르탄이의 초기 X 좌표
const RUNMAN_Y = 400; // 르탄이의 초기 Y 좌표


const runman = {
  x: RUNMAN_X,
  y: RUNMAN_Y,
  width: RUNMAN_WIDTH,
  height: RUNMAN_HEIGHT,
  draw() {
    if (gameOver) {
      // 게임 오버 시 충돌 이미지 그리기
      ctx.drawImage(rtanCrashImage, this.x, this.y, this.width, this.height);
    } else {
      // 달리는 애니메이션 구현
      if (timer % 60 > 30) {
        ctx.drawImage(rtanAImage, this.x, this.y, this.width, this.height);
      } else {
        ctx.drawImage(rtanBImage, this.x, this.y, this.width, this.height);
      }
    }
  },
};
rtanAImage.onload=()=> runman.draw();

 

 

이렇게 된다.

 

여기서 주의 깊게 봐야 할 부분은 

 

달리는 애니메이션 구현,

즉 뛰는 모션이다.

 

if문을 사용해 우리는 

뛰는 것처럼 보이게 할 것이다.

 

timer를 60으로 나눴을 때 나머지가!!

30보다 크다! 면 A 이미지

30보다 작거나 같다! 면 B 이미지

 

즉 뭐 반은 A고 반은 B다라는 의미를 가진다.

 

 

 

뛰는 것처럼 보이게 하려면

뛰는 모션 함수가 있어야 보일 것 아닌가!!

 

뛰는 모션 함수는 이러하다.

 

/* 게임 애니메이션 함수 */
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height); /* 깨끗하게 지워주세요 */
  //runman.draw();
  //runman.x += 20; // 르탄이의 x 좌표를 20씩 오른쪽으로 이동
  timer++;
}
animate();

 

여기서 requestAnimation은

자바스크립트에서 지원해 주는 것으로

프레임마다 실행을 해줘!라는 뜻을 가지고 있다.

 

우리는 animate라는 함수를 만들었고,

얘를 프레임마다 실행해 줘!

 

여기서 얘는?

괄호 안에 있는 animate이다.

 

 

이 ainmate 안에는

runman.draw(), 즉 runman을 직접 그려주고

그의 x 값을 20씩 증가해줘 라는 뜻을 가진다.

 

저기서 깨끗하게 지워주세요.!

 

덕분에 우리는

1. 지워지고

2. 그려지고

3. 20 증가하고

1-1. 다시 지워지고

2-1. 20 증가했던 거 그려지고 

3-1. 다시 20 증가하고 ( +40)

 

가 반복적으로 일어나게 된다.

 

animate를 설명하기 위해 20씩 늘린 거였고,

 

우리는 뛰는 모션 함수이기 때문에!

 

여기에 timer++을 통해

timer를 1씩 늘려줘야 한다!

 

 

자,

이제 점프를 넣어줘야 한다.

점프에는

1. 점프하는 조건 ( 스페이스바를 누를 때 )

2. 점프할 때 모션

가 있는 점프함수를 만들어줘야 한다.

 

점프하는 함수는 이렇다.

 

/* 게임 애니메이션 함수 */
function animate() {
    // 캔버스 클리어
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    timer++;

	  /**-- 르탄이 --*/
	  // 1-2 그리기
	  runman.draw();
	
	  // 1-3 점프 조건 설정하기
	  if (jump) {
	    runman.y -= jumpSpeed; // 스페이스바를 누르고 있으면 runman의 y값 감소
	    if (runman.y < 20) runman.y = 20; // runman이 canvas 상단을 넘지 않도록 조정
	  } else {
	    if (runman.y < RUNMAN_Y) {
	      runman.y += jumpSpeed; // 스페이스바를 떼면 runman의 y값 증가
	      if (runman.y > RUNMAN_Y) runman.y = RUNMAN_Y; // runman이 초기 위치 아래로 내려가지 않도록 조정
	    }
	  }
	  //** end of 르탄이 */
}
animate();
/** end of 게임 에니메이션 */

/** 1-3 점프하기 */
// 키보드 이벤트 처리 (스페이스바 점프)
document.addEventListener("keydown", function (e) {
    if (e.code === "Space" && !jump) {
        jump = true; // 스페이스바를 누르고 있을 때 점프 상태 유지
        jumpSound.play(); // 점프 소리 재생
    }
});

document.addEventListener("keyup", function (e) {
    if (e.code === "Space") {
        jump = false; // 스페이스바를 떼면 점프 상태 해제
    }
});
/** end of 1-3 점프하기 */

 

여기서 보면 y값이 줄어들수록 위로 올라간다.

 

 

맨 밑에

1-3 점프하기를 보면

 

space를 누르면 점프한다.

스페이스를 누르게 되면 위에 코드가 실행되게끔 한다.

떼면 false로 하강한다.

 

 

 

 

길어져서 1,2로 나눌 예정입니다!

 

지금까지 제가 설명드린 코드를 올려놓겠습니다. 필요하신분은 복사해가세유

/** 캔버스 설정 */
const canvas = document.getElementById("canvas"); // 캔버스 요소 가져오기
canvas.width = 800; // 캔버스 너비 설정
canvas.height = 500; // 캔버스 높이 설정
const ctx = canvas.getContext("2d"); // 2D 렌더링

/** 게임 상태 변수 */
let gameStarted = false; // 게임 시작 여부
const BG_MOVING_SPEED = 3; // 배경 이동 속도
let bgX = 0; // 배경 X 좌표
let scoreText = document.getElementById("score"); // 점수 표시 요소
let score = 0; // 현재 점수

/** 게임 변수 */
let timer = 0; // 장애물 생성 시간
let obstacleArray = []; // 장애물 배열
let gameOver = false; // 게임 종료 여부
let jump = false; // 점프 여부
let jumpSpeed = 3; // 점프 속도

/** 오디오 객체 생성 및 설정 */
const jumpSound = new Audio(); // 점프 소리
jumpSound.src = "./sounds/jump.mp3";
const bgmSound = new Audio(); // 배경 음악
bgmSound.src = "./sounds/bgm.mp3";
const scoreSound = new Audio(); // 점수 획득 소리
scoreSound.src = "./sounds/score.mp3";
const defeatSound = new Audio(); // 게임 오버 소리
defeatSound.src = "./sounds/defeat1.mp3";

/** 이미지 객체 생성 및 설정 */
// (1) 배경
const bgImage = new Image();
bgImage.src = "./images/background.png";
// (2) 게임 시작
const startImage = new Image();
startImage.src = "./images/gamestart.png";
// (3) 게임 오버
const gameoverImage = new Image();
gameoverImage.src = "./images/gameover.png";
// (4) 게임 재시작
const restartImage = new Image();
restartImage.src = "./images/restart.png";
// (5) 달리는 르탄이 A
const rtanAImage = new Image();
rtanAImage.src = "./images/rtan_running_a.png";
// (6) 달리는 르탄이 B
const rtanBImage = new Image();
rtanBImage.src = "./images/rtan_running_b.png";
// (7) 게임 오버 르탄이
const rtanCrashImage = new Image();
rtanCrashImage.src = "./images/rtan_crash.png";
// (8) 장애물
const obstacleImage = new Image();
obstacleImage.src = "./images/obstacle1.png";


const RUNMAN_WIDTH = 100; // 르탄이 가로 너비
const RUNMAN_HEIGHT = 100; // 르탄이 세로 높이
const RUNMAN_X = 10; // 르탄이의 초기 X 좌표
const RUNMAN_Y = 400; // 르탄이의 초기 Y 좌표


const runman = {
  x: RUNMAN_X,
  y: RUNMAN_Y,
  width: RUNMAN_WIDTH,
  height: RUNMAN_HEIGHT,
  draw() {
    if (gameOver) {
      // 게임 오버 시 충돌 이미지 그리기
      ctx.drawImage(rtanCrashImage, this.x, this.y, this.width, this.height);
    } else {
      // 달리는 애니메이션 구현
      if (timer % 60 > 30) {
        ctx.drawImage(rtanAImage, this.x, this.y, this.width, this.height);
      } else {
        ctx.drawImage(rtanBImage, this.x, this.y, this.width, this.height);
      }
    }
  },
};


/* 게임 애니메이션 함수 */

function animate() {
    // 캔버스 클리어
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    timer++;

	  /**-- 르탄이 --*/
	  // 1-2 그리기
	  runman.draw();
	
	  // 1-3 점프 조건 설정하기
	  if (jump) {
	    runman.y -= jumpSpeed; // 스페이스바를 누르고 있으면 runman의 y값 감소
	    if (runman.y < 20) runman.y = 20; // runman이 canvas 상단을 넘지 않도록 조정
	  } else {
	    if (runman.y < RUNMAN_Y) {
	      runman.y += jumpSpeed; // 스페이스바를 떼면 runman의 y값 증가
	      if (runman.y > RUNMAN_Y) runman.y = RUNMAN_Y; // runman이 초기 위치 아래로 내려가지 않도록 조정
	    }
	  }
	  //** end of 르탄이 */
}
animate();
/** end of 게임 에니메이션 */

/** 1-3 점프하기 */
// 키보드 이벤트 처리 (스페이스바 점프)
document.addEventListener("keydown", function (e) {
    if (e.code === "Space" && !jump) {
        jump = true; // 스페이스바를 누르고 있을 때 점프 상태 유지
        jumpSound.play(); // 점프 소리 재생
    }
});

document.addEventListener("keyup", function (e) {
    if (e.code === "Space") {
        jump = false; // 스페이스바를 떼면 점프 상태 해제
    }
});
/** end of 1-3 점프하기 */


// 자동 정렬 단축키
// tab키 일일히 누르기 귀찮을때

// win : alt+shift+F
// mac : shift+option+F

 

< 본 프로젝트는 스파르타코딩클럽 수업내용을 복습한 내용입니다 >

 

 

반응형
저작자표시

'기타라고 해요!' 카테고리의 다른 글

갑자기 만들어보게 된 웹게임 _ 장애물 피하면서 달리기 [ 2편 ]  (4) 2024.09.10
'기타라고 해요!' Related Articles more