clearRect<\/a> metodu ile t\u00fcm alan\u0131 temizlemek ve sonra yeniden \u00e7izmek. Bir di\u011fer \u00f6nemli optimizasyon tekni\u011fi ise “caching” (\u00f6nbelle\u011fe alma) ve “batching” (grupland\u0131rma) kullanmakt\u0131r. S\u0131k kullan\u0131lan veya de\u011fi\u015fmeyen g\u00f6rsel \u00f6\u011feleri (\u00f6rne\u011fin, statik arkaplanlar veya men\u00fc elemanlar\u0131) ayr\u0131 bir Canvas’a \u00f6nceden \u00e7izerek bir ‘resim’ gibi depolayabilir ve ana oyun Canvas’\u0131na do\u011frudan \u00e7izebilirsiniz. Bu, her karede ayn\u0131 karma\u015f\u0131k \u00e7izim komutlar\u0131n\u0131 tekrar tekrar \u00e7al\u0131\u015ft\u0131rmak yerine, basit bir resim kopyalama i\u015flemi yapman\u0131z\u0131 sa\u011flar. Ayn\u0131 \u015fekilde, benzer \u00f6zellikteki \u00e7izim komutlar\u0131n\u0131 (\u00f6rne\u011fin, ayn\u0131 renkteki t\u00fcm kareleri) bir araya getirerek tek seferde \u00e7izmek, taray\u0131c\u0131n\u0131n i\u015f y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n\u0130\u015fte basit bir Canvas kurulumu ve \u00e7izim \u00f6rne\u011fi:<\/p>\n
\n\n\n\n \n \n Canvas Optimizasyonu \u00d6rne\u011fi<\/title>\n <style>\n body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }\n canvas { border: 1px solid #ccc; background-color: #fff; }\n <\/style>\n<\/head>\n<body>\n <canvas id=\"gameCanvas\" width=\"800\" height=\"600\"><\/canvas>\n\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n\n let x = 50;\n let y = 50;\n let dx = 2; \/\/ Hareket h\u0131z\u0131\n\n function drawSquare() {\n ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ T\u00fcm alan\u0131 temizle\n ctx.fillStyle = 'blue';\n ctx.fillRect(x, y, 50, 50); \/\/ Kare \u00e7iz\n }\n\n function update() {\n x += dx;\n if (x + 50 > canvas.width || x < 0) {\n dx *= -1; \/\/ Kenarlara \u00e7arpt\u0131\u011f\u0131nda y\u00f6n de\u011fi\u015ftir\n }\n }\n\n function gameLoop() {\n update();\n drawSquare();\n requestAnimationFrame(gameLoop); \/\/ Taray\u0131c\u0131n\u0131n en uygun zaman\u0131nda tekrar \u00e7a\u011f\u0131r\n }\n\n gameLoop();\n <\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>requestAnimationFrame<\/code> kullanarak taray\u0131c\u0131n\u0131n kendi optimizasyonlar\u0131ndan faydalan\u0131yoruz ve Canvas \u00fczerinde do\u011frudan \u00e7izim yaparak DOM manip\u00fclasyonundan ka\u00e7\u0131n\u0131yoruz. Bu, \u00f6zellikle s\u00fcrekli animasyonlar\u0131n ve etkile\u015fimlerin oldu\u011fu bulmaca oyunlar\u0131nda, p\u00fcr\u00fczs\u00fcz bir kullan\u0131c\u0131 deneyimi i\u00e7in kritik bir ad\u0131md\u0131r. Ek olarak, e\u011fer oyununuzda bir\u00e7ok k\u00fc\u00e7\u00fck, tekrarlayan g\u00f6rsel \u00f6\u011fe varsa, bunlar\u0131 tek bir b\u00fcy\u00fck sprite sheet (resim atlas\u0131) \u00fczerinde toplay\u0131p, sadece ihtiyac\u0131n\u0131z olan k\u0131sm\u0131 \u00e7izmek de performans a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck fark yarat\u0131r. Bu \u015fekilde, taray\u0131c\u0131n\u0131n daha az resim y\u00fcklemesi ve daha az \"context switch\" yapmas\u0131 sa\u011flan\u0131r, bu da GPU (Grafik \u0130\u015flem Birimi) y\u00fck\u00fcn\u00fc azaltarak genel performans\u0131 art\u0131r\u0131r.<\/p>\n<h3>G\u00f6rsel Varl\u0131k Y\u00f6netimi ve Bellek Optimizasyonu: Oyunlar\u0131n\u0131z\u0131n Kaynak T\u00fcketimi Nas\u0131l Azalt\u0131l\u0131r?<\/h3>\n<p>HTML5 bulmaca oyunlar\u0131n\u0131n performans\u0131 s\u00f6z konusu oldu\u011funda, yaln\u0131zca JavaScript kodu ve render d\u00f6ng\u00fcs\u00fc de\u011fil, ayn\u0131 zamanda g\u00f6rsel ve i\u015fitsel varl\u0131klar\u0131n y\u00f6netimi de kritik bir rol oynar. B\u00fcy\u00fck boyutlu resimler, uzun ses dosyalar\u0131 veya gereksiz animasyon kareleri, oyununuzun y\u00fcklenme s\u00fcresini uzatabilir ve \u00e7al\u0131\u015fma zaman\u0131nda bellek t\u00fcketimini art\u0131rarak tak\u0131lmalara yol a\u00e7abilir. \u00d6zellikle mobil cihazlarda k\u0131s\u0131tl\u0131 bellek kaynaklar\u0131 d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, varl\u0131k optimizasyonu bir zorunluluktur.<\/p>\n<p>\u0130lk ad\u0131m, g\u00f6rsellerinizi optimize etmektir. Bir bulmaca oyununda genellikle \u00e7ok say\u0131da k\u00fc\u00e7\u00fck g\u00f6rsel (ta\u015f ikonlar\u0131, butonlar, arkaplan par\u00e7alar\u0131) bulunur. Bu g\u00f6rselleri ayr\u0131 ayr\u0131 y\u00fcklemek yerine, bir \"sprite sheet\" (veya sprite atlas\u0131) kullanarak tek bir b\u00fcy\u00fck resim dosyas\u0131 i\u00e7inde birle\u015ftirmek en yayg\u0131n ve etkili y\u00f6ntemdir. Bu sayede taray\u0131c\u0131n\u0131n daha az HTTP iste\u011fi yapmas\u0131 sa\u011flan\u0131r, bu da y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r. Ayr\u0131ca, g\u00f6rsellerin dosya boyutunu d\u00fc\u015f\u00fcrmek i\u00e7in s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131 (TinyPNG, Compressor.io gibi) kullanmak ve do\u011fru format\u0131 (PNG transparanl\u0131k gerektiriyorsa, JPG foto\u011frafik g\u00f6rseller i\u00e7in) se\u00e7mek \u00f6nemlidir. Gereksiz derecede y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rsellerden ka\u00e7\u0131nmal\u0131s\u0131n\u0131z; bir g\u00f6rselin ekranda g\u00f6r\u00fcnece\u011fi maksimum boyutu a\u015fan \u00e7\u00f6z\u00fcn\u00fcrl\u00fck gereksiz bellek ve bant geni\u015fli\u011fi t\u00fcketimine neden olur.<\/p>\n<p>Ses varl\u0131klar\u0131 i\u00e7in de benzer prensipler ge\u00e7erlidir. K\u00fc\u00e7\u00fck ses efektleri (t\u0131klama, e\u015fle\u015fme sesleri) i\u00e7in genellikle d\u00fc\u015f\u00fck bit h\u0131zl\u0131 MP3 veya OGG formatlar\u0131 tercih edilebilir. Arka plan m\u00fczi\u011fi i\u00e7in d\u00f6ng\u00fcsel (looping) ve uygun s\u0131k\u0131\u015ft\u0131rma oran\u0131na sahip dosyalar kullanmak performans\u0131 art\u0131r\u0131r. T\u00fcm ses dosyalar\u0131n\u0131 oyunun ba\u015flang\u0131c\u0131nda y\u00fcklemek yerine, \"lazy loading\" (tembel y\u00fckleme) stratejisini benimseyebilirsiniz. Yani, sadece o anda ihtiya\u00e7 duyulan veya k\u0131sa s\u00fcre i\u00e7inde kullan\u0131lacak varl\u0131klar\u0131 y\u00fcklemek, oyunun ilk y\u00fckleme s\u00fcresini k\u0131salt\u0131r. \u00d6rne\u011fin, ana men\u00fcde sadece men\u00fc varl\u0131klar\u0131 y\u00fcklenirken, oyun ba\u015flad\u0131\u011f\u0131nda seviye varl\u0131klar\u0131 y\u00fcklenir.<\/p>\n<p>Bellek y\u00f6netimi a\u00e7\u0131s\u0131ndan ise, JavaScript'in \"garbage collection\" (\u00e7\u00f6p toplama) mekanizmas\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir. Olu\u015fturdu\u011funuz ve art\u0131k kullanmad\u0131\u011f\u0131n\u0131z nesnelerin bellekten do\u011fru \u015fekilde temizlenmesi gerekir. \u00d6zellikle oyun d\u00f6ng\u00fcs\u00fc i\u00e7inde s\u0131k s\u0131k yeni nesneler olu\u015fturmaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z. Bunun yerine, \"object pooling\" (nesne havuzu) tekni\u011fini kullanabilirsiniz. Bu teknik, belirli bir t\u00fcrden nesneleri (\u00f6rne\u011fin, mermi objeleri, patlama efektleri) \u00f6nceden olu\u015fturup bir havuzda tutmay\u0131 ve ihtiya\u00e7 duyuldu\u011funda bu havuzdan al\u0131p kullanmay\u0131, i\u015fleri bitti\u011finde ise havuza geri g\u00f6ndermeyi i\u00e7erir. Bu, s\u00fcrekli nesne olu\u015fturma ve yok etme maliyetini ortadan kald\u0131r\u0131r, garbage collector'\u0131n daha az \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve tak\u0131lmalar\u0131 \u00f6nler.<\/p>\n<p>\u0130\u015fte bir sprite sheet'ten bir par\u00e7ay\u0131 \u00e7izme \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-javascript\">\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst spriteSheet = new Image();\nspriteSheet.src = 'assets\/puzzle-sprites.png'; \/\/ \u00d6rnek sprite sheet dosya yolu\n\nspriteSheet.onload = () => {\n \/\/ Sprite sheet y\u00fcklendi\u011finde, belirli bir kareyi \u00e7izebiliriz\n \/\/ \u00d6rne\u011fin, sprite sheet'in (10, 10) konumundan ba\u015flayan, 32x32 boyutundaki bir ta\u015f\u0131 \u00e7izelim.\n const sourceX = 10; \/\/ Sprite sheet \u00fczerinde kayna\u011f\u0131n X koordinat\u0131\n const sourceY = 10; \/\/ Sprite sheet \u00fczerinde kayna\u011f\u0131n Y koordinat\u0131\n const sourceWidth = 32; \/\/ Kaynak geni\u015fli\u011fi\n const sourceHeight = 32; \/\/ Kaynak y\u00fcksekli\u011fi\n\n const destX = 100; \/\/ Canvas \u00fczerinde hedefin X koordinat\u0131\n const destY = 100; \/\/ Canvas \u00fczerinde hedefin Y koordinat\u0131\n const destWidth = 64; \/\/ Canvas \u00fczerinde hedef geni\u015fli\u011fi (iste\u011fe ba\u011fl\u0131 olarak b\u00fcy\u00fct\u00fclebilir)\n const destHeight = 64; \/\/ Canvas \u00fczerinde hedef y\u00fcksekli\u011fi\n\n ctx.drawImage(\n spriteSheet,\n sourceX, sourceY, sourceWidth, sourceHeight, \/\/ Kaynak dikd\u00f6rtgen\n destX, destY, destWidth, destHeight \/\/ Hedef dikd\u00f6rtgen\n );\n};\n<\/pre>\n<p><\/code><\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: WebP format\u0131, PNG ve JPEG'e g\u00f6re genellikle daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 ve kalite sunar. G\u00f6rsel varl\u0131klar\u0131n\u0131z i\u00e7in WebP kullanmay\u0131 d\u00fc\u015f\u00fcnerek dosya boyutlar\u0131n\u0131 %25-35 oran\u0131nda azaltabilirsiniz, bu da y\u00fckleme s\u00fcrelerini ve bellek kullan\u0131m\u0131n\u0131 do\u011frudan iyile\u015ftirir. T\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenmese de, modern taray\u0131c\u0131lar i\u00e7in b\u00fcy\u00fck bir performans kazanc\u0131 sa\u011flayabilir.\n<\/div>\n<h2>JavaScript Kodu Optimizasyonu: Oyun Mant\u0131\u011f\u0131n\u0131z\u0131 Daha Verimli Hale Nas\u0131l Getirirsiniz?<\/h2>\n<p>Bir HTML5 bulmaca oyununun kalbi, genellikle JavaScript kodunda yatar. Oyunun mant\u0131\u011f\u0131, bulmaca \u00e7\u00f6zme algoritmalar\u0131, kullan\u0131c\u0131 giri\u015flerini i\u015fleme, puan hesaplamalar\u0131 ve animasyonlar\u0131n zamanlamas\u0131 gibi her \u015fey JavaScript taraf\u0131ndan y\u00f6netilir. Dolay\u0131s\u0131yla, JavaScript kodunuzun verimlili\u011fi, oyununuzun genel performans\u0131 \u00fczerinde do\u011frudan ve b\u00fcy\u00fck bir etkiye sahiptir. K\u00f6t\u00fc optimize edilmi\u015f bir JavaScript kodu, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke ederek, oyunun tak\u0131lmas\u0131na ve hatta tamamen donmas\u0131na neden olabilir.<\/p>\n<p>JavaScript kodunu optimize etmenin ilk ad\u0131m\u0131, algoritmik verimlili\u011fi g\u00f6z \u00f6n\u00fcnde bulundurmakt\u0131r. \u00d6zellikle matris tabanl\u0131 bulmaca oyunlar\u0131nda (\u00f6rne\u011fin, e\u015fle\u015ftirme oyunlar\u0131, Sudoku benzeri yap\u0131lar), d\u00f6ng\u00fcler ve dizi i\u015flemleri \u00e7ok s\u0131k kullan\u0131l\u0131r. \u0130\u00e7 i\u00e7e d\u00f6ng\u00fclerden ka\u00e7\u0131nmak veya d\u00f6ng\u00fc say\u0131s\u0131n\u0131 azaltmak, karma\u015f\u0131k hesaplamalar\u0131 oyun d\u00f6ng\u00fcs\u00fcn\u00fcn d\u0131\u015f\u0131na ta\u015f\u0131mak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. \u00d6rne\u011fin, bir matriste bo\u015f yer ararken her seferinde t\u00fcm matrisi taramak yerine, sadece ilgili b\u00f6lgeyi kontrol etmek veya daha verimli veri yap\u0131lar\u0131 kullanmak b\u00fcy\u00fck fark yarat\u0131r. Basit bir \u00f6rnek olarak, bir dizide bir eleman ararken <code>for<\/code> d\u00f6ng\u00fcs\u00fc yerine <code>find()<\/code> veya <code>findIndex()<\/code> gibi yerle\u015fik metotlar\u0131 kullanmak genellikle daha okunabilir ve taray\u0131c\u0131 motorlar\u0131 taraf\u0131ndan optimize edildi\u011fi i\u00e7in bazen daha h\u0131zl\u0131 olabilir.<\/p>\n<p>Oyun d\u00f6ng\u00fcs\u00fc (game loop) optimizasyonu, ak\u0131c\u0131 animasyonlar i\u00e7in hayati \u00f6neme sahiptir. Daha \u00f6nce de bahsedildi\u011fi gibi, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\" target=\"_blank\"><code>requestAnimationFrame<\/code><\/a> kullanmak, taray\u0131c\u0131n\u0131n en uygun zamanda \u00e7izim yapmas\u0131n\u0131 sa\u011flayarak 60 FPS hedefine ula\u015fmaya yard\u0131mc\u0131 olur. Ancak oyun d\u00f6ng\u00fcs\u00fc i\u00e7inde yap\u0131lan i\u015flemlerin s\u00fcresi de \u00e7ok \u00f6nemlidir. Her karede \u00e7ok fazla hesaplama yapmak, <code>requestAnimationFrame<\/code>'\u0131n faydalar\u0131n\u0131 ortadan kald\u0131rabilir. Bu nedenle, a\u011f\u0131r hesaplamalar\u0131 veya mant\u0131ksal g\u00fcncellemeleri, her karede de\u011fil, daha seyrek aral\u0131klarla (\u00f6rne\u011fin, her 5 veya 10 karede bir) yapmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz, tabii ki bu, oyun mant\u0131\u011f\u0131n\u0131z\u0131 etkilemeyecekse.<\/p>\n<p>Bellek tahsisini minimumda tutmak da JavaScript performans\u0131n\u0131 art\u0131r\u0131r. JavaScript motorlar\u0131, yeni nesneler olu\u015fturuldu\u011funda bellek tahsis eder ve art\u0131k eri\u015filemeyen nesneler i\u00e7in \"garbage collection\" yapar. S\u00fcrekli olarak yeni nesneler olu\u015fturup yok etmek (\u00f6rne\u011fin, her karede yeni vekt\u00f6r nesneleri olu\u015fturmak), \u00e7\u00f6p toplay\u0131c\u0131n\u0131n s\u0131k s\u0131k \u00e7al\u0131\u015fmas\u0131na ve oyunun tak\u0131lmas\u0131na neden olabilir. Bu nedenle, yukar\u0131da bahsedilen \"object pooling\" tekni\u011fi, \u00f6zellikle s\u0131k kullan\u0131lan ve k\u0131sa \u00f6m\u00fcrl\u00fc nesneler i\u00e7in olduk\u00e7a etkilidir. \u00d6rne\u011fin, animasyon efektleri, ge\u00e7ici skor g\u00f6stergeleri veya bir patlama an\u0131ndaki par\u00e7ac\u0131klar i\u00e7in bir havuz olu\u015fturabilirsiniz. Nesneleri yeniden kullanarak, bellek tahsis ve serbest b\u0131rakma d\u00f6ng\u00fcs\u00fcn\u00fc minimize edersiniz.<\/p>\n<p>\u0130\u015fte <code>requestAnimationFrame<\/code> ve temel bir nesne havuzu (object pooling) konsepti \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Oyun D\u00f6ng\u00fcs\u00fc i\u00e7in requestAnimationFrame kullan\u0131m\u0131\nfunction gameLoop() {\n updateGameLogic(); \/\/ Oyun mant\u0131\u011f\u0131n\u0131 g\u00fcncelle\n renderGame(); \/\/ G\u00f6rselleri \u00e7iz\n requestAnimationFrame(gameLoop); \/\/ Bir sonraki kare i\u00e7in kendini tekrar \u00e7a\u011f\u0131r\n}\n\/\/ gameLoop(); \/\/ Oyun ba\u015flad\u0131\u011f\u0131nda \u00e7a\u011f\u0131r\u0131n\n\n\/\/ Basit bir nesne havuzu (Object Pool) \u00f6rne\u011fi\nclass Particle {\n constructor() {\n this.active = false;\n this.x = 0;\n this.y = 0;\n this.dx = 0;\n this.dy = 0;\n this.color = 'red';\n }\n\n init(x, y, dx, dy, color) {\n this.active = true;\n this.x = x;\n this.y = y;\n this.dx = dx;\n this.dy = dy;\n this.color = color;\n }\n\n update() {\n if (!this.active) return;\n this.x += this.dx;\n this.y += this.dy;\n \/\/ Basit bir aktiflik kontrol\u00fc\n if (this.x < 0 || this.x > 800 || this.y < 0 || this.y > 600) {\n this.active = false; \/\/ Ekran d\u0131\u015f\u0131na \u00e7\u0131kt\u0131\u011f\u0131nda deaktive et\n }\n }\n\n draw(ctx) {\n if (!this.active) return;\n ctx.fillStyle = this.color;\n ctx.fillRect(this.x, this.y, 5, 5);\n }\n}\n\nclass ParticlePool {\n constructor(size) {\n this.pool = [];\n for (let i = 0; i < size; i++) {\n this.pool.push(new Particle());\n }\n }\n\n get() {\n for (let i = 0; i < this.pool.length; i++) {\n if (!this.pool[i].active) {\n return this.pool[i];\n }\n }\n \/\/ E\u011fer havuzda bo\u015f yer yoksa, havuzu dinamik olarak b\u00fcy\u00fctme veya null d\u00f6nd\u00fcrme\n \/\/ Ger\u00e7ek bir uygulamada havuzun b\u00fcy\u00fcmesi veya bir limit konmas\u0131 gerekebilir.\n console.warn(\"Particle havuzu dolu, yeni nesne olu\u015fturuluyor!\");\n const newParticle = new Particle();\n this.pool.push(newParticle);\n return newParticle;\n }\n\n updateAll(ctx) {\n this.pool.forEach(particle => {\n particle.update();\n particle.draw(ctx);\n });\n }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi:\n\/\/ const particlePool = new ParticlePool(50); \/\/ 50 par\u00e7ac\u0131k kapasiteli havuz\n\n\/\/ Bir patlama an\u0131nda par\u00e7ac\u0131k olu\u015fturma\n\/\/ function createExplosion(x, y) {\n\/\/ for (let i = 0; i < 10; i++) {\n\/\/ const p = particlePool.get();\n\/\/ if (p) {\n\/\/ const angle = Math.random() * Math.PI * 2;\n\/\/ const speed = Math.random() * 5 + 1;\n\/\/ p.init(x, y, Math.cos(angle) * speed, Math.sin(angle) * speed, 'orange');\n\/\/ }\n\/\/ }\n\/\/ }\n<\/pre>\n<p><\/code><\/p>\n<p>Son olarak, modern JavaScript \u00f6zelliklerini ve taray\u0131c\u0131 API'lar\u0131n\u0131 do\u011fru kullanmak da performans\u0131 art\u0131rabilir. \u00d6rne\u011fin, <code>const<\/code> ve <code>let<\/code> kullanarak de\u011fi\u015fkenlerin kapsam\u0131n\u0131 daha iyi y\u00f6netmek, beklenmedik bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nleyebilir. Mod\u00fcl sistemlerini (ES Modules) kullanmak, kodunuzu daha y\u00f6netilebilir hale getirir ve baz\u0131 bundler ara\u00e7lar\u0131 (Webpack, Rollup) ile tree-shaking gibi optimizasyonlara olanak tan\u0131r. Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 (\u00f6zellikle Performans ve Bellek sekmeleri) d\u00fczenli olarak kullanarak darbo\u011fazlar\u0131 tespit etmek ve kodunuzu buna g\u00f6re iyile\u015ftirmek, s\u00fcrekli bir geli\u015ftirme s\u00fcrecinin par\u00e7as\u0131 olmal\u0131d\u0131r.<\/p>\n<h3>Mobil Cihazlar \u0130\u00e7in Duyarl\u0131l\u0131k ve Performans: Her Ekranda Sorunsuz Deneyim Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n<p>Mobil cihazlar, HTML5 oyunlar\u0131 i\u00e7in hem en b\u00fcy\u00fck potansiyeli hem de en b\u00fcy\u00fck zorluklar\u0131 sunar. Ak\u0131ll\u0131 telefonlar ve tabletler, masa\u00fcst\u00fc bilgisayarlara g\u00f6re daha k\u0131s\u0131tl\u0131 i\u015flem g\u00fcc\u00fcne, daha az belle\u011fe ve farkl\u0131 bir giri\u015f y\u00f6ntemine (dokunmatik) sahiptir. Bu nedenle, bir bulmaca oyununu mobil cihazlarda da sorunsuz ve h\u0131zl\u0131 bir \u015fekilde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in \u00f6zel duyarl\u0131l\u0131k (responsiveness) ve performans optimizasyonlar\u0131na ihtiya\u00e7 duyulur.<\/p>\n<p>Duyarl\u0131l\u0131k, oyununuzun farkl\u0131 ekran boyutlar\u0131na ve y\u00f6nlendirmelerine (dikey\/yatay) dinamik olarak uyum sa\u011flayabilmesi anlam\u0131na gelir. Bu genellikle CSS Media Queries kullan\u0131larak sa\u011flan\u0131r. Oyununuzun Canvas boyutu, aray\u00fcz elemanlar\u0131n\u0131n konumu ve boyutu gibi \u00f6zellikler, cihaz\u0131n ekran boyutuna g\u00f6re ayarlanmal\u0131d\u0131r. \u00d6rne\u011fin, daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in daha b\u00fcy\u00fck dokunmatik butonlar kullanmak veya belirli g\u00f6rsel \u00f6\u011feleri gizlemek kullan\u0131c\u0131 deneyimini iyile\u015ftirebilir. Oyunun \u00f6l\u00e7eklendirmesini yaparken, g\u00f6rsellerin bulan\u0131k g\u00f6r\u00fcnmesini engellemek i\u00e7in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/devicePixelRatio\" target=\"_blank\"><code>window.devicePixelRatio<\/code><\/a> de\u011ferini g\u00f6z \u00f6n\u00fcnde bulundurarak Canvas'\u0131 uygun piksel yo\u011funlu\u011funda \u00e7izmek \u00f6nemlidir. Y\u00fcksek yo\u011funluklu (Retina) ekranlarda g\u00f6rsellerin keskin g\u00f6r\u00fcnmesi i\u00e7in Canvas'\u0131n kendi \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc (width ve height nitelikleri) iki kat\u0131na \u00e7\u0131kar\u0131p, CSS ile istedi\u011finiz g\u00f6r\u00fcn\u00fcr boyuta \u00f6l\u00e7eklendirebilirsiniz.<\/p>\n<p>\u0130\u015fte mobil uyumlu bir Canvas i\u00e7in temel CSS ve JavaScript \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>Mobil Duyarl\u0131l\u0131k \u00d6rne\u011fi<\/title>\n <style>\n body { margin: 0; overflow: hidden; background-color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }\n canvas {\n display: block;\n background-color: #f0f0f0;\n max-width: 100vw;\n max-height: 100vh;\n object-fit: contain; \/* \u0130\u00e7eri\u011fi orant\u0131l\u0131 olarak s\u0131\u011fd\u0131r *\/\n }\n @media (orientation: portrait) {\n \/* Dikey konumdaki cihazlar i\u00e7in \u00f6zel stiller *\/\n canvas {\n width: 90vw; \/* Ekran geni\u015fli\u011finin %90'\u0131 *\/\n height: auto;\n }\n }\n @media (orientation: landscape) {\n \/* Yatay konumdaki cihazlar i\u00e7in \u00f6zel stiller *\/\n canvas {\n height: 90vh; \/* Ekran y\u00fcksekli\u011finin %90'\u0131 *\/\n width: auto;\n }\n }\n <\/style>\n<\/head>\n<body>\n <canvas id=\"gameCanvas\"><\/canvas>\n\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n\n \/\/ Canvas'\u0131 cihaz\u0131n piksel oran\u0131na g\u00f6re ayarlama\n function resizeCanvas() {\n const displayWidth = window.innerWidth;\n const displayHeight = window.innerHeight;\n\n const aspectRatio = 4 \/ 3; \/\/ Oyununuzun ideal en\/boy oran\u0131 (\u00f6rne\u011fin 4:3)\n let newWidth = displayWidth;\n let newHeight = displayWidth \/ aspectRatio;\n\n if (newHeight > displayHeight) {\n newHeight = displayHeight;\n newWidth = displayHeight * aspectRatio;\n }\n\n canvas.style.width = newWidth + 'px';\n canvas.style.height = newHeight + 'px';\n\n \/\/ Canvas'\u0131n dahili \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc cihaz piksel oran\u0131na g\u00f6re ayarla\n const dpr = window.devicePixelRatio || 1;\n canvas.width = newWidth * dpr;\n canvas.height = newHeight * dpr;\n ctx.scale(dpr, dpr); \/\/ T\u00fcm \u00e7izimlerin do\u011fru \u00f6l\u00e7ekte g\u00f6r\u00fcnmesini sa\u011fla\n \n \/\/ Oyun i\u00e7eri\u011fini yeniden \u00e7iz veya \u00f6l\u00e7eklendir\n drawGameContent(newWidth, newHeight); \n }\n\n function drawGameContent(width, height) {\n ctx.clearRect(0, 0, canvas.width \/ (window.devicePixelRatio || 1), canvas.height \/ (window.devicePixelRatio || 1));\n ctx.fillStyle = 'green';\n ctx.fillRect(width * 0.1, height * 0.1, width * 0.8, height * 0.8); \/\/ Dinamik olarak boyutlanan bir kare\n ctx.fillStyle = 'white';\n ctx.font = '24px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Mobil Uyumlu Oyun!', width \/ 2, height \/ 2);\n }\n\n window.addEventListener('resize', resizeCanvas);\n resizeCanvas(); \/\/ Sayfa y\u00fcklendi\u011finde bir kez boyutland\u0131r\n <\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Performans taraf\u0131nda ise, dokunmatik olaylar\u0131n optimizasyonu kritik \u00f6neme sahiptir. Fare olaylar\u0131 (mousemove, click) gibi, dokunmatik olaylar (touchstart, touchmove, touchend) da taray\u0131c\u0131 taraf\u0131ndan i\u015flenir. Bu olaylar\u0131 do\u011fru y\u00f6netmek, \u00f6zellikle \u00e7oklu dokunma (multi-touch) gerektiren oyunlarda tak\u0131lmalar\u0131 \u00f6nleyebilir. Gereksiz yere olay dinleyicisi eklemekten ka\u00e7\u0131nmal\u0131 ve olaylar\u0131 m\u00fcmk\u00fcn oldu\u011funca verimli bir \u015fekilde i\u015flemelisiniz. \u00d6rne\u011fin, <code>touchmove<\/code> olay\u0131 \u00e7ok s\u0131k tetiklenebilece\u011fi i\u00e7in bu olay i\u00e7inde a\u011f\u0131r hesaplamalar yapmaktan ka\u00e7\u0131nmak veya bu hesaplamalar\u0131 debouncing\/throttling teknikleriyle s\u0131n\u0131rlamak iyi bir yakla\u015f\u0131md\u0131r. Ayr\u0131ca, mobil cihazlarda pil t\u00fcketimi de \u00f6nemlidir; s\u00fcrekli ve yo\u011fun i\u015flem g\u00fcc\u00fc gerektiren animasyonlar veya hesaplamalar pil \u00f6mr\u00fcn\u00fc h\u0131zla t\u00fcketebilir. Bu nedenle, oyununuzun performans\u0131n\u0131 optimize ederken pil dostu \u00e7\u00f6z\u00fcmlere y\u00f6nelmek, oyuncular\u0131n mobil cihazlarda daha uzun s\u00fcre oyun oynamas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Son olarak, mobil cihazlar\u0131n genellikle daha zay\u0131f GPU'lara sahip oldu\u011funu unutmay\u0131n. Bu, g\u00f6rsel efektleri ve animasyonlar\u0131 tasarlarken a\u015f\u0131r\u0131ya ka\u00e7mamak gerekti\u011fi anlam\u0131na gelir. G\u00f6lge, parlama, karma\u015f\u0131k par\u00e7ac\u0131k efektleri gibi g\u00f6rsel unsurlar\u0131n performans maliyetini dikkatlice de\u011ferlendirmelisiniz. M\u00fcmk\u00fcnse, daha basit ama etkili g\u00f6rsel yakla\u015f\u0131mlar tercih edin veya cihaz\u0131n performans\u0131na g\u00f6re dinamik olarak kalite ayarlar\u0131n\u0131 de\u011fi\u015ftirebilen bir sistem kurun. Oyununuzun a\u00e7\u0131l\u0131\u015f\u0131nda d\u00fc\u015f\u00fck kaliteli g\u00f6rsellerle ba\u015flamak ve oyuncunun cihaz\u0131 test edildi\u011finde daha y\u00fcksek kalitelere ge\u00e7mek, ilk izlenimi olumlu y\u00f6nde etkileyebilir.<\/p>\n<h2>\u0130leri D\u00fczey Optimizasyon Teknikleri: Web Workers ve Offscreen Canvas ile Paralel \u0130\u015flem G\u00fcc\u00fcn\u00fc Kullanma<\/h2>\n<p>HTML5 bulmaca oyunlar\u0131 geli\u015ftik\u00e7e, oyun mant\u0131\u011f\u0131, grafikler ve kullan\u0131c\u0131 aray\u00fcz\u00fc daha karma\u015f\u0131k hale gelebilir. Geleneksel olarak, t\u00fcm JavaScript kodu taray\u0131c\u0131n\u0131n tek bir ana i\u015f par\u00e7ac\u0131\u011f\u0131nda (main thread) \u00e7al\u0131\u015f\u0131r. Bu, hem oyunun mant\u0131\u011f\u0131n\u0131 (AI hesaplamalar\u0131, yol bulma algoritmalar\u0131, fizik sim\u00fclasyonlar\u0131) hem de kullan\u0131c\u0131 aray\u00fcz\u00fc g\u00fcncellemelerini (DOM manip\u00fclasyonu, Canvas \u00e7izimleri) ayn\u0131 anda y\u00f6netmek zorunda oldu\u011fu anlam\u0131na gelir. E\u011fer ana i\u015f par\u00e7ac\u0131\u011f\u0131 uzun s\u00fcren bir hesaplama ile me\u015fgul olursa, taray\u0131c\u0131 donar, kullan\u0131c\u0131 aray\u00fcz\u00fc yan\u0131t vermez hale gelir ve oyunun kare h\u0131z\u0131 d\u00fc\u015fer. Bu durum, \u00f6zellikle yo\u011fun grafikli veya yapay zeka i\u00e7eren bulmaca oyunlar\u0131nda ciddi bir performans darbo\u011faz\u0131 olu\u015fturur.<\/p>\n<p>Bu sorunu \u00e7\u00f6zmek i\u00e7in HTML5, JavaScript kodunuzu ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n d\u0131\u015f\u0131nda, ayr\u0131 bir arka plan i\u015f par\u00e7ac\u0131\u011f\u0131nda (background thread) \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131yan bir API sunar: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\" target=\"_blank\">Web Workers<\/a>. Web Workers, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 me\u015fgul etmeden, yo\u011fun CPU gerektiren g\u00f6revleri paralel olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. \u00d6rne\u011fin, karma\u015f\u0131k bir bulmaca tahtas\u0131nda olas\u0131 hamleleri hesaplama, en iyi hamleyi bulmak i\u00e7in bir yapay zeka algoritmas\u0131 \u00e7al\u0131\u015ft\u0131rma veya b\u00fcy\u00fck veri setlerini i\u015fleme gibi g\u00f6revleri bir Web Worker'a devredebilirsiniz. Web Worker'lar kendi global ba\u011flamlar\u0131na sahiptir ve DOM'a do\u011frudan eri\u015femezler, ancak <code>postMessage()<\/code> ve <code>onmessage<\/code> olaylar\u0131 arac\u0131l\u0131\u011f\u0131yla ana i\u015f par\u00e7ac\u0131\u011f\u0131 ile veri al\u0131\u015fveri\u015fi yapabilirler.<\/p>\n<p>\u0130\u015fte basit bir Web Worker \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ main.js (Ana i\u015f par\u00e7ac\u0131\u011f\u0131 kodu)\nconst worker = new Worker('worker.js');\n\nworker.postMessage({ type: 'startCalculation', data: { num: 100000000 } });\n\nworker.onmessage = (event) => {\n if (event.data.type === 'calculationComplete') {\n console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131: Hesaplama sonucu al\u0131nd\u0131:', event.data.result);\n \/\/ Sonu\u00e7la birlikte oyun aray\u00fcz\u00fcn\u00fc g\u00fcncelle\n }\n};\n\n\/\/ worker.js (Web Worker kodu)\nself.onmessage = (event) => {\n if (event.data.type === 'startCalculation') {\n const num = event.data.data.num;\n let sum = 0;\n for (let i = 0; i < num; i++) {\n sum += i;\n }\n self.postMessage({ type: 'calculationComplete', result: sum });\n }\n};\n<\/pre>\n<p><\/code><\/p>\n<p>Web Workers ile birlikte gelen bir di\u011fer g\u00fc\u00e7l\u00fc ara\u00e7 ise <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/OffscreenCanvas\" target=\"_blank\">OffscreenCanvas<\/a> API'sidir. Geleneksel olarak, Canvas \u00fczerinde \u00e7izim i\u015flemleri de ana i\u015f par\u00e7ac\u0131\u011f\u0131nda ger\u00e7ekle\u015fir. Ancak OffscreenCanvas ile, bir Canvas ba\u011flam\u0131n\u0131 bir Web Worker'a ta\u015f\u0131yabilir ve t\u00fcm render i\u015flemlerini ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z bir \u015fekilde arka planda ger\u00e7ekle\u015ftirebilirsiniz. Bu, \u00f6zellikle y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc veya karma\u015f\u0131k animasyonlar i\u00e7eren oyunlar i\u00e7in b\u00fcy\u00fck bir performans kazanc\u0131 sa\u011flar. Worker, t\u00fcm \u00e7izim komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r ve nihai g\u00f6r\u00fcnt\u00fcy\u00fc ana i\u015f par\u00e7ac\u0131\u011f\u0131na geri g\u00f6nderir, bu da ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n kullan\u0131c\u0131 etkile\u015fimlerine ve di\u011fer oyun mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>OffscreenCanvas kullan\u0131m\u0131, \u00f6zellikle \u00e7ok katmanl\u0131 oyunlarda, her katman\u0131 ayr\u0131 bir worker'da render edip ana i\u015f par\u00e7ac\u0131\u011f\u0131nda birle\u015ftirmek gibi geli\u015fmi\u015f senaryolara olanak tan\u0131r. Bu, CPU ve GPU kaynaklar\u0131n\u0131n daha verimli kullan\u0131lmas\u0131na yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir bulmaca oyununda, statik arkaplan\u0131 ve hareketli ta\u015flar\u0131 farkl\u0131 OffscreenCanvas'larda \u00e7izip daha sonra ana Canvas'ta birle\u015ftirebilirsiniz.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Web Workers ve OffscreenCanvas kullan\u0131rken, veri payla\u015f\u0131m\u0131 i\u00e7in transfer edilebilir nesneleri (Transferable Objects) tercih edin. Bu, verinin kopyalanmas\u0131 yerine do\u011frudan aktar\u0131lmas\u0131n\u0131 sa\u011flar ve b\u00fcy\u00fck veri setleri i\u00e7in bellek kopyalama maliyetini ortadan kald\u0131rarak performans\u0131 dramatik bir \u015fekilde art\u0131r\u0131r. \u00d6rne\u011fin, bir <code>ArrayBuffer<\/code> veya <code>ImageBitmap<\/code> objesi transfer edilebilir.\n<\/div>\n<p>Bu ileri d\u00fczey teknikler, HTML5 oyunlar\u0131n sadece basit bulmacalardan \u00e7ok daha fazlas\u0131n\u0131 yapabilece\u011fini g\u00f6sterir. Ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rakarak ve paralel i\u015flem g\u00fcc\u00fcnden faydalanarak, masa\u00fcst\u00fc veya mobil cihazlarda bile konsol kalitesinde ak\u0131c\u0131l\u0131\u011fa sahip, g\u00f6rsel olarak zengin ve karma\u015f\u0131k oyunlar geli\u015ftirmek m\u00fcmk\u00fcn hale gelir. Ancak bu tekniklerin do\u011fru uygulanmas\u0131, dikkatli bir mimari tasar\u0131m ve hata ay\u0131klama gerektirir. Oyununuzun performans darbo\u011fazlar\u0131n\u0131 do\u011fru tespit etmek ve Web Workers'\u0131 sadece ger\u00e7ekten fayda sa\u011flayacak g\u00f6revler i\u00e7in kullanmak, gereksiz karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131nmak ad\u0131na \u00f6nemlidir.<\/p>\n<h2>Vaka Analizi: B\u00fcy\u00fck Bir Bulmaca Oyununda Performans Sorunlar\u0131 Nas\u0131l \u00c7\u00f6z\u00fcld\u00fc?<\/h2>\n<p>Hayali bir senaryo \u00fczerinden, b\u00fcy\u00fck bir HTML5 e\u015fle\u015ftirme bulmaca oyununun (\u00f6rne\u011fin, Candy Crush benzeri bir yap\u0131) performans sorunlar\u0131yla nas\u0131l m\u00fccadele edildi\u011fini ve hangi optimizasyon ad\u0131mlar\u0131n\u0131n uyguland\u0131\u011f\u0131n\u0131 inceleyelim. Oyunun ad\u0131 \"Renkli Ba\u011flant\u0131lar\" olsun ve ba\u015flang\u0131\u00e7ta mobil cihazlarda ciddi tak\u0131lma ve yava\u015fl\u0131k sorunlar\u0131 ya\u015fas\u0131n.<\/p>\n<h3>Problemlerin Tespiti<\/h3>\n<p>\"Renkli Ba\u011flant\u0131lar\" oyunu, ba\u015flang\u0131\u00e7ta her bir bulmaca ta\u015f\u0131n\u0131 ayr\u0131 bir DOM eleman\u0131 (<code><\/p>\n<div><\/code> veya <code><img><\/code>) olarak ele al\u0131yor ve bu elemanlar\u0131n CSS <code>transform<\/code> \u00f6zellikleri ile animasyonlar\u0131n\u0131 y\u00f6netiyordu. Oyun tahtas\u0131 8x8 boyutunda oldu\u011funda 64 DOM eleman\u0131 bulunuyordu. Ancak patlama efektleri, puan g\u00f6stergeleri ve \u00f6zel ta\u015f animasyonlar\u0131 i\u00e7in her saniye y\u00fczlerce yeni DOM eleman\u0131 olu\u015fturulup siliniyordu. Oyunun JavaScript mant\u0131\u011f\u0131 ise, her karede t\u00fcm tahtay\u0131 kontrol ederek e\u015fle\u015fmeleri buluyor ve patlama efektleri i\u00e7in rastgele par\u00e7ac\u0131klar \u00fcretiyordu. Ayr\u0131ca, arka plan m\u00fczikleri ve ses efektleri de s\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f b\u00fcy\u00fck dosyalar halinde y\u00fckleniyordu.<\/p>\n<ul>\n<li><strong>Problem 1: A\u011f\u0131r DOM Manip\u00fclasyonu:<\/strong> Her ta\u015f\u0131n DOM eleman\u0131 olmas\u0131 ve animasyonlar s\u0131ras\u0131nda s\u00fcrekli CSS <code>transform<\/code> g\u00fcncellemeleri, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 a\u015f\u0131r\u0131 me\u015fgul ediyordu. \u00d6zellikle mobil cihazlarda <code>reflow<\/code> ve <code>repaint<\/code> maliyeti \u00e7ok y\u00fcksekti.<\/li>\n<li><strong>Problem 2: Verimsiz Render D\u00f6ng\u00fcs\u00fc:<\/strong> Canvas kullan\u0131lmad\u0131\u011f\u0131 i\u00e7in t\u00fcm g\u00f6rsel g\u00fcncellemeler DOM \u00fczerinden ger\u00e7ekle\u015fiyordu. Bu da p\u00fcr\u00fczs\u00fcz animasyonlar elde etmeyi imkans\u0131z k\u0131l\u0131yordu.<\/li>\n<li><strong>Problem 3: Bellek S\u0131z\u0131nt\u0131lar\u0131 ve GC Tak\u0131lmalar\u0131:<\/strong> Patlama efektleri i\u00e7in her seferinde yeni <code>Particle<\/code> nesneleri olu\u015fturulmas\u0131 ve bunlar\u0131n \u00e7\u00f6p toplay\u0131c\u0131 taraf\u0131ndan s\u0131k s\u0131k temizlenmesi gerekiyordu. Bu da oyun s\u0131ras\u0131nda ani tak\u0131lmalara (garbage collection stalls) neden oluyordu.<\/li>\n<li><strong>Problem 4: A\u011f\u0131r JavaScript Hesaplamalar\u0131:<\/strong> E\u015fle\u015fme kontrol algoritmalar\u0131 ve yol bulma (oyuncunun hamle yapabilece\u011fi yerleri bulma) algoritmalar\u0131 her karede t\u00fcm tahtay\u0131 derinlemesine tar\u0131yordu, bu da CPU'yu yoruyordu.<\/li>\n<li><strong>Problem 5: Y\u00fcksek Varl\u0131k Y\u00fckleme S\u00fcreleri:<\/strong> S\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f ve ayr\u0131 ayr\u0131 y\u00fcklenen g\u00f6rseller ile ses dosyalar\u0131, oyunun a\u00e7\u0131l\u0131\u015f s\u00fcresini uzat\u0131yor ve mobil veri kullan\u0131m\u0131n\u0131 art\u0131r\u0131yordu.<\/li>\n<\/ul>\n<h3>Uygulanan Optimizasyon \u00c7\u00f6z\u00fcmleri<\/h3>\n<p>Geli\u015ftirme ekibi, bu sorunlar\u0131 gidermek i\u00e7in kapsaml\u0131 bir optimizasyon s\u00fcrecine girdi:<\/p>\n<ol>\n<li><strong>Canvas Ge\u00e7i\u015fi ve Sprite Sheet Kullan\u0131m\u0131 (Problem 1 & 2):<\/strong>\n<ul>\n<li>T\u00fcm oyun g\u00f6rselleri, tek bir HTML <code><canvas><\/code> eleman\u0131 \u00fczerine ta\u015f\u0131nd\u0131. Art\u0131k her ta\u015f, DOM eleman\u0131 de\u011fil, Canvas \u00fczerinde \u00e7izilen bir piksel grubuydu.<\/li>\n<li>T\u00fcm ta\u015f ikonlar\u0131, patlama par\u00e7ac\u0131klar\u0131 ve aray\u00fcz elemanlar\u0131 tek bir \"sprite sheet\" \u00fczerinde birle\u015ftirildi. <code>drawImage()<\/code> metodu kullan\u0131larak sadece ilgili k\u0131s\u0131mlar Canvas'a \u00e7izildi. Bu, HTTP isteklerini azaltt\u0131 ve taray\u0131c\u0131n\u0131n render maliyetini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde d\u00fc\u015f\u00fcrd\u00fc.<\/li>\n<li>Animasyonlar i\u00e7in <code>requestAnimationFrame<\/code> kullan\u0131ld\u0131 ve Canvas'\u0131n <code>clearRect<\/code> ile her karede tamamen temizlenip yeniden \u00e7izilmesi sa\u011fland\u0131.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Nesne Havuzu (Object Pooling) Uygulamas\u0131 (Problem 3):<\/strong>\n<ul>\n<li>Patlama par\u00e7ac\u0131klar\u0131, puan metinleri gibi s\u0131k\u00e7a olu\u015fturulan ve yok edilen nesneler i\u00e7in bir nesne havuzu (<code>ParticlePool<\/code>, <code>TextPool<\/code>) olu\u015fturuldu. Bu sayede, yeni nesne olu\u015fturma ve garbage collection maliyeti ortadan kald\u0131r\u0131ld\u0131. Nesneler art\u0131k sadece \"aktif\" veya \"pasif\" olarak i\u015faretleniyordu.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Web Workers ile Paralel Hesaplamalar (Problem 4):<\/strong>\n<ul>\n<li>En a\u011f\u0131r JavaScript hesaplamalar\u0131 (e\u015fle\u015fme kontrol algoritmalar\u0131, olas\u0131 hamleleri bulma ve yapay zeka hamleleri) ayr\u0131 bir Web Worker'a ta\u015f\u0131nd\u0131. Worker, bu hesaplamalar\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden arka planda yap\u0131yor ve sonucu <code>postMessage()<\/code> ile ana i\u015f par\u00e7ac\u0131\u011f\u0131na bildiriyordu. Bu sayede, oyuncu aray\u00fcz\u00fc hesaplamalar devam ederken bile tamamen yan\u0131t verebilir kald\u0131.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Varl\u0131k S\u0131k\u0131\u015ft\u0131rma ve Lazy Loading (Problem 5):<\/strong>\n<ul>\n<li>T\u00fcm g\u00f6rsel varl\u0131klar (sprite sheet dahil) WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc ve s\u0131k\u0131\u015ft\u0131r\u0131ld\u0131. Dosya boyutlar\u0131 %30-40 oran\u0131nda azald\u0131.<\/li>\n<li>Ses dosyalar\u0131 (m\u00fczikler ve efektler) daha d\u00fc\u015f\u00fck bit h\u0131z\u0131nda OGG format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc.<\/li>\n<li>Oyunun ba\u015flang\u0131c\u0131nda sadece temel aray\u00fcz ve ilk seviye varl\u0131klar\u0131 y\u00fcklendi. Di\u011fer seviyeler ve \u00f6zel efektler, ihtiya\u00e7 duyuldu\u011funda dinamik olarak y\u00fcklendi (lazy loading).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Mobil Duyarl\u0131l\u0131k ve \u00d6l\u00e7eklendirme:<\/strong>\n<ul>\n<li><code><meta name=\"viewport\"><\/code> etiketi do\u011fru ayarland\u0131 (<code>user-scalable=no<\/code> dahil).<\/li>\n<li>CSS medya sorgular\u0131 (<code>@media<\/code>) kullan\u0131larak Canvas, farkl\u0131 ekran boyutlar\u0131na ve y\u00f6nlendirmelere g\u00f6re dinamik olarak \u00f6l\u00e7eklendi.<\/li>\n<li><code>window.devicePixelRatio<\/code> kullan\u0131larak Canvas'\u0131n dahili \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc y\u00fcksek yo\u011funluklu ekranlar i\u00e7in ayarland\u0131 ve \u00e7izimler buna g\u00f6re \u00f6l\u00e7eklendi, b\u00f6ylece g\u00f6rseller keskinli\u011fini korudu.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>Sonu\u00e7lar<\/h3>\n<p>Bu optimizasyon ad\u0131mlar\u0131n\u0131n ard\u0131ndan \"Renkli Ba\u011flant\u0131lar\" oyununun mobil cihazlardaki performans\u0131 dramatik bir \u015fekilde iyile\u015fti. Ortalama kare h\u0131z\u0131 20-30 FPS'den istikrarl\u0131 bir 55-60 FPS'ye \u00e7\u0131kt\u0131. Oyunun y\u00fcklenme s\u00fcresi %40 oran\u0131nda azald\u0131. Ani tak\u0131lmalar ve donmalar ortadan kalkt\u0131, kullan\u0131c\u0131 etkile\u015fimleri an\u0131nda yan\u0131t verdi. Bu durum, oyuncu memnuniyetini art\u0131r\u0131rken, oyunun elde tutma oranlar\u0131nda ve uygulama i\u00e7i sat\u0131n al\u0131m gelirlerinde de g\u00f6zle g\u00f6r\u00fcl\u00fcr bir art\u0131\u015fa yol a\u00e7t\u0131. Bu vaka analizi, HTML5 bulmaca oyunlar\u0131nda performans optimizasyonunun sadece teknik bir gereklilik de\u011fil, ayn\u0131 zamanda i\u015f ba\u015far\u0131s\u0131 i\u00e7in kritik bir fakt\u00f6r oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<h2>Sonu\u00e7: Oyun Geli\u015ftirmede H\u0131z ve Duyarl\u0131l\u0131k \u0130\u00e7in Hangi Ad\u0131mlar\u0131 Atmal\u0131y\u0131z?<\/h2>\n<p>HTML5 bulmaca oyunlar\u0131, basit aray\u00fczleri ve s\u00fcr\u00fckleyici mekanikleriyle milyonlarca oyuncuya ula\u015fma potansiyeli ta\u015f\u0131r. Ancak bu potansiyeli ger\u00e7e\u011fe d\u00f6n\u00fc\u015ft\u00fcrmek, oyunun h\u0131z\u0131n\u0131 ve duyarl\u0131l\u0131\u011f\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmakla do\u011frudan ili\u015fkilidir. Oyuncular\u0131n beklentileri her ge\u00e7en g\u00fcn artarken, yava\u015f veya tak\u0131lan bir deneyim, en yarat\u0131c\u0131 bulmacay\u0131 bile g\u00f6lgede b\u0131rakabilir. Bu makale boyunca ele ald\u0131\u011f\u0131m\u0131z teknikler, hem temelden ileri d\u00fczeye kadar HTML5 oyununuzu optimize etmek i\u00e7in sa\u011flam bir yol haritas\u0131 sunmaktad\u0131r. Unutmay\u0131n, performans optimizasyonu tek seferlik bir g\u00f6rev de\u011fil, geli\u015ftirme s\u00fcrecinin her a\u015famas\u0131nda dikkat edilmesi gereken s\u00fcrekli bir s\u00fcre\u00e7tir.<\/p>\n<p>\u00d6zetle, ba\u015far\u0131l\u0131 bir HTML5 bulmaca oyunu i\u00e7in at\u0131lmas\u0131 gereken temel ad\u0131mlar \u015funlard\u0131r:<\/p>\n<ol>\n<li><strong>Canvas'\u0131 \u00d6nceliklendirin:<\/strong> DOM manip\u00fclasyonunun maliyetinden ka\u00e7\u0131narak, t\u00fcm oyun g\u00f6rsellerinizi ve animasyonlar\u0131n\u0131z\u0131 bir Canvas \u00fczerinde \u00e7izin. <code>requestAnimationFrame<\/code> kullanarak ak\u0131c\u0131 bir render d\u00f6ng\u00fcs\u00fc sa\u011flay\u0131n.<\/li>\n<li><strong>Varl\u0131klar\u0131n\u0131z\u0131 Optimize Edin:<\/strong> G\u00f6rsel ve i\u015fitsel varl\u0131klar\u0131n\u0131z\u0131 (resimler, sesler) s\u0131k\u0131\u015ft\u0131r\u0131n, uygun formatlar\u0131 kullan\u0131n (WebP, OGG) ve sprite sheet'ler ile HTTP isteklerini azalt\u0131n. Gereksiz varl\u0131klar\u0131 tembel y\u00fckleme (lazy loading) ile erteleyin.<\/li>\n<li><strong>JavaScript Kodunuzu \u0130nce Ayarlay\u0131n:<\/strong> Algoritmik verimlili\u011fe odaklan\u0131n, oyun d\u00f6ng\u00fcs\u00fcnde a\u011f\u0131r hesaplamalardan ka\u00e7\u0131n\u0131n. Nesne havuzu (object pooling) kullanarak bellek tahsis maliyetini d\u00fc\u015f\u00fcr\u00fcn ve garbage collection tak\u0131lmalar\u0131n\u0131 minimize edin.<\/li>\n<li><strong>Mobil Duyarl\u0131l\u0131\u011f\u0131 G\u00f6z Ard\u0131 Etmeyin:<\/strong> CSS Media Queries ile farkl\u0131 ekran boyutlar\u0131na ve y\u00f6nlendirmelere uyum sa\u011flay\u0131n. Dokunmatik olaylar\u0131 optimize edin ve <code>window.devicePixelRatio<\/code> ile y\u00fcksek yo\u011funluklu ekranlarda keskin g\u00f6rseller sunun.<\/li>\n<li><strong>Paralel \u0130\u015flem G\u00fcc\u00fcnden Faydalan\u0131n:<\/strong> Yo\u011fun CPU gerektiren hesaplamalar\u0131 (AI, yol bulma) Web Workers'a devredin. M\u00fcmk\u00fcnse, render i\u015flemlerini OffscreenCanvas ile arka plana ta\u015f\u0131yarak ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rak\u0131n.<\/li>\n<li><strong>S\u00fcrekli Test Edin ve \u00d6l\u00e7\u00fcn:<\/strong> Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki Performans ve Bellek sekmelerini d\u00fczenli olarak kullanarak darbo\u011fazlar\u0131 tespit edin. Oyununuzu farkl\u0131 cihazlarda ve taray\u0131c\u0131larda test ederek ger\u00e7ek d\u00fcnya performans\u0131n\u0131 g\u00f6r\u00fcn.<\/li>\n<\/ol>\n<p>Gelecekte, WebGPU gibi yeni API'ler, taray\u0131c\u0131larda daha da g\u00fc\u00e7l\u00fc grafik i\u015fleme yetenekleri sunacak. Bu geli\u015fmeler, HTML5 oyunlar\u0131n g\u00f6rsel kalitesini ve karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 daha da art\u0131r\u0131rken, geli\u015ftiricilerin performans optimizasyonuna olan ihtiyac\u0131n\u0131 da s\u00fcrd\u00fcrecektir. H\u0131z ve duyarl\u0131l\u0131k, yaln\u0131zca bug\u00fcn\u00fcn de\u011fil, yar\u0131n\u0131n da ba\u015far\u0131l\u0131 oyunlar\u0131n\u0131n temel ta\u015flar\u0131 olmaya devam edecektir. Bu teknikleri uygulayarak, oyuncular\u0131n\u0131za unutulmaz ve ak\u0131c\u0131 bir bulmaca deneyimi sunabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. HTML5 bulmaca oyunlar\u0131m neden mobil cihazlarda masa\u00fcst\u00fcne g\u00f6re daha yava\u015f \u00e7al\u0131\u015f\u0131yor?<\/strong><\/p>\n<p>Mobil cihazlar genellikle masa\u00fcst\u00fc bilgisayarlara g\u00f6re daha k\u0131s\u0131tl\u0131 i\u015flem g\u00fcc\u00fcne, daha az belle\u011fe ve farkl\u0131 bir grafik i\u015fleme mimarisine sahiptir. Bu, ayn\u0131 kodun mobil cihazlarda daha yava\u015f \u00e7al\u0131\u015fmas\u0131na neden olabilir. Ayr\u0131ca, dokunmatik aray\u00fczlerin i\u015flenmesi ve cihaz\u0131n pil \u00f6mr\u00fc k\u0131s\u0131tlamalar\u0131 da mobil performans\u0131 etkileyen fakt\u00f6rlerdir. G\u00f6rsel varl\u0131k optimizasyonu, DOM manip\u00fclasyonunu azaltma ve Web Workers kullan\u0131m\u0131 gibi tekniklerle bu fark\u0131 kapatabilirsiniz.<\/p>\n<p><strong>2. <code>requestAnimationFrame<\/code> yerine neden <code>setInterval<\/code> kullanmamal\u0131y\u0131m?<\/strong><\/p>\n<p><code>requestAnimationFrame<\/code>, taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131yla (genellikle 60 FPS) senkronize olarak \u00e7al\u0131\u015f\u0131r ve taray\u0131c\u0131 sekmesi g\u00f6r\u00fcn\u00fcr olmad\u0131\u011f\u0131nda otomatik olarak duraklayarak CPU ve pil t\u00fcketimini optimize eder. <code>setInterval<\/code> ise sabit bir zaman aral\u0131\u011f\u0131nda \u00e7al\u0131\u015fmaya \u00e7al\u0131\u015f\u0131r, bu da taray\u0131c\u0131 senkronizasyonu olmad\u0131\u011f\u0131nda \"jank\" (tak\u0131lmalar) ve a\u015f\u0131r\u0131 kaynak kullan\u0131m\u0131yla sonu\u00e7lanabilir. Bu nedenle, animasyonlar ve oyun d\u00f6ng\u00fcs\u00fc i\u00e7in <code>requestAnimationFrame<\/code> tercih edilmelidir.<\/p>\n<p><strong>3. Oyunumdaki g\u00f6rselleri Canvas'a nas\u0131l optimize edebilirim?<\/strong><\/p>\n<p>G\u00f6rsel varl\u0131klar\u0131n\u0131z\u0131 optimize etmek i\u00e7in \u015fu ad\u0131mlar\u0131 izleyebilirsiniz: T\u00fcm k\u00fc\u00e7\u00fck g\u00f6rselleri tek bir sprite sheet'te birle\u015ftirin, g\u00f6rselleri WebP veya s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f PNG\/JPG formatlar\u0131nda kullan\u0131n, gereksiz y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rsellerden ka\u00e7\u0131n\u0131n ve sadece ihtiya\u00e7 duyulan varl\u0131klar\u0131 y\u00fcklemek i\u00e7in tembel y\u00fckleme (lazy loading) stratejisi uygulay\u0131n. Ayr\u0131ca, Canvas'a \u00e7izerken <code>ImageBitmap<\/code> kullanarak resimlerin GPU'ya daha verimli y\u00fcklenmesini sa\u011flayabilirsiniz.<\/p>\n<p><strong>4. Web Workers ve OffscreenCanvas'\u0131 ne zaman kullanmal\u0131y\u0131m?<\/strong><\/p>\n<p>Web Workers, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke eden (\u00f6rne\u011fin, karma\u015f\u0131k AI hesaplamalar\u0131, b\u00fcy\u00fck veri i\u015fleme, yol bulma algoritmalar\u0131) yo\u011fun CPU gerektiren g\u00f6revleriniz oldu\u011funda kullan\u0131lmal\u0131d\u0131r. OffscreenCanvas ise, ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak grafik \u00e7izimlerini arka planda ger\u00e7ekle\u015ftirmek istedi\u011finizde (\u00f6zellikle y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc veya karma\u015f\u0131k animasyonlar i\u00e7in) \u00e7ok faydal\u0131d\u0131r. Bu teknikler, oyununuz \u00e7ok karma\u015f\u0131k hale geldi\u011finde ve ana i\u015f par\u00e7ac\u0131\u011f\u0131 darbo\u011faz yaratmaya ba\u015flad\u0131\u011f\u0131nda performans\u0131 dramatik bir \u015fekilde art\u0131rabilir.<\/p>\n<p><strong>5. Oyunumun performans sorunlar\u0131n\u0131 nas\u0131l tespit edebilirim?<\/strong><\/p>\n<p>Modern taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131, performans sorunlar\u0131n\u0131 tespit etmek i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Chrome DevTools'ta \"Performance\" sekmesini kullanarak CPU kullan\u0131m\u0131n\u0131, kare h\u0131z\u0131n\u0131, JavaScript y\u00fcr\u00fctme s\u00fcresini ve render s\u00fcre\u00e7lerini analiz edebilirsiniz. \"Memory\" sekmesi ile bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve gereksiz bellek tahsislerini bulabilirsiniz. Bu ara\u00e7lar\u0131 d\u00fczenli olarak kullanmak, oyununuzdaki darbo\u011fazlar\u0131 belirlemenize ve hedefli optimizasyonlar yapman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33470","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu<\/title>\n<meta name=\"description\" content=\"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu\" \/>\n<meta property=\"og:description\" content=\"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-03T04:31:30+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"30 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu\",\"datePublished\":\"2025-11-03T04:31:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\"},\"wordCount\":5394,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\",\"name\":\"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-03T04:31:30+00:00\",\"description\":\"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu","description":"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu","og_description":"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-03T04:31:30+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"30 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu","datePublished":"2025-11-03T04:31:30+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/"},"wordCount":5394,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/","url":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/","name":"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-03T04:31:30+00:00","description":"HTML5 bulmaca oyunlar\u0131nda h\u0131z ve duyarl\u0131l\u0131k, oyuncu deneyiminin temelidir. Bu makalede, oyunlar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak, taray\u0131c\u0131y\u0131 yormadan her cihazda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in pratik y\u00f6ntemleri ve ileri d\u00fczey teknikleri ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Gelin, oyunlar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html5-bulmaca-oyunlari-hiz-ve-duyarlilik-optimizasyonu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML5 Bulmaca Oyunlar\u0131: H\u0131z ve Duyarl\u0131l\u0131k Optimizasyonu"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33470"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33470\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}