In this episode I write a Tetris game in JavaScript from scratch.
If you like this tutorial you will probably also like my Super Mario Bros tutorial: https://youtu.be/g-FpDQ8Eqw8
We will look at
* Drawing on a canvas
* Rotating a matrix
* Rudimentary requestAnimationFrame listening
* Handling keyboard input
Since we are writing ES6 this code might not run on all browsers yet. I was running Chrome 53 when I wrote this and if you wish to follow I recommend you do too.
The initial HTML can be found here:
https://raw.githubusercontent.com/meth-meth-method/tetris/295e28320cd06b858e529ee6c512eeeb8526ca05/index.html
Source code with step-by-step commits:
https://github.com/meth-meth-method/tetris
Music:
Demoscene Time Machine
http://demoscenetimemachine.com
Amazon Auto Links: No products found.
![Tetris #1 – HTML5 Game Programming Tutorial [javascript]](https://img.youtube.com/vi/Z3wvP27eW98/0.jpg "Tetris #1 – HTML5 Game Programming Tutorial [javascript]")
3:07 how can i open this?
Don’t take it the wrong way, but your beard + js = hipster :))
oh! It’s great!
Of well, my absolute stupidity….! Apparently I’ve been saving my file to a wrong folder..LOL! But thank you so much for your tutorial! I will keep following to learn!
Hello, I am new to programming and have been trying to follow this tutorial to get the feel for it using sublime text 3.
I’ve got the black background but can’t seem to have the first tetris block to show?
I think I copied everything ok? What am I missing here? Any advice? Thanks in advance.
========================================
const canvas = document.getElementById(‘tetris’);
const context = canvas.getContext(‘2d’);
context.scale(20,20);
context.fillStyle = ‘#000′;
context.fillRect(0, 0, canvas.width,canvas.height);
const matrix = [
[0,0,0],
[1,1,1],
[0,1,0],
];
function drawMatrix(matrix, offset) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle =’red’;
context.fillRect(x, y, 1, 1);
}
});
});
}
drawMatrix(matrix);
i have a probleme at 3 min xD when i go google with the link copy paste of index.html on google i have a white page i don’t know why can someone help me plz ?
you impart lots of js knowledge in this video. Thank you. Please make more js game
its not working for me tbh. I’m working in brackets that might be the issue
love it how you pronounce arena LUL
you are great, slow calm, so simply you developed a playable game !!!
Great video!!! Just a short question. Is there any reason not to write the update function like this?
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
const deltaTime = time – lastTime;
if (deltaTime > dropInterval) {
player.pos.y++;
lastTime = time;
}
draw();
requestAnimationFrame(update);
}
In 39.07 how does he replace ‘1’ in matrix with ‘2’ ‘3’ and so on? What keyboard shortcut he used?
+Meth Meth Method Was that os you were using a Windows 10? It looks like you’re using a Mac OS ide so im curious..
BTW did you notice the minor mistake you did in the player function when you added it?
const player = {
pos: {x: 5, y: 5},
matrix: matrix, <--- The Comma }
It keep appearing some error while i follow this video. even it had some error that i coped js file all of them and pasted…. what’s the problem?
Hello, why are you use “if else if else” constructions instance “switch case”? Thank you.
8:00
addict of cofee driven developement too?
Thanks so much genius. It was awesome practice of ES6 and functional programming for me to follow along with you. Thanks again 🙂
What is he using to write the code?
I see the word meth three times in your name
I felt weird when you were talking about cool stuff and you just said “ah, lets just start ._.”
https://youtu.be/H2aW5V46khA?t=40m35s
how change colors in code like this? it’s addon, or be pre copied?
hey guys, I finished the game and I’m looking to style it, does anyone have a clue on how I could substitute the pieces with images of blocks? so I can customize the pieces a bit?
36:34 wait what?? how do you floor like that?
How on earth did you learn to do all of this?
this is an awesome channel, vanilla JS ES6, you don’t see that often!! it seems like the author is not publishing content anymore though 🙁
PLEASE move pomle.github.io to pomhub.io
this looks really great and i was looking forward to it. I have no idea what it is i am doing wrong the addevent listener works a few times and then just stops. Nothing i do after that makes it work. Too bad i was looking forward to this. Cheers man
Great !! 🙂
Sjukt bra! Thanks a lot for this!
Hi Guys. Did you have any issues with the const = matrix? I keep having this error: Cannot read property ‘forEach’ of undefined
at drawMatrix
even though everyting lloks fine.
thanks a lot for the tutorial
lit
why isn’t it working, It wouldnt make the block bigger here is the code
const canvas = document.getElementById(‘tetris’);
const context = canvas.getContext(‘2d’);
context.scale(20, 20);
context.fillStyle = ‘#000’;
context.fillRect(0, 0, canvas.width, canvas.height);
const matrix = [
[0, 0, 0],
[1, 1, 1],
[0, 1, 0],
];
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle = ‘red’;
context.fillRect(x, y, 1, 1);
}
});
});
I think I would do that on my own but in 3000 lines rather than 300 😀
Do you mind if I copy this code, it’s for a class.
I’ve checked EVERYTHING and I have absolutely everything right, but when playing it’ll randomly stop and in console it says row.forEach is not a function. I’ve tried absolutely everything but it just wont work. (It says the problem is in the drawMatrix function, but I have it EXACTLY the same as yours, and I have all the latest versions of java and node.js installed)
Will this help me to become a better Front-end Developer?
Games must be the most challenging programs to write.
This gave me a headache.
I really enjoyed this video. There aren’t many functional programming builds like this on YouTube. Very well produced and edited too! Keep it up
I know you are from sweden but u sound Jamaican.
I thought im familiar with javascript
pomle.github.io/keycode
I hit like and I subscribed and I hope you continue making more videos!
It would be better if we have basic knowledge of html game before starting this tutorial.. check this out https://www.w3schools.com/graphics/game_intro.asp
what operating system and computer you using
Hello, I’m Russian you are a cool dude I watch every movie you have and they are cool
would you be interested in coding a project with me or helping/teaching me?