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