In this episode I write a Tetris game in JavaScript from scratch.
We will look at
* How to draw 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
Original source
22 responses to “Writing a Tetris game in JavaScript”
yes! I was hoping to find a tetris tutorial somewhere <3
AWESOME NEW ANDROID GAME! ???
https://play.google.com/store/apps/details?id=com.appdeveloperhue.yolknspikes
thanks man!!!
Awesome, but not really for a beginner. You had my head turned upside down in couple of places. Ha ha
More please!
how you learn to Program from where to start?
how do i open the console code on chrome
also removed the menu dont know how to open it again
Amazing!
the part of the video when we added this code: arena[y + player.pos.y][x + player.pos.x] = value; Then it did`int work for me!
Please Make More… …Videos!!!!!!!!!!!!!!!!!!!!!!!!!!!!
And thank you so much for this video.you are a great teacher
how your function collide (arena,player) detect collision with the bottom border ?
First vid I've seen of yours, great vid btw and sweet beard bro
"You remind me of MPJ from @funfunfuntion" I wrote this comment before you said that this episode is an honor episode hahah
Thanks for your tutorial
I LOVE YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
fantastic github commiting !)…step by step, special for foolish like me 😉
Thanks .Finally ,i made it ,,but can you please explain the logic behind collision loop? How it is working?
if (m[y][x]!==0 &&
(arena[y+o.y] &&
arena[y+o.y][x+o.x])!==0)
what about phaser framework?
what kind of editor do u write in?
which text editor did you use in this video pls? and can notepad++ work for this same programm
Can someone tell me what to press to rotate the blocks thank you