1. ์ด.. ์ด๊ฑฐ ์ด๋ป๊ฒ ๊ตฌํํ์งโ
๋ฏธ์ฌ์ผ ํผํ๊ธฐ ๊ฒ์์ ๋ง๋ค๋ ์ค์ด์๋ค.
๊ตฌ๋ฆ์ ๋ง๋ค์ด์ Canvas๋ฅผ ์ด์ฉํ์ฌ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ๊ฒ์ ์ฝ๊ฒ ํ ์ ์์๋ค. ์์ง์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ง ์๊ณ ๋นจ๊ฐ์ ์ฌ๊ฐํ์ผ๋ก ํํํ์๋๋ฐ ์ ๊ฒ ๋ฐ๋ก ์ ํฌ๊ธฐ์ด๋ค.
์ด์ ์ด๊ฑธ ์์ง์ฌ์ผ ํ๋๋ฐ ์ด ๊ฐ์ฒด์ ์ ๋์ ์ธ ์์น๋ฅผ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ง ์์๋ค. ๊ทธ๋ฌ๋ฉด ๋๋ฌด ํ๋ฉด์ด ์ ์ ์ผ๋ก ๋ณด์ผ ๊ฒ ๊ฐ์๋ค. ๋ง์ฝ player๋ ๊ทธ ์๋ฆฌ์ ์์ง๋ง ํ์ ์ ํ๊ณ ๊ตฌ๋ฆ์ด ์์ง์ธ๋ค๋ฉด player๋ ์ ์ฝ์์ด ์ด๋๋ก๋ ๋ฌดํํ ์์ง์ด๋ ๋ฏํ ํจ๊ณผ๋ฅผ ์ค ์ ์๋ค.
ํ์ง๋ง ์ด๊ฑธ ๋์ฒด ์ด๋ป๊ฒ ๊ตฌํํ๋ ์ง๊ฐ ๋ฌธ์ ์๋ค.
2. ๋ด๊ฐ ์๊ฐํ๋ ๋ฌด์ํ ๋ฐฉ๋ฒ
์ผ๋จ ๋ช ํํ ๊ฒ์ Player๋ ํ์ ์ ํด์ผ ๋๋ค๋ ๊ฒ์ด์๊ณ (1), ๊ตฌ๋ฆ์ ๊ทธ ๋ฐฉํฅ์ ๋ง์ถฐ์ ์์ง์ฌ์ผ ๋๋ค๋ ๊ฒ์ด์๋ค(2) ํ์ ์ ํ๋ ์ฝ๋๋ ์ฝ๊ฒ ๊ตฌํํ ์ ์์๋ค. ์๋ํ๋ฉด ์ด์ ์ space-invaders ๊ฒ์์ ๋ง๋ค์์ ๋ ์ฌ์ฉํ๋ ์ฝ๋์ด๋ค.
draw() {
ctx.save();
ctx.translate(
player.position.x + player.width / 2,
player.position.y + player.height / 2
);
ctx.rotate(this.rotation);
ctx.translate(
-player.position.x - player.width / 2,
-player.position.y - player.height / 2
);
ctx.fillStyle = "red";
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
ctx.restore();
}
๋ค์์ผ๋ก ํด๊ฒฐํ ๊ฒ์ ๊ตฌ๋ฆ๋ค์ด ์ฌ์ฉ์๊ฐ ์ ๋ ฅ์ผ๋ก ๋ฐ๊พผ player์ rotation๊ฐ์ ํตํด ๋ฏธ์ธํ๊ฒ ๋ฐฉํฅ์ ๋ฐ๊ฟ์ค์ผ ํ๋ค๋ ๊ฒ์ด๋ค. -> ๊ทธ๋์ผ ์ํ๋ ๋ฐฉํฅ์ผ๋ก ์ด๋ํ๋ ๊ฒ์ฒ๋ผ ๋๊ปด์ง๋ค.
์กฐ๊ธ์ ๋์ด๋๊ฐ ์๋ ๋ถ๋ถ์ด์๋ค. ์ ๋ง ๋ง์ ๊ณ ๋ฏผ์ ํ์๋ค.
- ๋ฌด์ํ๋ ๋ฐฉ๋ฒ
์ฒ์์๋ naiveํ๊ฒ ๋ฌด์ํ ๋ฐฉ๋ฒ์ ์๊ฐํ๋ค. ์ฐ์ (์์ชฝ, ์ค๋ฅธ์ชฝ, ์๋์ชฝ, ์ผ์ชฝ, ์ผ์ชฝ ๋๊ฐ์ ์ ์๋, ์ค๋ฅธ์ชฝ ๋๊ฐ์ )์ ๋ฐฉํฅ์ ์ค์ ํด๋๊ณ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๊ตฌ๋ถํ์ฌ ์ด 8๊ฐ์ง์ ๊ฒฝ์ฐ๋ก๋ง ์ด๋ํ๋๋ก ํ๋ค.
์ฝ๋๋ ์๋์ ๊ฐ๋ค.
const direction = [
{ x: 0, y: 1},
{
x: -1,
y: 1,
},
{
x: -1,
y: 0,
},
{
x: 0,
y: -1,
},
{
x: 1,
y: -1,
},
{
x: 1,
y: 0,
},
{
x: 1,
y: 1,
},
{
x: -1,
y: -1,
},
];
ํ์ง๋ง ์ด๋ ๊ฒํ๋ฉด ๊ฐ๋๊ฐ ์ ๋ง๋ ๋ฌธ์ ๊ฐ ์๊ธด๋ค. 8๊ฐ์ง์ ๋ฐฉํฅ์ผ๋ก๋ง ์ด๋ํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฒ์์ ์์ฑ๋๋ ๋จ์ด์ง๊ฒ ๊ณ ๋ฐฉํฅ ์ ํ์ ๋๋ ๋๊ธฐ๋ ๋ฌธ์ ๋ ์์๋ค.
3. ์ด๋ป๊ฒ ํด๊ฒฐํ์๋๊ฐโ
2๋ ์ ์ ๊ตฐ๋์์ ์ ๊น ์ฝ๋ฉํ์๋ ์ค์์ดํ ๋ฒฝ๋๊นจ๊ธฐ๊ฐ ์๊ฐ๋ฌ๋ค. ํด๋น ๊ฒ์์ ํด๋ฆญํ ๊ณณ์ผ๋ก ๊ณต์ ๋ฐ์ฌํด์ผ ๋๊ธฐ์ ํน์ ๊ฐ๋์ ๋ฐ๋ผ ๊ตฌ๋ฆ์ ์์ง์ฌ์ผ ํ๋ ๋ด ๊ฒฝ์ฐ์ ๋ฑ ๋ง์ ๋จ์ด์ก๋ค. ๋์ ์ํฉ๋ player์ ๊ฐ๋์ ๋ฐ๋ผ ๊ตฌ๋ฆ์ ์์ง์์ ๊ฐ๋๋๋ก ํด์ผ ๋์์ผ๋๊น ๋ง์ด๋ค.
๊ทธ๋์ ํด๋น์ฝ๋๋ฅผ ์ฐธ๊ณ ํ์๋ค.
var pos = getMousePos(canvas,e);
angle_x = pos.x - x;
angle_y = pos.y - y;
angle = Math.atan2(angle_y,angle_x);
direction = new Vector(Math.cos(angle),Math.sin(angle));
ํด๋น์ฝ๋๋ ์์ ๊ฐ๋ค. "๊ฐ๋๋๋ก ์ด๋ํ๋ค"๋ผ๊ณ ๋งํ๋ ๋ฐ ์ด๋ ๊ณต, ๊ตฌ๋ฆ์ด ์ผ์ ํ ๊ฐ๋๋ก ์์ง์ด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ๊ฒ ๋งํ ๊ฒ์ด๊ณ ๊ทธ๋ฌ๋ฉด ๊ฐ๋๋ฅผ ์๋ค๋ฉด ๊ทธ๊ฒ์ ์์๋ฐฐ๋ฅผ ํด์ ์์ง์ด๋ฉด ๋ ๊ฒ์ด๋ค. direction์ ๋ฒกํฐ์ด๊ณ ํด๋น ๊ฐ๋์ ๋ฐ๋ฅธ x์ y์ ๊ฐ์ ๊ฐ๊ณ ์๋ค. ์ด๋ฅผ ๊ตฌ๋ฆ๋ค์ ์์น์ ๋ํ๋ฉด ๋๋ค.
๊ทธ๋์ ๋๋ ์์ ๊ฐ์ด ํ์๋ค. rotation ์ฆ ๊ฐ๋๋ player์ rotation์ด ๋๊ธฐ์ ์ด๋ฅผ ๋ฐ๋ก ๊ตฌํ ํ์ ์์๋ค. vectorํด๋์ค๋ฅผ ๋ง๋ค์๊ณ for๋ฌธ์ ๋ณด๋ฉด ๊ฐ๊ฐ cloud ์๋์ ์ด ๋ฐฉํฅ์ ๋ํด์ค ๊ฒ์ ์ ์ ์๋ค.
์ด๋ direction์ ์ -Math.sin(player.rotation), Math.cos(player.rotation)์ผ๋ก ํ ์ด์ ๋ ๊ธฐ์ค ์ ๋๋ฌธ์ด๋ค. Math.cos(angle),Math.sin(angle)๋ก ํ๋ค๋ฉด ๊ธฐ์ค์ ์ด ๊ฐ๋ก์ ์ ์ด๋ค. ํ์ง๋ง ๋ด ํ๋ก์ ํธ์์ ์ ํฌ๊ธฐ๋ ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ์ธ์์ ธ ์์ผ๋ฏ๋ก x์ถ๊ณผ y์ถ์ ๋ฐ๊ฟ์ผ ํ๋ค. ๊ทธ๋์ ์ด ๋์ ์์น๋ฅผ ๋ฐ๊ฟ ์ฃผ์๊ณ , Math.sin()์ ๋ง์ด๋์ค๋ฅผ ๋ถ์ธ ์ด์ ๋ ์ธ๋ก๋ก ์ธ์ ์ง๋ง x์ถ y์ถ์ ๋ฐ๊ฟจ๊ธฐ ๋๋ฌธ์ ๋นํ๊ธฐ๊ฐ ์ค๋ฅธ ์ชฝ์ผ๋ก ์์ง์ฌ์ผ ํ์ ํด์ผ ํ๋๋ฐ ์ค๋ฅธ์ชฝ์ผ๋ก ํ์ ํ๋ ๋ฌธ์ ๊ฐ ์์๊ณ ๋ง์ด๋์ค๋ฅผ ๋ถ์ฌ ์ฝ๊ฒ ํด๊ฒฐํ๋ค.
๋๋ ์ ๋ง ์ด์ด ์ข๊ฒ๋ ์ด๋ฏธ ์ด์ ์ ๋น์ทํ ๋ฌธ์ ๋ค์ ๋ง๋ฌ์๋ค. ํ์ง๋ง ์ด๋ฅผ ์ ์ฉ์ํฌ ์๊ฐ์ ํ๋ค๋ ๊ฒ์ ๋ ์์ ์ ์กฐ๊ธ์ ์นญ์ฐฌํ๊ณ ์ถ๋ค.
์๋ ์์ฑ๋ณธ์ด๋ค!!