jdg/tetris-js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Deleting lines after completion

Browse Source
This commit is contained in:
José David Guillén 2021-10-19 16:41:12 +02:00
parent bb1d5edb3f
commit ad08d0e343
1 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
tetris.js
View File

@ -2,7 +2,7 @@
let tetris = function () {
const grid_x = 10;
const grid_y = 30;
const grid_y = 20;
const tetrimonios = [
/*'I'*/{ mR:2,
r:[
@ -45,10 +45,10 @@ let tetris = function () {
}
];
let timer, canvas, ctx, bs;
let timer, canvas, ctx, blockSize;
let next_t;
let board;
let board, board_x, board_y;
let t = {t:null,x:0,y:0,r:0};
@ -69,10 +69,10 @@ let tetris = function () {
p.t.r[p.r].forEach(b => drawBlock(p.x + b[0], p.y + b[1]));
}
function drawBlock_clean(x,y) {
ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
ctx.fillRect(board_x + blockSize*x, board_y + blockSize*y, blockSize, blockSize);
}
function drawBlock_filled(x,y) {
ctx.fillRect(bs*(1+x), bs*(1+y), bs, bs);
ctx.fillRect(board_x + blockSize*x, board_y + blockSize*y, blockSize, blockSize);
}
@ -109,17 +109,33 @@ let tetris = function () {
}
function glue(p) {
p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
p.t.r[p.r].forEach(b => { board[p.y+b[1]][p.x+b[0]]=1; } );
draw(t);
deleteRows( board.filter( r=>r.filter(c=>c==1).length==grid_x ) );
dropShape(t);
}
function collision(p) {
if ( p.x<0 || p.x>=grid_x || p.y<0 || p.y>=grid_y ) return true;
if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=grid_x || p.y+b[1]>=grid_y || board[p.x+b[0]][p.y+b[1]]==1 ) ).length>0 ) return true;
if ( p.t.r[p.r].filter(b => ( p.x+b[0]>=grid_x || p.y+b[1]>=grid_y || board[p.y+b[1]][p.x+b[0]]==1 ) ).length>0 ) return true;
return false
}
function deleteRows(r) {
if (r.length>0) {
// ToDo: Stop timer
// ToDo: blinking
let newBoard = board.filter( r=>r.filter(c=>c==1).length<grid_x );
board = Array.from(Array(grid_y - newBoard.length), () => new Array(grid_x));
board = board.concat(newBoard);
cleanBoard();
ctx.fillStyle = "#666666";
board.forEach((r,y)=>r.forEach((c,x)=>{if(c==1)drawBlock_filled(x,y);}))
}
}
function getNextT() {
let tNum = Math.floor(Math.random() * tetrimonios.length);
return tetrimonios[ tNum ];
@ -134,11 +150,16 @@ let tetris = function () {
next_t = getNextT();
}
function newGame() {
function cleanBoard() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
ctx.fillRect(board_x, board_y, blockSize*grid_x, blockSize*grid_y);
}
board = Array.from(Array(grid_x), () => new Array(grid_y));
function newGame() {
drawBackground();
cleanBoard();
board = Array.from(Array(grid_y), () => new Array(grid_x)); // Board[Y][X]
next_t = getNextT();
dropShape( t );
if (!timer) timer = setInterval(()=>moveDown(t), 1000);
@ -146,19 +167,29 @@ let tetris = function () {
function getBlockSize() {
const space_top = 5;
const space_right = 20;
const space_right = 10;
const { width, height } = canvas.getBoundingClientRect();
return Math.floor( Math.min( height / (space_top + grid_y), width / (space_right + grid_x) ) );
}
function drawBackground() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
ctx.strokeStyle = "#0074cc";
ctx.strokeRect(board_x -1, board_y - 1, blockSize*grid_x +2, blockSize*grid_y +2);
}
function init() {
canvas = document.getElementById("app");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx = canvas.getContext("2d");
bs = getBlockSize();
blockSize = getBlockSize();
board_x = blockSize*1;
board_y = canvas.height - blockSize*grid_y - blockSize*1;
document.addEventListener('keydown', control);
newGame();