ํฌ๋กฌ ๊ณต๋ฃก๊ฒ์ js๋ก ๋ง๋ค๊ธฐ!
๊ฒ์์งํ
- ์ฐ->์ข๋ก ์ฅ์ ๋ฌผ๋ค์ด ๋์จ๋ค.
- ์คํ์ด์ค๋ฐ๋ฅผ ๋๋ฅด๋ฉด ๊ณต๋ฃก์ด ์ ํ๋ฅผ ํ๋ค.
- ์ฅ์ ๋ฌผ๊ณผ ๊ณต๋ฃก์ด ์ถฉ๋ํ ๊ฒฝ์ฐ ์ข ๋ฃ
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</html>
canvas ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ๋ค.
main.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;
์ฒ์ ๋น์ด์๋ ์บ ๋ฒ์ค์ ํ์ํด์ฃผ๊ธฐ ์ํด ๋๋๋ง ์ปจํ ์คํธ์ ์ ๊ทผํด์ผํ๋ค. getContext
๊ทธ๋ ค์ง ๋ด์ฉ๋ค์ ๋ณด์ผ ์บ๋ฒ์ค ์ฌ์ด์ฆ๋ ์ ํด์ค๋ค.
let dino = {
x: 10,
y: 200,
width: 50,
height: 50,
draw() {
ctx.fillStyle = 'green';
ctx.fillRect(this.x, this.y, this.width, this.height);
},
};
๊ณต๋ฃก์ ์์น ํฌ๊ธฐ๊ฐ๋ค์ ๋ด์ ๊ฐ์ฒด๋ก ๋ง๋ค์ด์ฃผ๊ณ draw()๋ฅผ ์ด์ฉํ์ฌ ๊ทธ๋ ค์ค๋ค.
class Cactus {
constructor() {
this.x = 500;
this.y = 200;
this.width = 50;
this.height = 50;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
์ ์ธ์ฅ ์ฅ์ ๋ฌผ์ ํด๋์ค๋ก ๋ง๋ค์ด ์์ฑ๊ฐ๋ค์ ๋ด๋๋ค.
๊ฒ์์์ ์์ดํ ๋ค์ ๋ง๋ค๋๋ ๋๊ทธ๋ผ๋ฏธ๋ ๋ค๋ชจ๋ก ์์ํ๋ฉด ์ข๋ค.
let timer = 0;
let cactusArr = [];
let jumpTimer = 0;
let animation;
let jump = false;
function gameLoop() {
animation = requestAnimationFrame(gameLoop);
timer++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 120 ํ๋ ์๋ง๋ค ํ๋ฒ์ฉ
if (timer % 120 === 0) {
let cactus = new Cactus();
cactusArr.push(cactus);
}
// el ์ฅ์ ๋ฌผ
cactusArr.forEach((el, i, o) => {
// x์ขํ๊ฐ 0 ๋ฏธ๋ง์ด๋ฉด ์ฅ์ ๋ฌผ ์ ๊ฑฐ
if (el.x + el.width < 0) {
o.splice(i, 1);
}
el.x--;
checkCollision(dino, el);
el.draw();
});
if (jump == true) {
dino.y -= 2; // ์ ํ ์๋ ์กฐ์
jumpTimer++;
}else{
if (dino.y < 200) {
dino.y+=2;
jumpTimer = 0;
}
}
if (jumpTimer > 50) {
jump = false;
}
dino.draw();
}
gameLoop();
๊ฒ์ ๊ฐ๋ฐ์์ ์๊ฐ์ ํ๋ ์์ผ๋ก ์ธก์ ํ๋ค.
`requestAnimationFrame`์ ์ฌ์ฉํ์ฌ ์น ์ ๋๋ฉ์ด์ ์ ์ต์ ํํ๋ฉด, ๊ฐ ํ๋ ์ ๊ฐ์ ์ ๋ฐ์ดํธ๋ฅผ ์กฐ์ ํ๊ณ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ์ ์๋ค.
- timer: ๊ฒ์์์ ํ๋ ์์ ์นด์ดํธํ๋ ๋ณ์. ๊ฐ ํ๋ ์๋ง๋ค 1์ฉ ์ฆ๊ฐํ๋ฉฐ, ๊ฒ์์ ์๊ฐ ๊ฒฝ๊ณผ๋ฅผ ์ธก์ ํ๋ ์ฉ๋๋ก ์ฌ์ฉ
์๋ฅผ ๋ค์ด, ๊ฒ์ ๋ฃจํ์์ ์ผ์ ํ๋ ์๋ง๋ค ํน์ ๋์์ ์ํํ๋๋ก ์กฐ๊ฑด์ ์ค์ ํ ๋ ์ฌ์ฉ๋ฉ๋๋ค. - jumpTimer ๊ณต๋ฃก์ด ์ ํํ ํ ๊ณต์ค์ ๋จธ๋ฌด๋ฅด๋ ์๊ฐ์ ์ธก์
- animation: requestAnimationFrame์ ๋ฐํ ๊ฐ์ ์ ์ฅ๊ฒ์ ๋ฃจํ์์ ์ ๋๋ฉ์ด์ ํ๋ ์์ ๋ฐ๋ณต ํธ์ถํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
document.addEventListener('keydown', function(e) {
if (e.code === 'Space') {
jump = true;
}
});addEventListener๋ก ํค๋ณด๋ ์คํ์ด์ค๋ฐ๋ฅผ ๋๋ฅผ๋๋ง๋ค ์ ํ๋ฅผ ํ๊ฒ ์ด๋ฒคํธ๋ฅผ ์์ฑํด์ค๋ค.
๊ณต๋ฃก๊ณผ ์ ์ธ์ฅ์ด ๋ถ๋ชํ์ ๋ ์๊ฒจ๋๋ ์ด๋ฒคํธ๋ฅผ ์ํด ์ถฉ๋์ ํ์ธํด์ผํ๋ค.
// ์ถฉ๋
function checkCollision(dino, cactus) {
let xDiff = cactus.x - (dino.x + dino.width);
let yDiff = cactus.y - (dino.y + dino.height);
if (xDiff < 0 && yDiff < 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
cancelAnimationFrame(animation);
alert('Game Over');
}
}
๊ณต๋ฃก๊ณผ ์ ์ธ์ฅ ์ฌ์ด์ ๊ฐ๋ก ๋ฐ ์ธ๋ก ๊ฐ๊ฒฉ์ ๊ณ์ฐํ๋ค.
๋ง์ฝ ๊ณต๋ฃก์ด ์ ์ธ์ฅ๊ณผ ๊ฐ๋ก๋ก๋ ์ธ๋ก๋ก๋ ์ถฉ๋ํ๋ฉด Game Over ๊ฒฝ๊ณ ์ฐฝ์ ๋์ฐ๊ณ ๊ฒ์์ ์ข ๋ฃํ๋ค.
- xDiff ์ฅ์ ๋ฌผ์ x ์ขํ์์ ๊ณต๋ฃก์ ์ค๋ฅธ์ชฝ ๋๊น์ง์ ๊ฑฐ๋ฆฌ
yDiff์ฅ์ ๋ฌผ์ y ์ขํ์์ ๊ณต๋ฃก์ ์๋์ชฝ ๋๊น์ง์ ๊ฑฐ๋ฆฌ - `xDiff < 0 && yDiff < 0`: ๊ณต๋ฃก๊ณผ ์ฅ์ ๋ฌผ์ด ์ถฉ๋ํ์ ๋๋ฅผ ์๋ฏธํฉ๋๋ค. ์ฆ, ๊ณต๋ฃก์ด ์ฅ์ ๋ฌผ์ ์์ญ์ ๋ค์ด์๊ณ , ๊ณต๋ฃก์ ๋ฐ๋ฅ์ด ์ฅ์ ๋ฌผ์ ์๋จ๋ณด๋ค ์์ ์์ต๋๋ค.
- ์ถฉ๋ ์ ์ฒ๋ฆฌ
- `ctx.clearRect(0, 0, canvas.width, canvas.height)`: ์บ๋ฒ์ค๋ฅผ ๋ชจ๋ ์ง์ ํ๋ฉด์ ํด๋ฆฌ์ด. ๊ฒ์ ์ค๋ฒ ํ ์๋ก์ด ์ํ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ํ๋ฉด์ ์ด๊ธฐํ
- `cancelAnimationFrame(animation)`: ํ์ฌ ์คํ ์ค์ธ ์ ๋๋ฉ์ด์ ํ๋ ์์ ์ทจ์. ๊ฒ์ ๋ฃจํ์ ์คํ์ ์ค์ง
ํ๋ฉด์บก์ณ
์๊ฒ ๋ ์
- canvers
- ๊ฒ์์์ ์๊ฐ์ ํ๋ ์์ผ๋ก ๊ณ์ฐํ๋ค.
- requestAnimationFrame
๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋๋ฉ์ด์ ์ ์ํํ ์ ์ ํ ์์ ์ ํจ์๋ฅผ ํธ์ถํ๋๋ก ์์ฒญํ๋ ๋ฉ์.
๋ธ๋ผ์ฐ์ ์ ๋ด๋ถ ์ ๋๋ฉ์ด์ ํ์ด๋ฐ๊ณผ ๋๊ธฐํํ์ฌ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ์ ์๋๋ก ๋์์ค๋ค.
์ฐธ๊ณ : https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame
๋ค์๊ธ
js ํฌ๋กฌ ๊ณต๋ฃก ๊ฒ์ ๋ง๋ค๊ธฐ (2)
์ด์ ํธ์ข๋ก ์ฅ์ ๋ฌผ๋ค์ด ๋์จ๋ค. ์คํ์ด์ค๋ฐ๋ฅผ ๋๋ฅด๋ฉด ๊ณต๋ฃก์ด ์ ํ๋ฅผ ํ๋ค. ์ฅ์ ๋ฌผ๊ณผ ๊ณต๋ฃก์ด ์ถฉ๋ํ ๊ฒฝ์ฐ ์ข ๋ฃ index.html canvas ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ๋ค. m" data-og-host="ranidiant.tistory.com" data-og
ranidiant.tistory.com
์ฐธ๊ณ : ์ฝ๋ฉ์ ํ https://www.youtube.com/watch?v=qkTtmgCjHhM
'js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| js ํฌ๋กฌ ๊ณต๋ฃก ๊ฒ์ ๋ง๋ค๊ธฐ (2) (0) | 2024.07.09 |
|---|---|
| ๋๋ง์ cli ๋ง๋ค์ด์ npm ํจํค์ง ๋ฐฐํฌํด๋ณด๊ธฐ (0) | 2024.01.24 |
| ์น ํ์ด์ง์ lottie ํ์ผ ์ ์ฉํด๋ณด๊ธฐ (0) | 2023.06.20 |
| Js, lastindexof ์ substring ์ ์ด์ฉํ์ฌ ํ์ผ ํ์ฅ์ ์ถ์ถํ๊ธฐ (0) | 2023.05.24 |
| swiper ๋ง์ฐ์ค ์ฌ๋ ธ์ ๋ ์ฌ๋ผ์ด๋ ์ผ์์ ์ง autoplay stop (0) | 2023.05.02 |
