Help with tetris game

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.

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

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().

See if you can come up with an algorithm for it first and share it. Then, someone can see if you are on the right track. As a rule of thumb, we want you to learn on your own and help you once you have first tried on your own. If you already have your algorithm and some code, but are just not getting it to work as you want, then post it here or update your Codepen and ask questions about your own code.

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)

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!

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.

Thanks for the information as well!

Great job on the game and figuring out the pause.

You could simply your pause function with:

function togglePause() {
  paused = !paused;