{"id":16844,"date":"2025-04-01T06:45:17","date_gmt":"2025-04-01T03:45:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/kendi-etkilesimli-3b-zar-atma-oyununuzu-olusturun\/"},"modified":"2025-04-01T06:45:17","modified_gmt":"2025-04-01T03:45:17","slug":"kendi-etkilesimli-3b-zar-atma-oyununuzu-olusturun","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/kendi-etkilesimli-3b-zar-atma-oyununuzu-olusturun\/","title":{"rendered":"Kendi Etkile\u015fimli 3B Zar Atma Oyununuzu Olu\u015fturun"},"content":{"rendered":"

<\/p>\n

Kendi Etkile\u015fimli 3B Zar Atma Oyununuzu Olu\u015fturun<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte kendi etkile\u015fimli 3B zar atma oyununuzu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu e\u011flenceli projede HTML, CSS ve JavaScript’in temel yeteneklerini kullanaca\u011f\u0131z. Sonu\u00e7 olarak, kendi \u00f6zelle\u015ftirebilece\u011finiz ve arkada\u015flar\u0131n\u0131zla payla\u015fabilece\u011finiz harika bir uygulama elde edeceksiniz. \u00d6ncelikle, projenin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n

Proje Yap\u0131s\u0131n\u0131n Olu\u015fturulmas\u0131<\/h2>\n

\u0130lk ad\u0131m olarak, projemizin temel HTML yap\u0131s\u0131n\u0131 olu\u015fturmam\u0131z gerekiyor. Bu yap\u0131, zar\u0131m\u0131z\u0131n g\u00f6r\u00fcnt\u00fclenece\u011fi bir kapsay\u0131c\u0131 ve zar atma d\u00fc\u011fmesini i\u00e7erecektir. A\u015fa\u011f\u0131daki kod blo\u011funu kullanarak ba\u015flayabiliriz:<\/p>\n

\n<!DOCTYPE html>\n<html>\n<head>\n  <title>3B Zar Atma Oyunu<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n  <div id=\"dice-container\"><\/div>\n  <button id=\"roll-button\">Zar At<\/button>\n  <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
Bu kod,  dice-container adl\u0131 bir div elementi ve  roll-button adl\u0131 bir d\u00fc\u011fme olu\u015fturur.  style.css dosyas\u0131 CSS stil bilgilerini, script.js dosyas\u0131 ise JavaScript fonksiyonlar\u0131n\u0131 i\u00e7erecektir.  \u015eimdi, bu dosyalar\u0131 olu\u015ftural\u0131m ve i\u00e7eriklerini doldurabiliriz.<\/p>\n
CSS ile G\u00f6rsel Tasar\u0131m<\/h2>\n
  style.css dosyam\u0131zda, zar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve di\u011fer elemanlar\u0131n yerle\u015fimini d\u00fczenleyece\u011fiz.  Bu k\u0131s\u0131m tamamen sizin tasar\u0131m zevkinize kalm\u0131\u015ft\u0131r.  \u00d6rne\u011fin, zar\u0131n boyutunu, rengini ve g\u00f6lgelenmesini bu dosyada ayarlayabilirsiniz.  \u0130\u015fte basit bir \u00f6rnek:<\/p>\n
\n#dice-container {\n  width: 100px;\n  height: 100px;\n  perspective: 800px; \/* 3B efekti i\u00e7in *\/\n}\n\n#dice-container div {\n  width: 100px;\n  height: 100px;\n  transform-style: preserve-3d; \/* 3B d\u00f6n\u00fc\u015f\u00fcmleri i\u00e7in *\/\n  transition: transform 0.5s; \/* D\u00f6n\u00fc\u015f\u00fcm animasyonu i\u00e7in *\/\n}\n<\/code><\/pre>\n
Bu CSS kodu, zar\u0131n 3B g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve animasyonunu sa\u011flar.  Daha detayl\u0131 stillemeler i\u00e7in CSS3’\u00fcn 3B d\u00f6n\u00fc\u015f\u00fcm \u00f6zelliklerini ara\u015ft\u0131rabilirsiniz.<\/p>\n
JavaScript ile Etkile\u015fim<\/h2>\n
Son olarak,  script.js dosyas\u0131nda, zar atma mekani\u011fini ve sonu\u00e7lar\u0131n g\u00f6sterimini y\u00f6netece\u011fiz.  Bu k\u0131s\u0131mda, rastgele say\u0131 \u00fcretme ve zar\u0131n d\u00f6nd\u00fcrme animasyonunu olu\u015fturma gibi i\u015flemler yapaca\u011f\u0131z.  A\u015fa\u011f\u0131daki kod, zar\u0131n rastgele bir say\u0131 \u00fcretmesini ve sonucu ekrana yazd\u0131rmas\u0131n\u0131 sa\u011flar:<\/p>\n
\nconst diceContainer = document.getElementById('dice-container');\nconst rollButton = document.getElementById('roll-button');\n\nrollButton.addEventListener('click', () => {\n  const randomNumber = Math.floor(Math.random() * 6) + 1;\n  diceContainer.textContent = randomNumber;\n});\n<\/code><\/pre>\n
Bu basit \u00f6rnek, zar\u0131n sonucunu sadece metin olarak g\u00f6steriyor.  Ger\u00e7ek bir 3B zar efekti i\u00e7in daha karma\u015f\u0131k JavaScript kodu ve muhtemelen bir 3B modelleme k\u00fct\u00fcphanesi kullanman\u0131z gerekecektir.  Daha geli\u015fmi\u015f \u00f6rnekler i\u00e7in  web sitemi<\/a> ziyaret edebilirsiniz.  Ayr\u0131ca, Three.js gibi 3B grafik k\u00fct\u00fcphaneleri kullanarak daha ger\u00e7ek\u00e7i bir 3B zar deneyimi yaratabilirsiniz.  Bu k\u00fct\u00fcphanelerin kullan\u0131m\u0131n\u0131 \u00f6\u011frenmek i\u00e7in bir\u00e7ok online kaynak mevcuttur.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu ad\u0131m ad\u0131m k\u0131lavuz, kendi etkile\u015fimli 3B zar atma oyununuzu olu\u015fturmak i\u00e7in temel bir \u00e7er\u00e7eve sa\u011flamaktad\u0131r.  Bu basit \u00f6rnek \u00fczerinden daha geli\u015fmi\u015f \u00f6zellikler ekleyerek oyununuzu ki\u015fiselle\u015ftirebilirsiniz.  \u00d6rne\u011fin, farkl\u0131 zar t\u00fcrleri ekleyebilir, animasyonlar\u0131 geli\u015ftirebilir ve hatta oyun skorlar\u0131n\u0131 takip edebilirsiniz.  Unutmay\u0131n, web geli\u015ftirme s\u00fcrekli \u00f6\u011frenmeyi gerektirir; bu nedenle yeni teknikleri ve k\u00fct\u00fcphaneleri ke\u015ffetmekten \u00e7ekinmeyin!<\/p>\n
Daha fazla bilgi ve kaynak i\u00e7in a\u015fa\u011f\u0131daki ba\u011flant\u0131lar\u0131 inceleyebilirsiniz:<\/p>\n