목표는 일주일 안에 기능 실행하기.
블록을 만들어야 하지만, 바로 이전글에 nyallowha.tistory.com/15
html5를 이용해 테트리스 만들기.
오늘 면접 과제로 html canvas를 이용해 테트리스 게임을 구현해보라고 했다. 기간은 1주일. 자바스크립트 jquery도 검색해가면서 겨우겨우 하는 수준이라 잘 만들지 모르겠다. (아마 이동안은 다른��
nyallowha.tistory.com
마지막에서 참고하려는 블로그는 정말 참고만 하게 되었다.
지금은 유튜브를 통해 따라해보면서완성해보려고 한다. -50분가량의 영상이지만 중간중간 부족하거나 내가 채워야되는부분은 검색하면 채워지는 작업을 하면 엄청나게 시간이 걸릴 것 같다. - 이걸 3일차까지 완성, 4일차부터는 코드 새로 제작해서 5,6일차때 코드검색만 하고 새로 만드는걸 목표로 진행중이다.
7일차까지 다 하게 되면 다시 CURD 가게 될것같다.
일단 오늘까지의 작업 :
www.youtube.com/watch?v=H2aW5V46khA
해당 유튜브의 38분정도까지 진행했다.... 후 따라치면서 이해하려는데 그것이 너무 어렵습니다.
일단 내일중으로 완성하고, 새롭게 만드는걸 진행해보려고 합니다. 워메에....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tetris</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"> </script>
</head>
<body>
<canvas id="tatris" width="240" height="400"></canvas>
<script src="tetris.js"></script>
</body>
</html>짧은 html
var canvas = document.getElementById("tatris");
//랜더링 컨텍스트 지정.
var c = canvas.getContext('2d');
c.scale(20,20);
var matrix = [
//t자 블록
[0 ,0 ,0],
[1 ,1 ,1],
[0 ,1 ,0],
];
function collide(arena,player){
//matrix = m , position = o
var [m, o ] = [player.matrix , player.position];
for (let y = 0 ; y < m.length; ++ y){
for (let x = 0 ; x<m[y].length; ++ x){
if(m[y][x]!==0 &&
(arena[y+ o.y]&&
arena[y + o.y][x + o.x])!==0){
return true;
}
}
}
return false;
}
function createMatrix(w,h){
var matrix = [];
while (h--){
matrix.push(new Array(w).fill(0));
}
return matrix;
}
function draw(){
c.fillStyle='#000';
c.fillRect(0,0,canvas.width, canvas.height);
drawMatrix(arena,{x:0,y:0});
drawMatrix(player.matrix,player.position );
}
function drawMatrix(matrix,offset){
matrix.forEach((row,y)=>{
row.forEach((value,x)=>{
if(value!==0){
c.fillStyle = 'red';
c.strokeStyle='white';
c.lineWidth=0.05;
c.strokeRect(x+offset.x ,
y+offset.y,1,1);
c.fillRect(x+ offset.x ,
y+ offset.y ,1,1);
}
});
});
}
function merge(arena,player){
player.matrix.forEach((row,y)=>{
row.forEach((value,x)=>{
if(value!==0){
arena[y+player.position.y][x+player.position.x]=value;
}
});
});
}
function playerDrop(){
player.position.y++;
if(collide(arena, player)){
player.position.y--;
merge(arena,player);
player.position.y=0;
}
dropCounter = 0;
}
function playerMove(dir){
player.position.x += dir;
console.log(dir);
if(collide(arena,player)){
player.position.x -= dir;
}
}
function playerRotate (dir){
const position = player.position.x;
let offset = 1;
rotate(player.matrix,dir);
while(collide(arena,player)){
player.position.x += offset;
offset = -(offset+(offset> 0? 1 : -1 ));
if(offset > player.matrix[0].length) {
rotate(player.matrix,dir);
player.position.x = position;
return;
}
}
}
function rotate(matrix, dir){
for (let y = 0; y<matrix.length; ++y){
for (let x = 0 ; x < y; ++x ){
[
matrix[x][y],
matrix[y][x],
]=[ matrix[y][x],
matrix[x][y],
];
}
}
if (dir>0) {
matrix.forEach(row => row.reverse());
}else{
matrix.reverse();
}
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0 ){
var deltaTime = time - lastTime
lastTime = time;
dropCounter += deltaTime;
if(dropCounter > dropInterval){
playerDrop();
}
draw();
requestAnimationFrame(update);
}
var arena = createMatrix(12,20);
console.log(arena); console.table(arena);
var player ={
position : { x:5, y:5},
matrix: matrix,
}
document.addEventListener('keydown',event => {
if(event.keyCode === 37){
playerMove(-1);
}else if (event.keyCode ===39){
playerMove(1);
}else if (event.keyCode === 40){
playerDrop();
}else if (event.keyCode === 81){
playerRotate(-1);
}else if (event.keyCode === 87){
playerRotate(1);
}
});
update();
그에 비해서 엄청나게 긴 자바스크립트 코드...하하....
'일상' 카테고리의 다른 글
| 근황 및 오늘 배운내용 정리 (0) | 2020.09.15 |
|---|---|
| html 테트리스 만들기 -마지막- (0) | 2020.09.07 |
| html5 canvas 테트리스 만들기 <4일차> (0) | 2020.08.30 |
| html5 canvas 테트리스 만들기 <3일차> (0) | 2020.08.29 |
| html5를 이용해 테트리스 만들기. (0) | 2020.08.27 |