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 Hats   Modeling TipsFooding   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   Vapes   GameplaysHigh 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