tetris 만들기 프로젝트 by SMUG.bs ~
tetris 프로젝트를 시작하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> <style type="text/css"> body { background: #202028; color: #fff; font-family: sans-serif; font-size: 2em; text-align: center; } cavas{ border: solid .2em #fff; height: 90vh; } </style> </head> <body> <div id="score"></div> <canvas id="tetris" width="240" height="400"></canvas> <script src="tetris_bs.js"></script> </body> </html> | cs
|
1. 맵 만들기
const canvas = document.getElementById('tetris'); //html 에서 canvas id로 설정한것을 JS에서 받게 된다.
const context = canvas.getContext('2d'); // 자바스크립트로 2d 게임을 만들수 있게 된다.
// 해당 맵의 사이즈는 html의 canvas 사이즈입니다.
function draw(){
context.fillStyle ="#000"; //context의 색을 입히기 위해서
context.fillRect(0,0,canvas.width,canvas.height);
//canvas.width, canvas.height는 html에 있는 canvas를 두고 말하는 듯
drawMatrix(player.matrix, player.pos);
}
draw() 함수는 context의 색과 모양을 만듭니다.
Canvas를 띄워 주고 맵을 만들었으면,
drawMatrix를 호출합니다. => 3번
2. 플레이어 설정
const player = {
pos : { x:5, y:5 },
matrix: matrix,
}
player의 객체의 위치는
x : 5, y : 5
matrix 객체의 값은 matrix이다. 메트릭스를 만들자
3. matrix, 모형 만들기
const matrix=[
[0,0,0],
[1,1,1],
[0,1,0]
]
2차원 배열을 통해서 'T' 자를 만들어 주었다.
player는 x : 5, y : 5 위치의 메트릭스를 만들어 놓는다.
다음은 drawMatrix 함수를 만든다.
1. 인자가 두개 들어가는데 1) 메트릭스 2)이동값이다.
function drawMatrix(matrix, offset){ //matrix들의 모양을 만들어줌.
matrix.forEach((row, y)=>{
row.forEach((value, x) => {
if(value !== 0 ){
context.fillStyle = 'blue';
context.fillRect(x + offset.x, y + offset.y
,1,1);
}
})
})
}
matrix는 아직 값만 있는 것이어서 볼 수가 없다.
matrix[][]의 값을 차례대로 읽는다. forEach문을 통해서,
1) forEach문은 배열을 쓸때 사용하는 메서드이다.
matrix는 matrix[][]이기 때문에, 한 행(y) 의 한열, 한열 (x) 씩 진행이 된다. 해당 좌표의 값이 0이 아니면 색이 입혀지게 된다.
fillStyle은 색을 입히는 메서드
fillRect(x 좌표 , y 좌표, width, length) 로 이루어져 있다.
scale은 context의 크기를 설정해 준다.
offset : ⓥ 차감계산을 하다라는 의미
3. 을 보면 drawMatrix내부의 context는 지역적으로만 적용이 되는 것으로 보인다.
context.으로 시작을 해서 모든 context가 다 적용 될줄 알았다.
모양을 만들었다. 이제 이동하기 위해서
필요한 준비 작업을 한다.
4. update() 시간 쪼개고, 초가 지나면 조각 내리기
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0; //일반 변수
function update(time = 0){
const deltaTime = time - lastTime; //time과 lasttime의 차
// console.log("deltaTime : "+deltaTime);
console.log(time);
lastTime = time;
// console.log("lastTime : "+lastTime);
dropCounter += deltaTime;
if(dropCounter > dropInterval){
player.pos.y++;
dropCounter = 0;
}
draw();
requestAnimationFrame(update);
/*
우리는 이 조각을 떨어뜨리기를 원한다.
requestAnimationFrame는 1000/60 밀리초후에 호출을 계속 한다.
requestAnimationFrame(update)를 실행하게 되면 time의 값이 계속 올라가서
밀리세컨드씩 증가하는 것을 볼 수 있다 .
그것을 lasttime에 담아주고
deltatime은 dropcounter에 더해준다.
그래서 dropcounter가 dropinterval보다 커지면 y는 더해지게 된다.
dropcounter는 0으로 초기화가 된다.
사람의 육안으로는 똑같은 값을 빼주는 것이지 않나 싶지만
알고리즘이 진행되는 것을 보면 (시간 변화를 1로 주겠다.)
time = 0 , lastTime = 0, deltatime = 0,
requestAnimationFrame(update) 진행,
(deltaTime = time - lastTime)
time = 1, lastTime = 0 , deltatime = 1, (lastTime = time)
time = 1, lastTime = 1 , deltatime = 1,
requestAnimationFrame(update)
time = 2, lastTime = 1 , deltatime = 2, (lastTime = time)
time = 2, lastTime = 2 , deltatime = 2, .... 1000! => y값 추가
되는 형식이다.
console.log(time)을 해보면 누적되는 값을 알 수 있다.
*/
console.log("time : "+time);
}
컴퓨터는 밀리세컨드로 초로 진행이된다.
그래서 그 시간차를 구하고, 우리는 그것을 눈으로 확인할 수 있는 작업을 할것이다.
이 작업을 하지 않으면 순식간에 조각이 내려가게 된다.
5. 방향 전환, 및 키보드
function playerDrop(){
player.pos.y++;
dropCounter = 0;
};
//http://pomle.github.io/keycode/
document.addEventListener('keydown', event => {
if(event.keyCode === 37){
player.pos.x--;
} else if(event.keyCode === 39){
player.pos.x++;
} else if(event.keyCode === 40){
/*
player.pos.y++;
dropCounter = 0; */ //=> 같은 동작을 통합하는 작업을 함. playerDrop()함수로.
playerDrop();
}
});
/*
document.addEventListener('keydown', event => { ... })
자바스크립트의 문법을 익히자
위에 주소로 들어가면 키보드 키마다 키값이 있다.
해당 키 값을 누르면 , player.pos.에 값을 넣어주면 된다.
*/
4.의 코딩에서도 playerDrop()으로 바꿔준다.
첫 시간으로 정리를 해 보았다.
내게 와닿았던것들을 적어보겠다.
document.addEventListener('keydown', event => { ... })
문법을 알자
requestAnimationFrame(update);
신기한 메서드
function drawMatrix(matrix, offset){ //matrix들의 모양을 만들어줌.
matrix.forEach((row, y)=>{
row.forEach((value, x) => {
if(value !== 0 ){
context.fillStyle = 'blue';
context.fillRect(x + offset.x, y + offset.y
,1,1);
} }) })}
context.scale(20,20)
달라 둘이...
const canvas = document.getElementById('tetris'); //html 에서 canvas id로 설정한것을 JS에서 받게 된다.
const context = canvas.getContext('2d');
JS에서 쓰는 방식과 같은 알고리즘은 메서드로 따로 만들어주는것..
