JavaScript
const canv = document.getElementById("tetris");
const context = canv. getContext("2d");
context.scale(20, 20);
const matrix = [
[0, 0, 0],
[1, 1, 1],
[0, 1, 0],
];
var isComplete = true;
var type = 4; // Default
function draw() {
context.fillStyle = "#000";
context.fillRect(0, 0, canv.width, canv.height);
drawMatrix(player.matrix, player.pos);
}
function drawMatrix(matrix, offset) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
if (type === 1) {
context.fillStyle = "green";
context.fillRect(x + offset.x, y + offset.y, 1, 1);
} else if (type === 2) {
context.fillStyle = "blue";
context.fillRect(x + offset.x, y + offset.y, 1, 1);
} else if (type === 3) {
context.fillStyle = "yellow";
context.fillRect(x + offset.x, y + offset.y, 1, 1);
} else if (type === 4) {
context.fillStyle = "red";
context.fillRect(x + offset.x, y + offset.y, 1, 1);
}
}
});
});
}
function playerDrop() {
player.pos.y++;
dropCounter = 0;
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
const player = {
pos: {x: 5, y: 5},
matrix: matrix,
type: 4, //default block
}
function getRandomMatrix() {
var rand = Math.floor( Math.random() * (7 - 1) + 1);
if (rand === 1) {
player.matrix = [
[0, 1, 0],
[0, 1, 0],
[0, 1, 0],
];;
player.type = 1;
isComplete = false;
} if (rand === 2) {
player.matrix = [
[0, 1, 0],
[0, 1, 0],
[1, 1, 0],
];;
player.type = 2;
isComplete = false;
} if (rand === 3) {
player.matrix = [
[0, 1, 0],
[0, 1, 0],
[0, 1, 1],
];;
player.type = 3;
isComplete = false;
} if (rand === 4) {
player.matrix = [
[0, 0, 0],
[1, 1, 1],
[0, 1, 0],
];;
player.type = 4;
isComplete = false;
}
type = player.type;
}
function update(time=0) {
const deltaTime = time -...