tag:blogger.com,1999:blog-78457020421995752732024-03-19T07:19:36.807+03:00Oyun nasıl yapılır? (2D game)Web tabanlı teknolojiler(html, css, javascript) ile 2D basit oyunlar geliştirirken; programlama öğretmeyi hedefler.bugra ozdenhttp://www.blogger.com/profile/17772391919951442236noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-7845702042199575273.post-57393302919158209642016-08-04T13:56:00.003+03:002016-08-28T13:59:58.421+03:00#1<span style="font-family: "verdana" , sans-serif;"><strong>Kelebeğin macerası</strong></span><span style="font-family: verdana, sans-serif;"><b> (Oyun projesi #1)</b></span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;">Bu seride, web teknolojilerini(html, css ve javascript) kullanarak baştan-sona basit bir kuş bakışı (2D) oyun yapmayı anlatacağım. Kullandığım tüm yöntemleri -elimden geldiğince- ayrıntılı olarak anlatmayı ve böylelikle bu teknolojileri -konu, konu anlatmak yerine- bir oyun geliştirirken öğretmeyi hedefliyorum. Yazdığımız oyun tarayıcı üzerinde çalışacağı gibi, öğrendiğiniz bilgileri web sayfası veya mobil uygulama yapmak içinde kullanabilirsiniz.</span><br />
<strong><span style="font-family: "verdana" , sans-serif;"><br /></span></strong>
<span style="font-family: "verdana" , sans-serif;"><strong>Oyunun konusu</strong></span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;">Bir kelebek, çiçeklerdeki bal özünü emerek karnı doyduğunda ve anahtarı ele geçirdiğinde kapıdan çıkarak oyunu tamamlıyor.</span><br />
<table>
<tbody>
<tr><td><a href="https://bug7a.github.io/butterfly-javascript-game/preview/" target="_blank"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSD71H6qDrh-Wo9nmdgjiUMhU9ugXajh3-8ORlwL6BBDz3V3sQp4kwGeQgMNViwGrzeIcTPHqnhb0hCYQ4nhzeqYua6amRFocPMi6QUrOuu_z53_kWwr-xju_lFDxlL4sWmB2Q5P4X3Gnq/s200/play.btn.png" width="200" /></a></td><td><a href="https://sourceforge.net/projects/butterfly-javascript-game/files/" target="_blank"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1f4MdT79glAOwIokwMEFYtZ4qJz2DNZfbhIPmxmIWMQmcuQGQcWsm7Keqf4vk71FFKhx45R_721pv3Eyl6wYFLeiLUXwwb-thvTMDCs8nDVVcUWKx0nUwBGkvLac3bU4JSBr9Q6x20mR/s200/download.btn.png" width="200" /></a></td></tr>
</tbody></table>
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="color: #666666;">Not: Her eğitim videosu tamamlandığında yüklenen kaynak dosyası sonunda videonun numarası ile isimlendirilir. (Örnek 5. video dosyası: butterfly-game-src-p5.rar)</span></span></span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;"><b>Önizleme (Resim)</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeZ5uTZA06-1F9EtSUYMXKUJiPk3tafPClSRqR08U-lubLComoSuKUqCFiVN1xrJi1R5jwVAeX0UVUk83r5rW62NtBb4U7BpBavtxRFsT4LY2meWHBSiDXGLCq_9KkmPATGiRO6caWnUq/s1600/preview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeZ5uTZA06-1F9EtSUYMXKUJiPk3tafPClSRqR08U-lubLComoSuKUqCFiVN1xrJi1R5jwVAeX0UVUk83r5rW62NtBb4U7BpBavtxRFsT4LY2meWHBSiDXGLCq_9KkmPATGiRO6caWnUq/s400/preview.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<b style="font-family: Verdana, sans-serif;"><br /></b>
<b style="font-family: Verdana, sans-serif;">Eğitim tanıtımı</b><br />
<span style="font-family: "verdana" , sans-serif;"><b><br /></b></span>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/jV_eKzb3mFY" width="560"></iframe>
<br />
<br />
<br />
<b style="font-family: Verdana, sans-serif;">Oyunun yapımı (Eğitim videoları)</b><br />
<span style="font-family: "verdana" , sans-serif;"><b><br /></b></span>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/jTqHAVZwPo8?list=PLlkulm4kNfGMNsd-LdekNzhPuXlud9myT" width="560"></iframe>
<br />
<strong><span style="font-family: "verdana" , sans-serif;"><br /></span></strong>
<br />
<strong><span style="font-family: "verdana" , sans-serif;">Eğitimde kullanılanlar</span></strong><br />
<ul>
<li><span style="font-family: "verdana" , sans-serif;">Inkscape (Görsel düzenleme uygulaması) - <a href="https://inkscape.org/en/" target="_blank">https://inkscape.org/en/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">Alternativeto (Uygulama alternatifleri) - <a href="http://alternativeto.net/" target="_blank">http://alternativeto.net</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">IconGal (Icon arşivi) - <a href="http://icongal.com/" target="_blank">http://icongal.com/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">Netbeans (IDE: Html, Css, Javascript yazmak için) - <a href="https://netbeans.org/" target="_blank">https://netbeans.org/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">Adobe Color (Renk paletleri) - <a href="https://color.adobe.com/tr/" target="_blank">https://color.adobe.com/tr/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">W3schools (Eğitim sitesi) - <a href="http://www.w3schools.com/" target="_blank">http://www.w3schools.com/</a></span></li>
<li><span style="font-family: "verdana" , sans-serif;">Stackoverflow (Yardımlaşma forumu) - <a href="http://stackoverflow.com/" target="_blank">http://stackoverflow.com/</a></span></li>
</ul>
<div>
<br /></div>
<div>
<span style="font-family: "verdana" , sans-serif; font-size: xx-small;">(Oyun yapmak istiyorum, oyun nasıl yapılır, türkçe, oyun yapımı, oyun geliştirme, basit oyun yapmak, eğitim, ders, programlama, javascript, game development, game dev, game, howto, make, tutorial, 2D, Atari, Yapay zeka, artificial intelligence)</span></div>
<div>
<br /></div>
bugra ozdenhttp://www.blogger.com/profile/17772391919951442236noreply@blogger.com0