CODEWITHSUNDEEP
javascript
jmin22
jmin22

Reputation: 71

HTML File will not show anything in browser

I have been trying to practice javascript by coding a simple 2D Tetris game, but when I view it in the browser after simply trying to create the game space, nothing shows up in the browser and it is entirely blank. I've tried everything and I just can't seem to get it to work and I don't know if it's my code or something else. Any help is really appreciated!

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script src="tetris.js"></script>
</body>
</html>

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

context.scale(20,20);

context.fillStyle = 'black';
context.fillRect.getContext(0, 0 , context.width, context.height);

const matrix = [
    [0, 0, 0],
    [1, 1, 1],
    [0, 1, 0]
];

function drawMatrix(){
    matrix.forEach((row, y) => {
        row.forEarch((value, x) => {
            if (value != 0) {
                context.fillStyle = 'red';
                context.fillRect(x, y, 1, 1);
            }
        });
    });
}

drawMatrix(matrix);

Upvotes: 1

Views: 47

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Yor code has mistakes:

  1. context.fillRect.getContext() is incorrect. It should be context.fillRect()
  2. Your forEach() loop has typo. You are writing forEarch(). It should be forEach()

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

context.scale(20, 20);

context.fillStyle = 'black';
context.fillRect(0, 0, context.width, context.height);

const matrix = [
  [0, 0, 0],
  [1, 1, 1],
  [0, 1, 0]
];

function drawMatrix() {
  matrix.forEach((row, y) => {
    row.forEach((value, x) => {
      if (value != 0) {
        context.fillStyle = 'red';
        context.fillRect(x, y, 1, 1);
      }
    });
  });
}

drawMatrix(matrix);
<!DOCTYPE html>
<html>

<head>
  <title>Tetris</title>
</head>

<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <script src="tetris.js"></script>
</body>

</html>

Upvotes: 2

Related Questions