Centering the tile on hold to the canvas
This commit is contained in:
87
js/tetris.js
87
js/tetris.js
@@ -68,6 +68,52 @@ function arenaSweep() {
|
|||||||
drawArena();
|
drawArena();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function centerOffset(matrix) {
|
||||||
|
// const tempMatrix = rotate(matrix, 1);
|
||||||
|
let offsetX = 0;
|
||||||
|
let offsetY = 0;
|
||||||
|
matrix.forEach((row, y) => {
|
||||||
|
let onlyZeroesY = true;
|
||||||
|
row.forEach((value, x) => {
|
||||||
|
if (value > 0) {
|
||||||
|
onlyZeroesY = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (onlyZeroesY) {
|
||||||
|
if (y < matrix.length / 2)
|
||||||
|
offsetY -= .5;
|
||||||
|
else
|
||||||
|
offsetY += .5;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
for (let x = 0; x < matrix[0].length; x++) {
|
||||||
|
let onlyZeroesX = true;
|
||||||
|
matrix.forEach((row, y) => {
|
||||||
|
if (row[x] > 0)
|
||||||
|
onlyZeroesX = false;
|
||||||
|
});
|
||||||
|
if (onlyZeroesX) {
|
||||||
|
if (x < matrix[0].length / 2)
|
||||||
|
offsetX -= .5;
|
||||||
|
else
|
||||||
|
offsetX += .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// tempMatrix.forEach((col, x) => {
|
||||||
|
// let onlyZeroes = true;
|
||||||
|
// col.forEach((value, y) => {
|
||||||
|
// if (value > 0) {
|
||||||
|
// onlyZeroes = false;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// if (onlyZeroes)
|
||||||
|
// matrix.forEach((row, y) => {
|
||||||
|
// matrix[y].splice(x, 1);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
return {x: offsetX, y: offsetY};
|
||||||
|
}
|
||||||
|
|
||||||
function clearScreen() {
|
function clearScreen() {
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
}
|
}
|
||||||
@@ -152,13 +198,10 @@ function drawArena() {
|
|||||||
|
|
||||||
function drawHolding() {
|
function drawHolding() {
|
||||||
holdContext.clearRect(0, 0, holdCanvas.width, holdCanvas.height);
|
holdContext.clearRect(0, 0, holdCanvas.width, holdCanvas.height);
|
||||||
console.log(holdingTile, holdingTile.length, holdCanvas.width / (holdingTile.length + 2));
|
const offset = centerOffset(holdingTile);
|
||||||
// holdContext.scale(holdCanvas.width / (holdingTile.length + 2), holdCanvas.width / (holdingTile.length + 2));
|
const x = 3 - (holdingTile[0].length / 2) + offset.x;
|
||||||
const tile = removeEmpty(holdingTile);
|
const y = 3 - (holdingTile.length / 2) + offset.y;
|
||||||
const x = 3 - (tile[0].length / 2);
|
drawMatrix(holdingTile, {x: x, y: y}, holdContext);
|
||||||
const y = 3 - (tile.length / 2);
|
|
||||||
console.log(x, y);
|
|
||||||
drawMatrix(tile, {x: x, y: y}, holdContext);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawMatrix(matrix, offset, useContext = context) {
|
function drawMatrix(matrix, offset, useContext = context) {
|
||||||
@@ -220,7 +263,6 @@ function drawTile(x, y, offset, color, matrix, useContext = context) {
|
|||||||
switch (theme) {
|
switch (theme) {
|
||||||
case "default":
|
case "default":
|
||||||
if (ctx === holdContext)
|
if (ctx === holdContext)
|
||||||
console.log(ctx, color, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
|
|
||||||
ctx.fillStyle = color;
|
ctx.fillStyle = color;
|
||||||
ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
|
ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
|
||||||
break;
|
break;
|
||||||
@@ -229,7 +271,6 @@ function drawTile(x, y, offset, color, matrix, useContext = context) {
|
|||||||
drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
|
drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
|
||||||
break;
|
break;
|
||||||
case "snakes":
|
case "snakes":
|
||||||
console.log(ctx);
|
|
||||||
ctx.fillStyle = color;
|
ctx.fillStyle = color;
|
||||||
let r1 = .15, // top right
|
let r1 = .15, // top right
|
||||||
r2 = .15, // bottom right
|
r2 = .15, // bottom right
|
||||||
@@ -400,34 +441,6 @@ function prerenderPieces() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeEmpty(matrix) {
|
|
||||||
const tempMatrix = rotate(matrix, 1);
|
|
||||||
matrix.forEach((row, y) => {
|
|
||||||
let onlyZeroes = true;
|
|
||||||
row.forEach((value, x) => {
|
|
||||||
if (value > 0) {
|
|
||||||
onlyZeroes = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (onlyZeroes) {
|
|
||||||
matrix.splice(y, 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tempMatrix.forEach((col, x) => {
|
|
||||||
let onlyZeroes = true;
|
|
||||||
col.forEach((value, y) => {
|
|
||||||
if (value > 0) {
|
|
||||||
onlyZeroes = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (onlyZeroes)
|
|
||||||
matrix.forEach((row, y) => {
|
|
||||||
matrix[y].splice(x, 1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return matrix;
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotate(matrix, dir) {
|
function rotate(matrix, dir) {
|
||||||
for (let y = 0; y < matrix.length; ++y) {
|
for (let y = 0; y < matrix.length; ++y) {
|
||||||
for (let x = 0; x < y; ++x) {
|
for (let x = 0; x < y; ++x) {
|
||||||
|
Reference in New Issue
Block a user