Help with tetris game

1

Hello, I cannot seem to figure out why my drawMatrix() function is not setting the gradient on the square pieces until the piece lands. It should set the fill gradient right after setting the stroke. Everything looks great once the piece lands. I have no idea why the collision would cause the change.

2

Haiiiiyo! The problem is because of the following line in the drawMatrix() function:

  let grd = ctx.createLinearGradient(x, y, x + 1, y + 1);

It should be changed to:

  let grd = ctx.createLinearGradient(x + offset.x, y + offset.y, x + offset.x + 1, y + offset.y + 1);

You probably just forgot about it so I assume I don’t have to explain anything (otherwise feel free to ask)!

1 Like
3

That was it, thanks! Would you also be able to steer me in the right direction for a pause() function. A function that can either pause the script where it is, or pause it before its next update().

5

Would something along the lines of this work?

var paused = false;

function init() {
if(!paused) {
// insert program here…
}
}

function togglePause() {
if(paused) {
paused = false
}
paused = true;
}

document.getElementById(“myId”).addEventListener(“keydown”, togglePaused)

6

It looks like you have done it already! :smile:

Just one other thing I noticed, and in case you are going to make other types of games, is that the game is coded to increment the current block’s y position per update (see playerDrop()) and then the counter is cleared. This has the side effect that the game effectively stops when the browser tab is hidden (requestAnimationFrame is meant to behave like that so that it doesn’t hog resources).

In your Tetris game that may be a good thing and it may be intentional, but this wouldn’t work for a (even simple) physics-based game and will lead . If you haven’t come across this excellent article about JavaScript gameloop and if you are going to make other types of games in JavaScript with browser APIs, I highly recommend giving it a read.

Good luck!

7

I’ve actually have done virtually all of my programming in the web dev field. This was just a done after watching a tutorial, with quite a few changes. I added quite a bit myself. I’m still just starting to grasp things as a whole, web programming wise. So I like to do anything I can to build some muscle memory and use different techniques.

8

Thanks for the information as well!