Learn by Building: oyun ve web sayfası yaparak kodlamayı öğren
Kodlamayı, sonucunu gördüğün şeyler yaparak öğren: web sayfaları ve gerçek oyunlar, küçük adımlarla. Her adım aynı sırayla ilerler: ne yapıyoruz, kod, ne işe yarıyor, sonra sıra sende. Sonuç kodunun hemen yanında görünür.
Learn by Building ücretsiz ve açık kaynak. İşine yaradıysa GitHub’da bir yıldız ver; başkalarının da bulmasına yardım eder. GitHub
Yapım atölyeleri
Kartvizitim: HTML ve CSS ile kendi kartvizit sayfanı yap: başlık, yuvarlak köşeli ve gölgeli bir kart, bağlantıların. Sayfa sen yazdıkça güncellenir. (12 adım)
Trafik lambası: Kendi kendine yanıp sönen bir trafik lambası; yalnız HTML ve CSS ile: kutular, daireler, flexbox, sıraya göre renkler ve zaman çizelgeli CSS animasyonu. (12 adım)
Metin dedektifi: Yazdıkça her metni inceleyen bir sayfa: karakterler, kelimeler, en sık kelime ve metnin Sezar şifreli hâli. İlk gerçek JavaScript'in: değişkenler, fonksiyonlar, diziler, döngüler ve Map. (13 adım)
Oyunlar
XOX: 3×3 tahtada X ve O. Fare tıklamaları, dizi olarak tahta, kazananı bulmak ve özyineleme sayesinde hiç kaybetmeyen bir bilgisayar. (33 adım)
Renk Hafızası (Simon): Tuşların yanışını izle ve diziyi tekrarla; her turda bir renk daha. Bir gösteriyi yöneten sayaçlar, bilgisayar ile oyuncu arasında sıralar, cevapları adım adım kontrol etmek ve hızlanan bir oyun. (27 adım)
Dört Bağla: Diskleri sütunlara bırak ve bilgisayardan önce dördünü yan yana getir. Yerçekimli iki boyutlu bir dizi, düşme animasyonu, dört yönde çizgi kontrolü ve kazanan, engelleyen, bir hamle ileriyi düşünen bir bilgisayar rakip. (38 adım)
Hafıza Kartları: Kartları ikişer ikişer çevir ve eşlerini bul. Adil karıştırma, neye tıklandığını bulma, zamanlayıcılar ve kart çevirme animasyonu. (25 adım)
Wordle Tarzı Kelime Tahmini: Beş harfli kelimeyi yeşil, sarı ve gri ipuçlarıyla altı denemede bul. Klavye girişi, metin işleme, tekrarlanan harfler için puanlama kuralları, telefonlar için ekran klavyesi ve kaydedilen istatistikler. (26 adım)
Köstebek Vurmaca: Köstebekler deliklerden çıkar; saklanmadan önce onlara tıkla. Zamana dayalı durum, daire isabet testi, süreli tur ve zorluk eğrisi. (18 adım)
15 Bulmacası: Numaralı taşları kaydırarak yeniden sıraya diz. Düz bir dizide konumlar, bir ızgarada komşular, karıştırmanın neden gerçek hamlelerden yapılması gerektiği (ve hangi bulmacaların çözülebileceğini kanıtlayan matematik) ve akıcı kaydırma animasyonu. (27 adım)
Candy Crush Tarzı Üçlü Eşleştirme: Aynı renkten üçünü sıraya dizmek için yan yana mücevherleri takas et. Eşleşmesiz bir başlangıç tahtası, bir Set ile sıraları bulmak, iki işaretçiyle yerçekimi, giderek daha çok puan getiren zincirlemeler, yanıp sönme ve düşüş için bir durum makinesi, her hamleyi deneyerek bulunan bir ipucu ve bir hamle bütçesi. (29 adım)
Sudoku: Sudoku oyna, sonra bilgisayara onu çözmeyi ve yeni bulmacalar icat etmeyi öğret. Bir metinden okunan ızgara, tek döngüde üç kural, en kısıtlı hücreyi seçen geri izlemeli bir çözücü, her bulmacayı tam olarak tek çözümde tutan bir üretici ve telefonlar için bir rakam tuş takımı. (28 adım)
Sonsuz Koşucu: Dünya hızlanırken kaktüslerin üstünden atla, kuşların altından eğil. Zıplama fiziği, değişken zıplama yüksekliği, rastgele engel üretme ve affedici çarpışma kutuları. (19 adım)
Blackjack: 21'i geçmeden krupiyeyi yen. Nesne olarak kartlar, adil bir Fisher–Yates karıştırması, 11 ya da 1 değerinde aslar, sabit kurallara uyan bir krupiye, fişler ve ödemeler, zamana yayılan bir sıra, ikiye katlama ve ne yapabileceğini gösteren düğmeler. (22 adım)
Adam Asmaca: Figür çizilmeden kelimeyi harf harf tahmin et. Tahminlerden bir Set, tek satırda gizlenmiş kelime, harflere süzülen tuşlar, bir fonksiyon dizisinden yapılan çizim, ne zaman kazandığını bilmek için every() ve ekranda bir klavye. (36 adım)
Conway'in Hayat Oyunu: Dört basit kural ve canlanan bir dünya. Hücrelerden bir ızgara, komşuları saymak, her hücrenin neden aynı anda değişmesi gerektiği (çift tamponlama), başa saran bir dünya, işaretçiyle boyamak ve ünlü planör topu. (32 adım)
Yazı Yağmuru: Düşen kelimeleri yere inmeden yaz. Metni yerleştirmek için ölçmek, en acil kelimeye kilitlenmek, bir kelimenin yarısını başka renkte çizmek, canlar, gerçek yazma hızları ölçülerek ayarlanan seviyeler, dakikada kelime ve doğruluk, ve sıradaki tuşu yakan bir klavye. (33 adım)
Sokoban: Her kutuyu bir hedefe it. Standart bir bölüm biçimini okumak, duvarlar ve hedefler için kümeler, itme kuralları, bölümler ve anlık görüntü geçmişiyle geri alma. (29 adım)
Puzzle Bobble Tarzı Balon Atıcı: Aynı renkten üçünü patlatmak ve tuttuklarını düşürmek için balon at. 2 boyutlu dizide altıgen bir ızgara, atan2 ile nişan, seken ve ızgaraya oturan atışlar, gruplar için bir flood fill ve hâlâ asılı olanlar için bir başkası, inen bir tavan ve atışı simüle eden bir kılavuz. (31 adım)
Klondike Solitaire: Yığınlardan kurulan klasik kart oyunu. Tek nesnede on üç yığın, üst üste binen sütunlar, saf fonksiyon olarak kurallar, dokunarak taşıma, tutma noktası korunan sürükle-bırak, her hamleden sonra kazanma kontrolü ve anlık görüntü yığınıyla geri alma. (40 adım)
Ritim Şeritleri: Notalar çizgiye ulaştıkça onlara vur. Metin olarak yazılmış bir şarkı, zamana göre yerleştirilip saatten çizilen notalar, kusursuz ve iyi için zamanlama pencereleri, ıskalar, çarpanı yükselten kombolar, doğruluk ve not, ve telefonda dokunulabilen şeritler. (35 adım)
Yılan: Büyüyen yılanı duvarlara ve kendine çarpmadan yeme götür. Izgara, diziler, oyun döngüsü ve klavye girdisi. (28 adım)
Pong: İlk video oyunu hiti: iki raket ve bir top. Basılı tuşlar, sekme, açılar, skor ve basit bir bilgisayar rakip. (26 adım)
Flappy tarzı kuş: Borular arasından geçmek için kanat çırp. Hız, yerçekimi, oyun durumları, engel üretme ve kare hızından bağımsız döngü. (30 adım)
Tuğla Kırma: Fareyle yönettiğin raket ve bir topla tuğla duvarını yık. İç içe döngüler, daire–kutu çarpışması, canlar ve servis, parçacık efektleri. (39 adım)
Frogger Tarzı Karşıya Geçiş: Kalabalık bir yolu zıplayarak geç, kütüklere binerek nehri aş ve evlere ulaş. Gerçek zamanlı bir dünyada ızgara hareketi, modülo ile dönen şeritler, hareketli platformlara binmek ve hızlanan bölümler. (22 adım)
Doodle Jump Tarzı Tırmanış: Platformdan platforma sekerek olabildiğince yükseğe tırman. Tek yönlü platformlar, seni yukarı takip eden bir kamera, hep ulaşılabilir olacak biçimde üretilen sonsuz platformlar, hareketli platformlar ve tuzaklar. (24 adım)
Ay'a İniş: Motoru çalıştır ve iniş aracını eğerek pistin üstüne yumuşakça in. Rastgele arazi, sin ve cos ile bir açı boyunca yerçekimi ve itki, döndürülen çizimler, güvenli inişin kuralları ve işler ters gidince enkaz. (31 adım)
Mario Tarzı Platform: Kayan bir bölümde koş, zıpla, düşmanları ez ve bayrağa ulaş. Metinden bir bölüm, döşeme çarpışmaları, ivme, coyote time, kamera, düşmanlar ve ezme. (37 adım)
2048: Numaralı karoları kaydır, eşit olanları birleştirip 2048'e ulaş. 2 boyutlu ızgara, dört yönde yeniden kullanılan saf bir kaydır-birleştir fonksiyonu ve kaydırma girdisi. (26 adım)
Mayın Tarlası: Sayıları ipucu olarak okuyup hiçbir mayına dokunmadan alanı temizle. Komşu sayma, güvenli ilk tıklama, yığınla taşma dolgusu, bayraklar ve zamanlayıcı. (26 adım)
Tetris Tarzı Bloklar: Düşen parçalar, döndürme ve satır silme. Matris olarak parçalar, matris döndürme, ızgaraya karşı çarpışma, kilitleme, satır silme, seviyeler ve adil bir rastgele torba. (32 adım)
Kule Savunması: Yolun kenarına kuleler kur ve dalgaları geçmeden durdur. Bir yol boyunca mesafeyle yürümek, fare tıklamalarını döşemeye çevirmek, hedef seçmek, güdümlü mermiler, alan hasarı ve güçlenen dalgalar. (42 adım)
Space Invaders Tarzı: Yürüyen bir uzaylı düzenine karşı hattı tut. Atış bekleme süresi, mermi listeleri, grup hareketi, kurallardan doğan hızlanma ve düşman ateşi. (21 adım)
Amiral Battı: Seninkini batırmadan önce düşman filosunu batır ve bilgisayara avlanmayı öğret. Asla örtüşmeyen rastgele filolar, iki taraf için tek bir ateş fonksiyonu, sıralar ve ölçebileceğin üç bilgisayar oyuncusu: rastgele (yaklaşık 95 atış), avla ve hedefle (yaklaşık 56) ve her olası gemi konumunun ısı haritası (yaklaşık 44). (35 adım)
Missile Command Tarzı Savunma: Gökyüzüne tıklayarak önleyici füzeler at ve altı şehri düşen füzelerden koru. Bir hedefe belirli bir hızla ilerlemek, büyüyüp küçülen patlamalar, zincirleme tepkimeler, sınırlı cephane, dalgalar ve bölünen füzeler. (35 adım)
Bomberman Tarzı Arena: Sandıkları patlatarak ilerle ve düşmanları kıstır. Duvarlardan, sütunlardan ve sandıklardan bir ızgara, kareden kareye kayma, fitilli bombalar, duvarlarda duran ve zincirleme tepkimeler başlatan artı şeklinde patlamalar, dolaşan düşmanlar, bir Map'te tutulan güçlendirmeler ve klavyenin kurallarını yeniden kullanan dokunmatik kontroller. (42 adım)
Asteroids: Dön, it ve parçalanan kayalardan oluşan bir alanda ateş et. cos ve sin ile açılar ve vektörler, eylemsizlik, ekran kenarından dolaşma, vektörel çizim ve daire çarpışmaları. (41 adım)
Bilardo: Masayı olabildiğince az vuruşla temizle. Bir açıdan hız, sürtünme ve bantlar, eşit toplar arasında esnek çarpışmalar (ve neden 90 derece açıyla ayrıldıkları), cepler, sapan gibi nişan, hızlı vuruşlar için daha küçük fizik adımları ve çarpmayı önceden gösteren bir hayalet top. (33 adım)
Pac-Man Tarzı Labirent Kovalamaca: Dört hayalet seni avlarken labirentteki her yemi ye. Döşemeden döşemeye akıcı hareket, önceden verilen dönüşler, dört farklı kişilikte hayalet yapay zekâsı, dağılma ve kovalama modları ve avcıları av yapan güç yemleri. (42 adım)
Pinball: İki paletle topu oyunda tut. Doğru parçalarından yapılmış bir masa, en yakın nokta ve normal ile topu herhangi bir çizgiden sektirmek, enerji ekleyen tamponlar, dönen paletler, paletin topu fırlatmasını sağlayan göreli hız numarası, yaylı bir fırlatıcı ve iki başparmaklı dokunmatik kontroller. (42 adım)
Wolfenstein Tarzı 3B Labirent: İlk 3B nişancı oyunlarının yaptığı gibi, düz bir haritadan çizilen 3B bir labirentte yürü. sin ve cos ile açılar, duvar boyunca kaymak, bir ızgarada ışın göndermek (DDA), perspektif, balık gözü düzeltmesi ve gölgelendirme. (18 adım)
Satranç: Eksiksiz bir satranç oyunu ve onu oynayan bir bilgisayar yap. Veri olarak hamle desenleri, şahtan dışarı bakarak bulunan şah, deneyip geri alarak yasal hamleler, rok, geçerken alma, terfi, mat ve alfa-beta budamalı minimax arama. (48 adım)
OutRun Tarzı Yarış: Gerçek 3B'den önce atari yarış oyunlarının yaptığı gibi, sahte 3B'de kıvrılan bir yolda yarış. Perspektif izdüşümü, uzaktan yakına boyama, virajların çekişine karşı direksiyon, uzaklaştıkça küçülen arabalar ve tur süreleri. (44 adım)
Zelda Tarzı Zindan: Dört odayı keşfet, kılıçla savaş, anahtarı bul, kapıyı aç ve kaç. Metin olarak yazılan odalar, duvar boyunca yürüyüp kaymak, odalar arasında geçiş, bir kılıç çarpışma kutusu, dolaşan ve kovalayan düşmanlar, kalpler, anahtarlar ve aldıklarını hatırlayan bir dünya. (22 adım)
Scorched Earth Tarzı Topçu: Tepelerin üstünden bir bilgisayar rakibe mermi at. Toplanan sinüs dalgalarından bir yükseklik haritası olarak saklanan tepeler, açı ve güçle nişan (ve atan2 tuzağı), kare kare uçuş, zemine kazılan yuvarlak kraterler, uzaklıkla azalan hasar, rüzgâr ve binlerce atışı hayal ederek nişan alan bir bilgisayar. (23 adım)
Angry Birds Tarzı Sapan: Tahta ve taş kulelere kuş fırlat ve domuzları devir. Bir açı ve bir çekişle nişan almak, yerçekimi ve (atmadan önce çizilen) parabol, kütlelerine göre yığılan, iten ve seken kutular, sert çarpmalardan gelen hasar, seviye başına üç kuş ve veri olarak yazılıp ayakta durduğu test edilen seviyeler. (47 adım)