Tetris #1 – HTML5 Game Programming Tutorial [javascript]

A simple Tetris clone: part one :)

:: Links ::
https://code.google.com/p/simple-tetris-clone/
http://ejohn.org/blog/simple-javascript-inheritance/
http://requirejs.org/

:: Source ::
https://github.com/maxwihlborg/youtube-tutorials/tree/master/tetris

:: Other Stuff ::
https://github.com/maxwihlborg
http://maxwihlborg.com/
https://twitter.com/epicwihlborg

Comments

jasonc_tutorials says:

How long did it take you to make games like this? I’m like doing this in unity and i’m having a lot of trouble.

Djangokillen says:

Oh! You’ve also tried Emmet Livestyle, it’s really nice!

Nate Fire says:

wow you took something simple and made it complicated congrats

Ronaldo Dimaano Jr. says:

What version of sublime text did you use?

je3f0o says:

Your Javascript code looks really good to me, I love your videos.  :)
Thank you for your great jobs!

Leonardo Silva says:

great video

c.v.r says:

I love your videos man they are awesome, where are you from ?

Phenylalanin1979 says:

Great to have a new JavaScript game tutorial from you Max.

The only one says:

code.google.com doesn’t work anymore

187onaPigeon says:

Shame you stopped uploading videos… great stuff!

Stefan Vogelaar says:

Looks awesome! will try this asap

King Munch says:

Max, how long do you learn programming to become this good?

Victoria Mielke says:

I have written your code exactly as in tutorial and can’t render the background image. I get the error “Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap..”

Kim Lindblå says:

What color scheme are you using?

[m.pty] says:

How can I make sublime text automatically setup Html base layout like you did at 5:01?

Djangokillen says:

What theme are you using!? I thought it was Monokai, but it wasn’t :(

Skankhunt42 says:

why did u stop uploading =(

Stephen Davies says:

Links to resources are no longer maintained, then i saw how long ago this tutorial was published. I dont know why simple html5 canvas or dom elements could have not been used, cant follow this any more now :(

zarmotix says:

i cant get any of your tutorials to work? i keep getting errors and all ive done is copy pasted and set it up how you have…. is it somthing to do with me using windows and firefox?

Error: Script error for: src/Game
http://requirejs.org/docs/errors.html#scripterror require.js:8

Error: Script error for: src/Tetris
http://requirejs.org/docs/errors.html#scripterror require.js:8

Use of Mutation Events is deprecated. Use MutationObserver instead. index.html:1494

Rina says:

The first link in your description isn’t working anymore :(

gato says:

what software are you using for this. is it notepadd ++??

Scot Brown says:

Hey Max, I am using your engine and am unsure of the best way to approach a problem. I want to write text to the canvas formatted according to my stylesheet, but I am only able to format the frame, and I am drawing to the view. My current workaround is setting the font and fillStyle each time I write text, which isn’t too bad, but ideally I’d be able to scale (pixelate) the game without ruining my text.

Is there a reasonable way to either format the view or draw directly to the frame?

Filip Book says:

What’s the graphics editor you’re using to look at the res files?

Tack som fan för övrigt med videon, mycket bra intro för mig :)

vlone kellz says:

can i get more info on _fctx use and meaning please and thank you (anyone)

Scot Brown says:

Sorry to keep bothering you, but why did you choose to place the App class in main?

Could you instead have Tetris inherit from App (or Game) so that all of the key binds and content loading that are specific to tetris are in the tetris-specific class, and all of the more general code (canvas sizing and ticking) are abstracted more effectively? I imagine that this would be more time-consuming in the short-term, and may be less effective for teaching (as in your case), but could the benefits be worth it? 

android Developer says:

where are you programming

Susan Shemin says:

Absolutely fantastic video tutorial.  I followed all the way through part 4 and the game works!  I also learned a lot about javascript syntax and how to utilize the editor.  The only thing missing is how to make the game mobile — I’m off to find out how.  Thanks so much!

Bas Degen says:

Max thanks for your awesome tutorials :) (y)

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours