Im making Tetris with Js

Replit Help
1

let canvas;
let ctx;
let gBArrayHeight = 22;
let gBArrayWidth = 12;
let startX = 5;
let startY = 0;
let score = 0;
let level = 1;
let winOrLose = “Playing”;
let coordinateArray = […Array(gBArrayHeight)].map(e => Array(gBArrayWidth).fill(0));
let curTetromino = [[1, 0], [0, 1], [1, 1], [2, 1]];
let floor = 22;
let roof = 1;

let tetrominos = ;
let tetrominoColors = [‘purple’, ‘cyan’, ‘blue’, ‘yellow’, ‘orange’, ‘green’, ‘red’];
let curTetrominoColor;

let gameBoardArray = […Array(22)].map(e => Array(12).fill(0));
let stoppedShapeArray = […Array(22)].map(e => Array(12).fill(0));

let DIRECTION = {
IDLE: 0,
DOWN: 1,
LEFT: 2,
RIGHT: 3
};
let direction;

class Coordinates {
constructor(x, y) {
this.x = x;
this.y = y;
}
}

document.addEventListener(‘DOMContentLoaded’, SetupCanvas);

function CreateCoordArray() {
let i = 0, j = 0;
for (let y = 8; y <= 506; y += 23) {
for (let x = 8; x <= 264; x += 23) {
coordinateArray[i][j] = new Coordinates(x, y);
i++;
}
j++
i = 0;
}
}

function SetupCanvas() {
canvas = document.getElementById(‘my-canvas’);
ctx = canvas.getContext(‘2d’);
canvas.width = 288;
canvas.height = 518;

ctx.scale(1, 1);

ctx.fillStyle = ‘black’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = ‘black’;
ctx.strokeRect(0, 0, 288, 518);

document.addEventListener(‘keydown’, HandleKeyPress);
CreateTetrominos();
CreateTetromino();

CreateCoordArray();
DrawTetromino();
}

function DrawTetromino() {
for (let i = 0; i < curTetromino.length; i++) {
let x = curTetromino[i][0] + startX;
let y = curTetromino[i][1] + startY;
gameBoardArray[y] = 1;
let coorX = coordinateArray[y].x;
let coorY = coordinateArray[y].y;
ctx.fillStyle = curTetrominoColor;
ctx.fillRect(coorX, coorY, 21, 21);
}
}

function HandleKeyPress(key) {
if (winOrLose != “Game Over”) {
if (key.keyCode === 65) {
direction = DIRECTION.LEFT;
if (!HittingTheWall() && !CheckForHorizontalCollision()) {
DeleteTetromino();
startX–;
DrawTetromino();
}
} else if (key.keyCode === 68) {
direction = DIRECTION.RIGHT;
if (!HittingTheWall() && !CheckForHorizontalCollision()) {
DeleteTetromino();
startX++;
DrawTetromino();
}
} else if (key.keyCode === 83) {
MoveTetrominoDown();
} else if (key.keyCode === 69) {
RotateTetromino();
}
}
}

function MoveTetrominoDown() {
direction = DIRECTION.DOWN;
if (!CheckForVerticalCollision()) {
DeleteTetromino();
startY++;
DrawTetromino();
}
}

if (score >= 5) {
level++;
}

var speed = 700;
if (level++) {
window.setInterval(speed++, 100)
}

window.setInterval(function() {
if (winOrLose != “Game Over”) {
MoveTetrominoDown();
}
}, speed)

function DeleteTetromino() {
for (let i = 0; i < curTetromino.length; i++) {
let x = curTetromino[i][0] + startX;
let y = curTetromino[i][1] + startY;
gameBoardArray[y] = 1;
let coorX = coordinateArray[y].x;
let coorY = coordinateArray[y].y;
ctx.fillStyle = ‘black’;
ctx.fillRect(coorX, coorY, 21, 21);
}
}

function CreateTetrominos() {
// T
tetrominos.push([[1, 0], [0, 1], [1, 1], [2, 1]]);
// I
tetrominos.push([[0, 0], [1, 0], [2, 0], [3, 0]]);
// J
tetrominos.push([[0, 0], [0, 1], [1, 1], [2, 1]]);
// Square
tetrominos.push([[0, 0], [1, 0], [0, 1], [1, 1]]);
// L
tetrominos.push([[2, 0], [0, 1], [1, 1], [2, 1]]);
// S
tetrominos.push([[1, 0], [2, 0], [0, 1], [1, 1]]);
// z
tetrominos.push([[0, 0], [1, 0], [1, 1], [2, 1]]);
}

function CreateTetromino() {
let randomTetromino = Math.floor(Math.random() * tetrominos.length);
curTetromino = tetrominos[randomTetromino];
curTetrominoColor = tetrominoColors[randomTetromino];
}

function HittingTheWall() {
for (let i = 0; i < curTetromino.length; i++) {
let newX = curTetromino[i][0] + startX;
if (newX <= 0 && direction === DIRECTION.LEFT) {
return true;
} else if (newX >= 11 && direction === DIRECTION.RIGHT) {
return true;
}
}
return false;
}

function CheckForVerticalCollision() {
let tetrominoCopy = curTetromino;
let collision = false;
for (let i = 0; i < tetrominoCopy.length; i++) {
let square = tetrominoCopy[i];
let x = square[0] + startX;
let y = square[1] + startY;
if (direction === DIRECTION.DOWN) {
y++;
}
if (gameBoardArray[y + 1] === 1) {
if (typeof stoppedShapeArray[y + 1] === ‘string’) {
DeleteTetromino();
startY++;
DrawTetromino();
collision = true;
break;
}
if (y == floor) {
collision = true;
break;
}
}
if (collision) {
if (startY == roof) {
winOrLose = “Game Over”;
} else {
for (let i = 0; i < tetrominoCopy.length; i++) {
let square = tetrominoCopy[i];
let x = square[0] + startX;
let y = square[1] + startY;
stoppedShapeArray[y] = curTetrominoColor;
}
CheckForCompletedRows();
CreateTetromino();
direction = DIRECTION.IDLE;
startX = 4;
startY = 0;
DrawTetromino();
}
}
}
}

function CheckForHorizontalCollision() {
let tetrominoCopy = curTetromino;
let collision = false;
for (let i = 0; i < tetrominoCopy.length; i++) {
let square = tetrominoCopy[i];
let x = square[0] + startX;
let y = square[1] + startY;

if (direction === DIRECTION.LEFT) {
  x--;
} else if (direction === DIRECTION.RIGHT) {
  x++;
}
var stoppedShapeVal = stoppedShapeArray[x][y];
if (typeof stoppedShapeVal === 'string') {
  collision = true;
  break;
}

}
return collision;
}

function CheckForCompletedRows() {
let rowsToDelete = 0;
let startOfDeletion = 0;
for (let y = 0; y < gBArrayHeight; y++) {
let completed = true;
for (let x = 0; x < gBArrayWidth; x++) {
let square = stoppedShapeArray[y];
if (square === 0 || (typeof square === ‘undefined’)) {
completed = false;
break;
}
}
if (completed) {
if (startOfDeletion === 0) startOfDeletion = y;
rowsToDelete++;
for (let i = 0; i < gBArrayWidth; i++) {
stoppedShapeArray[i][y] = 0;
gameBoardArray[i][y] = 0;
let coorX = coordinateArray[i][y].x;
let coorY = coordinateArray[i][y].y;
ctx.fillStyle = ‘black’;
ctx.fillRect(coorX, coorY, 21, 21);
level++;
}
}
}
if (rowsToDelete > 0) {
score += 10;
MoveAllRowsDown(rowsToDelete, startOfDeletion);
}
}

function MoveAllRowsDown(rowsToDelete, startOfDeletion) {
for (var i = startOfDeletion - 1; i >= 0; i–) {
for (var x = 0; gBArrayWidth; x++) {
var y2 = i + rowsToDelete;
var square = stoppedShapeArray[i];
var nextSquare = stoppedShapeArray[y2];
if (typeof square === ‘string’) {
nextSquare = square;
gameBoardArray[y2] = 1;
stoppedShapeArray[y2] = square;
let coorX = coordinateArray[y2].x;
let coorY = coordinateArray[y2].y;
ctx.fillStyle = nextSquare;
ctx.fillRect(coorX, coorY, 21, 21);

    square = 0;
    gameBoardArray[x][i] = 0;
    stoppedShapeArray[x][i] = 0;
    coorX = coordinateArray[x][i].x;
    coorY = coordinateArray[x][i].y;
    ctx.fillStyle = 'black';
    ctx.fillRect(coorX, coorY, 21, 21);
  }
}

}
}

function RotateTetromino() {
let newRotation = new Array();
let tetrominoCopy = curTetromino;
let curTetrominoBU;
for (let i = 0; i < tetrominoCopy.length; i++) {
curTetrominoBU = […curTetromino];
let x = tetrominoCopy[i][0];
let y = tetrominoCopy[i][1];
let newX = (GetLastSquareX() - y);
let newY = x;
newRotation.push([newX, newY]);
}
DeleteTetromino();
try {
curTetromino = newRotation;
DrawTetromino();
}
catch (e) {
if (e instanceof TypeError) {
curTetromino = curTetrominoBU;
DeleteTetromino();
DrawTetromino();
}
}
}

function GetLastSquareX() {
let lastX = 0;
for (let i = 0; i < curTetromino.length; i++) {
let square = curTetromino[i];
if (square[0] > lastX) {
lastX = square[0];
}
}
return lastX;
}

There is the code, if you can fix any problems I would be grateful.

2

Welcome to the forums!

Please format your code correctly by using triple backticks.

It’s also easier for us to help you if you describe the issue you’re encountering.

2 Likes
3

Hey @IsaacSands welcome to the forums!

What is your issue that you need help with? Is this a school assignment? Also, like @OmegaOrbitals said please format your code using backticks ``` put code here ```.

1 Like