programYaz

Flash programı swf animasyonlarında exe uzantılı dosyaları çalıştırmamıza izin vermiyor. En azından ben bulamadım. Eğer illaki çalıştırmamız gerekiyorsa yaptığımız uygulamayı Windows projector olarak yayınlamanız gerekiyor. Hem actionscript 2.0 hemde actionscript 3.0 kodlarını vereceğim. 2.0 ile 3.0 arasında kod farkı olduğu gibi yazma farkı da var. Uygulamaya geçelim; Bunu için dosyalarımız Winodws projector (.exe) olarak yayınlamamız gerekiyor. · İlk önce çalıştıracağız animasyonu hazırlayın ve File (Dosya) > Publish Settings (Yayınlama Ayarları) kısmından Windows Projector seçin ve nereye çıkartılacağını belirleyin. · File > publish (Yayınla) seçerek animasyonu .exe olarak yayınlayın. calisacak.exe olarak yayınladığınızı farz edelim. Şimdi biz bu uygulamayı çalıtıracağız. · Bir flash uygulamasını açın ve hangi kodlamayı kullanacaksanız onu seçerek proje oluşturun. · Sahneye bir buton ekleyin ve F8 tuşu ile film klibine çevirin. Örnek adını buton yapın. Asctionscript 2.0’da örnek adı vermesenizde olur ama actionscript 3.0 da mecbur bir isim vermek zorundasınız. · Dosyanızı kaydedeceğizi yere girerek fscommand adında bir klasör oluşturun ve içine daha önce yayınladınızı calisacak.exe dosyanızı içine kopyalayın. · Daha sonra dosyanızı .fla olarak kaydedin. Burada amaç elimizde sonra değişiklikler yapacağımız zaman kodların elimizde olması. · Actionscript 2.0 kullanıyorsanız film klibine çevirdiğiniz butonu tıklayın ve F9 tuşuna basarak aşağıdaki kodları yazın. on (release) { fscommand("exec", "calisacak.exe"); } · Actionscript 3.0 kullanıyorsanız sahnede boş bir alanı tıklayın ve F9 tuşuna basarak aşağıdaki kodları yazın. 2 3 4 5 buton.addEventListener(MouseEvent.CLICK,baslat); function baslat(e:MouseEvent) { fscommand("exec", "calisacak.exe"); } · Bu işlemleri yapınca bu dosyayı da Windows Projector olarak yayınlayın. Artık en son yayınladığınız .exe dosyayını açarak botuna tıkladığınızda fscommand klasöründeki calisacak.exe dosyayı açılacaktır.

çok basit bir hali ile araba park etme oyunu yapacağız. Yön tuşlarını kullanarak arabayı hareket ettireceğiz. Arabayı Çevirmek içinse A ve S harf tuşlarını kullanacağız. Dediğim gibi burada tam bir oyunu kodlamayacağız ama size fikir verme açısından basit halini yapacağız. Sizler kodları geliştirerek daha iyilerini yapabilirsiniz. Şimdiden kolay gelsin. İlk önce Flash ile ActionScript 3.0 bir sahne açın. Sahnenin içerisine çeşitli engeller ve bir araba ekleyin. Benim yerleşimim aşağıdaki gibidir. Arabayı Çevirmek için A-S tuşlarını kullanın yazan kısım dinamik metin alanıdır ve adı mesajdır. Renkli ve kalın çizgili dörtgen şeklindeki engellerin isimleri sırası ile e1,e2,e3,e4,e5 ve e6, içi beyaz ve ince çizgili alanın ismi ise parkyeri olarak belirlenmiştir. Araba nesnemizin adıda tahmin edeceğiniz gibi araba. Bu yerleşimi yapınca zaman çizelgesinde ikinci kareyi sağ tıklayın ve boş ana kare ekleyi seçin. Karşınıza boş bir sahne gelecektir. Sahneye bir buton ekleyin ve adını oyna olarak belirleyin. Artık tasarımı tamamlandı. Zaman çizelgesinde 1. kareye gelin ve F9 tuşuna basarak kod ekranını açın ve aşağıdaki kodları yazın. //animasyonu durdurur stop(); //hangi işlemde çalışacak fonksiyonları belirler //fonksiyonlar hareket,cevir ve carpma stage.addEventListener(KeyboardEvent.KEY_DOWN, hareket); stage.addEventListener(KeyboardEvent.KEY_DOWN, cevir); this.addEventListener( Event.ENTER_FRAME, carpma) //hareket fonksiyonu //klavyedeki yön tuşlarına göre arabanın koordinatlarını değiştirir. function hareket(event:KeyboardEvent) { if (event.keyCode==Keyboard.LEFT) { araba.x -= 1; // top nesnesinin x koordinatını 1 eksiltir. } if (event.keyCode==Keyboard.RIGHT) { araba.x+=1; // top nesnesinin x koordinatını 1 artırır. } if (event.keyCode==Keyboard.UP) { araba.y-=1; // top nesnesinin y koordinatını 1 eksiltir. } if (event.keyCode==Keyboard.DOWN) { araba.y+=1; //top nesnesinin y koordinatını 1 artırır. } if (araba.x == parkyeri.x && araba.y == parkyeri.y) mesaj.text ="Tebrikler..."; } //cevir fonksiyonu //A veya S tuşlarına basılınca nesneyi sağa yada sola çevirir. function cevir(event:KeyboardEvent) { if (String.fromCharCode(event.charCode)=="a" || String.fromCharCode(event.charCode)=="A") { araba.rotation += 5; } if (String.fromCharCode(event.charCode)=="s" || String.fromCharCode(event.charCode)=="S") { araba.rotation -= 5; } } //carpma fonksiyonu //araba engellere çarparsa yapılacak işlemler function carpma( e:Event ):void { if(araba.hitTestObject(e1) || araba.hitTestObject(e2) || araba.hitTestObject(e3) || araba.hitTestObject(e4) || araba.hitTestObject(e5) || araba.hitTestObject(e6)) { gotoAndStop(2); } } Zaman çizelgesindeki 2. kareye geçin ve aşağıdaki kodları yazın. oyna.addEventListener(MouseEvent.CLICK,basa); function basa (e:MouseEvent) {gotoAndStop(1);}

Daha önceki derslerimizde actionscript 3.0 kullanarak sahnedeki bir nesneyi aşağı,yukarı,sağa ve sola olmak üzere dört yöne hareket ettirdik. O uygulamamızda ara yönlere hareket yoktu. Şimdi ise dört ana yönle beraber ara yönlere de hareket ettireceğiz. Ayrıca arabamız hareket ettiği yöne dönecek. Bunun için aşağıdaki ufak açıklamayı dikkate almanızı tavsiye ederim. İlk önce resmi verelim ve açıklamasını yapalım. Kırmızı okla gösterilen temsili araba resmi. Etrafındaki sayılar ise nesnenin nesneyi hangi yöne hareket ettireceksek o açıyı göstermektedir. Nesnelerini döndüreceğiniz zaman bunu da dikkate alırsanız daha kolay olacaktır. Şimdi uygulamamıza geçelim. Bir flash as3 uygulaması oluşturun ve hareket ettireceğiniz nesneyi çizin. Çizdiğiniz nesneyi F8 tuşuna basın ve film klibine çevirin. Burada XY merkezi olarak (KAYIT kısmı) orta noktayı belirlemeyi unutmayın. Nesnenin <Örnek Adı>‘nı araba olarak belirledim. Sizde kodları nesnenize göre düzenleyin. Sahnede boş bir alana tıklayın ve F9 tuşuna basarak aşağıdaki kodları yazın. araba.addEventListener(Event.ENTER_FRAME, hareket); stage.addEventListener(KeyboardEvent.KEY_DOWN, tusabasildi); stage.addEventListener(KeyboardEvent.KEY_UP, basmaisibitti); var keys:Array = []; function hareket(e:Event):void { if (keys[Keyboard.UP] && keys[Keyboard.RIGHT]) { araba.y -= 3; araba.x += 3; araba.rotation=315; } else if (keys[Keyboard.UP] && keys[Keyboard.LEFT]) { araba.y -= 3; araba.x -= 3; araba.rotation=225; } else if (keys[Keyboard.DOWN] && keys[Keyboard.LEFT]) { araba.y += 3; araba.x -= 3; araba.rotation=135; } else if (keys[Keyboard.DOWN] && keys[Keyboard.RIGHT]) { araba.y += 3; araba.x += 3; araba.rotation=45; } else if (keys[Keyboard.RIGHT]) { araba.x += 3; araba.rotation=0; } else if (keys[Keyboard.LEFT]) { araba.x -= 3; araba.rotation=180; } else if (keys[Keyboard.UP]) { araba.y -= 3; araba.rotation=270; } else if (keys[Keyboard.DOWN]) { araba.y += 3; araba.rotation=90; } } function tusabasildi(e:KeyboardEvent):void { keys[e.keyCode] = true; } function basmaisibitti(e:KeyboardEvent):void { keys[e.keyCode] = false; }

Bu yazımızda CSS kullanarak Google logosu yapacağız. Kodumuz 2 kısımdan oluşuyor. Kodların ne yaptığını anlatabilmek için parça parça yazacağım. Sizlerde kendiniz denerken hangi kodun ne yaptığını daha iyi anlamak için, her bir kod satırını yazdıktan sonra ne değiştiğine bakabilirsiniz. Hemen kodlarımızı görelim. HTML : Logomuzu tasarlayacağımız bir div açıp, daha sonra CSS’te kullanmak için bir class ile ‘google’ ismini veriyoruz. <div class="google"></div> CSS : Aslında tüm olay CSS kısmında. Bu kısmı da, olayları daha iyi görmeniz için parpa parça anlatacağım. .google{ margin-top: 100px; margin-left: 120px; display: block; width: 75px; height: 50px; position: relative; border-top: 50px solid #4285f4; border-right: 50px solid #4285f4; border-bottom: 50px solid #4285f4; border-radius: 0 0 250px 0px; box-sizing: content-box; } Burada yaptığımız G harfinin içe doğru olan kısmı. Yani logonun sağ kısmını yaptık. Bu haliyle sonucumuzu görelim. Şimdi kalan kısım için kodlarımızı yazalım. .google::before{ content: ''; display: block; width: 250px; height: 250px; border-top: 50px solid #ea4335; border-left: 50px solid #fbbc05; border-bottom: 50px solid #34a853; border-right: 50px solid transparent; border-radius: 200px; box-sizing: border-box; position: absolute; right: -50px; top: -150px; } Kalan kısımda da G harfinin kalan üst, sol, ve alt kısımlarını yapıyoruz. Renk ve yerleştirmelerini yaptıktan sonra sonuç olarak Google logosunu elde ediyoruz. Sonuç :

Bu yazımızda HTML ve CSS kullanarak, web sitelerinizde çok şık duracak hareketli sosyal medya butonu yapacağız. Hemen ön izlememizi görelim. Önemli : İkonların kullanılabilmesi için FontAwasome css dosyasını sitenize entegre etmeniz gerekmektedir. Buraya tıklayarak, FontAwasome.com sitesinden gerekli bilgi ve dosyayı alabilirsiniz. Şimdide kodumuzu görelim : HTML : <div class="main"> <div class="box"> <input type="checkbox" name="" id="checkbox" /> <div class="menus"> <a href="#"> <div class="menuItems"> <i class="fab fa-whatsapp"></i> </div> </a> <a href="#"> <div class="menuItems"> <i class="fab fa-instagram"></i> </div> </a> <a href="#"> <div class="menuItems"> <i class="fab fa-facebook-f"></i> </div> </a> <a href="#"> <div class="menuItems"> <i class="fab fa-twitter"></i> </div> </a> </div> </div> </div> CSS: *{ margin: 0; padding: 0; } body{ background: linear-gradient(to right,#131313 50%, #1d1d1d 50%); } .main{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .box{ display: flex; } #checkbox{ width: 65px; height: 65px; cursor: pointer; -webkit-appearance: none; outline: none; background: white; position: relative; } #checkbox:hover{ background: rgba(255, 255, 255, 0.747); } #checkbox::before{ content: '\f0c1'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'font awesome 5 free'; font-weight: 700; font-size: 1.9rem; color: rgb(41, 41,41); transition: all 2s; } #checkbox:checked::before{ content: "\f00d"; } #checkbox:checked ~ .menus{ width: 260px; } .menus{ width: 0; display: flex; overflow: hidden; transition: all 0.5s; } .menus .menuItems{ width: 65px; height: 65px; background: white; position: relative; border-left: 1px solid rgb(165, 165, 165); } .menus .menuItems:hover{ background: rgba(255, 255, 255, 0.747); } .menus .menuItems i{ font-size: 1.8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .fa-whatsapp{ color: #25d366; } .fa-instagram{ color: #c32aa3; } .fa-facebook-f{ color: #1877f2; } .fa-twitter{ color: #1da1f2; } .menus a{ color: rgb(34, 34, 34); }

Bu yazımızda web sitelerinize güzel bir hava katacak, HTML ve CSS ile kabartmalı icon tasarımı yapacağız. Ön izlememizi görelim. Önemli : İkonların kullanılabilmesi için FontAwasome Javascript dosyasını sitenize entegre etmeniz gerekmektedir. Buraya tıklayarak, FontAwasome.com sitesinden gerekli bilgi ve dosyayı alabilirsiniz. Artık koda geçebiliriz : HTML KODLARI: <div class="icons"> <a> <i class="fab fa-codepen"></i> </a> <a> <i class="fab fa-github"></i> </a> <a> <i class="fab fa-instagram"></i> </a> </div> CSS KODLARI: * { padding: 0; margin: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: #D4DBE8; } .icons{ margin-top: 2.3em; display: flex; } a:hover{ cursor: pointer; } .icons i{ opacity: 0.7; margin-left: 1.3em; font-size: 1.8em; transition: 0.2s; padding: 0.65em; border-radius: 50%; display: grid; place-items: center; background: #d4dbe8; box-shadow: -11px -11px 25px rgba(255, 255, 255, 0.35), 11px 13px 25px rgba(165, 181, 208, 0.738227); } .icons i:hover{ opacity: 1; border-radius: 50%; background: #d4dbe8; transform: scale(1.1); mix-blend-mode: normal; box-shadow: -11px -11px 22px rgba(255, 255, 255, 0.524448), 11px 13px 22px rgba(166, 181, 208, 0.929496), inset -11px -11px 28px rgba(255, 255, 255, 0.692936), inset 11px 11px 28px rgba(166, 181, 208, 0.856261),; }

Bu yazımızda html ve css kullanarak 2 farklı açılır menü örneklerini yazacağız. Sırayla menülerimizi ve kodlarını görelim. HTML ve CSS ile Aşağı Açılır Menü: HTML KODLARI : <ul> <li>Anasayfa</li> <li>Hakkımızda</li> <li> Dersler <ul> <li>Web Tasarım</li> <li>Yapay Zeka</li> <li>Mobil Programlama</li> </ul> </li> <li>İletişim</li> </ul> CSS KODLARI: body { font-family: Helvetica, Arial, sans-serif; padding: 20px 50px 150px; font-size: 13px; text-align: center; background: #F09819; background: -webkit-linear-gradient(to left, #F09819 , #EDDE5D); background: linear-gradient(to left, #F09819 , #EDDE5D); } ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; transition: all 0.2s; } ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; box-shadow: none; display: none; opacity: 0; visibility: hidden; transition: opacity 0.2s; } ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: block; opacity: 1; visibility: visible; } 2.ÖRNEK: HTML KODLARI: <nav> <label for="touch"><span>Anasayfa</span></label> <input type="checkbox" id="touch"> <ul class="slide"> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Portfolyo</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> CSS KODLARI: body {background-color : #ededed; font-family : "Open Sans", sans-serif;} h1 {padding: 40px; text-align: center; font-size: 1.5em;} li a {text-decoration : none; color : #2d2f31;} nav { width : 300px; background: #d9d9d9; margin : 40px auto; } span { padding : 30px; background : #2d2f31; color : white; font-size : 1.2em; font-variant : small-caps; cursor : pointer; display: block; } span::after { float: right; right: 10%; content: "+"; } .slide { padding: 0; clear:both; width:100%; height:0px; overflow: hidden; text-align: center; transition: height .4s ease; list-style: none; } .slide li {text-decoration : none; padding : 30px;} #touch {position: absolute; opacity: 0; height: 0px;} #touch:checked + .slide {height: auto;}

Bu yazımızda jQuery ile checkbox kullanımını gösteren basit bir örnek gerçekleştireceğiz. Örneğimizde sayfamıza eklenen resmin checkbox seçili iken sayfamızda görüntülenmesini, seçili değil iken ise gizlenmesini sağlayacağız. Gizleme ve görüntüleme işlemini slideUp ve slideDown metotlarını kullanarak animasyonlu bir şekilde oluşturacağız. Kodarımızı checkbox kontrolünün change olayını kullanarak yazacağız. .html sayfasına ait kodlar: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Jquery Örnekler</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <style> #kutu1{ height: 250px; } img{ height: 230px; } </style> </head> <body> <div id="kutu1"> <img src="resim/4.png" id="resim"> </div> <div id="kutu2"> <input type="checkbox" id="chk" checked> Resmi Göster </div> <script> //Onay kutusu onaylandığında resim görünsün onayı kaldırıldığında resim görünmesin $(document).ready(function() { $("#chk").on("change",function(){ if($(this).prop("checked")==true){ $("#resim").slideDown(2000); }else{ $("#resim").slideUp(2000); } }); }); </script> </body> </html>

Bu yazımızda <option> öğesini kullanarak sayfamıza eklemiş olduğumuz paragrafın css özelliğini (yazı rengi) değiştireceğiz. Açılır kutumuza eklediğimiz renklerden seçili olan renge göre paragraf içindeki yazı renginin değişmesini sağlayacağız. Sayfaya ait kodlar ve ekran çıktısı aşağıdaki gibi olacaktır. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p id="p1" style="font-size: 20px">Bu yazımızda öğesini kullanarak sayfamıza eklemiş olduğumuz paragrafın css özelliğini (yazı rengi) değiştireceğiz. Açılır kutumuza eklediğimiz renklerden seçili olan renge göre paragraf içindeki yazı renginin değişmesini sağlayacağız. Sayfaya ait kodlar ve ekran çıktısı aşağıdaki gibi olacaktır.</p> <select id="secim"> <option value="red">Kırmızı</option> <option value="green">Yeşil</option> <option value="blue">Mavi</option> <option value="pink">Pembe</option> <option value="purple">Mor</option> </select> <script> $("#secim").change(function(){ var deger=$("#secim").val(); $("#p1").css({"color":deger}); }); </script> </body> </html> EKRAN ÇIKTISI:

Bu örnekte Jquery kodları ile genişlik ve yükseklik değerlerini px cinsinden kullanıcıdan alarak bir dikdörtgen oluşturacağız. Örneğimizin amacı Jquery ile css işlemlerinin nasıl yapılacağını görmek olacaktır. Kullanıcıdan text elemanlarına girmiş olduğu değerleri div öğesinin genişlik ve yükseklik özelliğine uygulanması, div arkaplan rengi değiştirme ve kenarlık ekleme gibi özellikleri değiştireceğiz. Altta örneğe ait kodlar, ekran çıktısı ve yapılış videosu bulunmaktadır. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Jquery için CDN kodunu yapıştırıyoruz.--> </head> <body> Genişlik : <input type="text" id="genislik"> Yükseklik : <input type="text" id="yukseklik"> <button id="btn">ÇİZ</button> <div id="dd"></div> <script> $("#btn").click(function(){ var gen=Number($("#genislik").val()); var yuk=Number($("#yukseklik").val()); $("#dd").css({"width":gen,"height":yuk,"border":"1px solid black","margin":"50px auto","background-color":"blue"}); }); </script> </body> </html> EKRAN ÇIKTISI: YAPILIŞ VİDEOSU:

jQuery kodları derken daha doğrusu kod parçacıkları bu vereceklerim. 5 tane, sıklıkla kullandığımız ya da aradığımız kodlar bunlar. Bu jQuery kodlarını sitemizi ya da temalarımızı olultururken sıklıkla kullanıyoruz. Oldukça işimize yarayan bu kodlar artık ayrılmaz bir parçamız oldu gibi. En basitinden benim şu yukarı butonu bile aşağıda paylaşacağım jQuery kodlarına benzer yapıda. Estetik katabiliyor işlerimize. Lafı çok fazla uzatmadan geçiyorum paylaşmaya. jQuery kodları nasıl kullanılır? Bunu anlatmama pek gerek var mı bilmiyorum ama belki bu işe yeni başlayan arkadaşlar olabilir diye bi değineceğim. Öncelikle jQuery kütüphanesine ve olayları gerçekleştireceğimiz bir document.ready fonksiyonuna ihtiyacımız var. Şöyle ki; <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> //jQuery kütüphanesini Google Üzerinden Çekiyoruz //Sonrasında document.ready fonksiyonunu yazıyoruz <script> $(document).ready(function() { /*Kodları buraya yazacağız*/ }); </script> Bu kodları çağırdıktan sonra $(document).ready(function(){}); içerisine kodlarımızı yerleştireceğiz. Buradaki amaç sitenin yüklenmesi hazır olduğunda kodların çalışmasını sağlamaktır. Sırasıyla jQuery Kodları Basit Yukarı Butonu // Yukarı Butonu Fonksiyonu $('a.top').click(function(){ $(document.body).animate({scrollTop : 0},800); return false; }); //Sitenizde herhangi bir yere bunu ekleyin. Tabii "top" classına sahip olan bir div ya da alan var olmalı çalışması için <a class="top" href="#">Yukarı</a> Bu kod ile birlikte yukarıya doğru yavaş bir şekilde çıkan buton efekti yapmış oluyoruz. Kodun çalışması için sitenizin üst kısımlarında top classına sahip bir elemanınız div, span vb olmalı. Şayet herşey doğruysa gayet güzel bir buton oluşturmuş olacaksınız. Tablo renklendirme $("table tr:even").css('background', '#E8E8E8’); Tablonuzu Zebra stili dedikleri bir şekilde renklendirmek için bu kodu kullanaiblirsiniz. Kod basit olarak Tablonun satırlarında ilk satıra farklı bir css arkaplan rengi atıyor ve renklendiriyor 🙂 Hover efekti $('.ustegel').hover( function(){ $(this).addClass('renklendir_class') }, function(){ $(this).removeClass('renklendir_class') } ); Bu kod ile herhangi bir div yada başka bir elemanı fare üstüne geldiğinde renklendirebilir ve değiştirebilirsiniz. Kod basit olarak fare imleci .ustegel classına sahip elemana geldiğinde farklı bir class atayarak değişime imkan sağlıyor. Fare uzaklaştığında ise classı siliyor. Eklemeniz gereken elemanın örneği şöyle olmalıdır. <div class="ustegel"> Fareyi Üstüme getir ki renkleneyim </div> <style> .ustegel {display:block;background:#FFFFF;border-color:#000000;} .renklendir_class {background: #282828;border-color: #1d1d1d;} </style> Linkleri Yeni sayfada açılmaya zorlamak $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } }); Ne dediysek o 🙂 Tablo başlıklarını Tablo Sonuna klonlamak var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('table thead'); Tablo yapılarının bazılarında tablo başlıkları thead aynı şekilde tablo sonlarında da kullanılması gerekebilir ama bazen tablo yaparken bunu unutabiliriz. Bu kod direkt olarak bu işi yerine getiriyor 🙂 jQuery kodları umarım işinize yarar kodlar olur. Selametle

Bir çoğumuzun bildiği bir oyundur. Ellerimizi kağıt, makas, taş şekline sokarak bir birimize karşı üstünlük sağlamaya çalışırız. Oyunu kaybeden oyunun başındaki belirlenen cezayı çekmek zorunda kalır. Şimdi oyunun kuralı biraz açıklayalım. Kağıt Taşa karşı üstündür. Taş Makas karşı üstündür. Makasta taşa karşı üstündür. Şimdi bu derecelendirmeden yola çıkarak javascript aşağıdaki kağıt, makas, taş oyununu hazırladım. Kodları inceleyebilirsiniz. Oyunun çalışmasını biraz açıklayayım. Kağıt, makas, taş resimlerinden birine tıkladığında; aynı zamanda bilgisayar da bir seçim yapar. Yapılan seçim yukarıdaki şartlara göre değerlendirilir. Sonuç olarak kazanan belirlenmiş olunur. Tekrar resimlere tıklandığında oyun yeniden başlamış olur. Not: Aşağıda paylaşılan resimleri de uygulama klasörüne eklemeniz gerekmektedir. <!doctype html> <html> <head> <title>KAĞIT, TAŞ, MAKAS OYUNU</title> <meta charset="utf-8"> <style> body{ background: #e74c3c; } #liste img{ padding:5px; border:1px #232333 solid; } #sonuc{ float:left; width: 260px; height: 260px; font-size:2em; padding:20px; background: #f1c40f; } #pc-sonuc{ float:left; } </style> </head> <body> <div id="liste"> <img src="kagit.png" id="kagit" width="300" height="300" data-id="0"> <img src="makas.png" id="makas" width="300" height="300" data-id="1"> <img src="tas.png" id="tas" width="300" height="300" data-id="2"> </div> <div id="pc-sonuc"> <img src="" id="pc-secim" width="300" height="300" alt="pc seçimi"> </div> <div id="sonuc"> </div> <script> var liste=["kagit.png","makas.png","tas.png"]; var kagit=document.getElementById("kagit"); var makas=document.getElementById("makas"); var tas=document.getElementById("tas"); var pcSecim=document.getElementById("pc-secim"); var sonucYazdir=document.getElementById("sonuc"); kagit.onclick=secimYap; makas.onclick=secimYap; tas.onclick=secimYap; function secimYap(){ var pc= RasgeleKagit(); /*dizi sıralamasını kullanmak daha mantıklıydı fakat yukarıdaki resimlerin sıralamsı değişince hata verecektir.*/ /*bu karşılaştırmada da rsimlerin isimlerine dikkat etmek gerekiyor.*/ var secim= this.dataset.id; if(pc==0 && secim==0) { sonuc="ikinizde aynı seçimi yaptınız"; } else if(pc==0 && secim==1) { sonuc="Kazandın, makas kağıdı keser"; } else if(pc==0 && secim==2) { sonuc="Kaybettin, kağıt taşı sarar"; } else if(pc==1 && secim==0) { sonuc="Kaybettin, makas kağıdı keser"; } else if(pc==1 && secim==1) { sonuc="ikinizde aynı seçimi yaptınız"; } else if(pc==1 && secim==2) { sonuc="Kazandın, Taş makası kırar"; } else if(pc==2 && secim==0) { sonuc="Kazandın, kağıt taşı sarar"; } else if(pc==2 && secim==1) { sonuc="Kaybettin, Taş makası kırar"; } else if(pc==2 && secim==2) { sonuc="ikinizde aynı seçimi yaptınız"; } sonucYazdir.innerHTML=sonuc; } function RasgeleKagit(){ var sayi= Math.round(Math.random()*2); pcSecim.src=liste[sayi]; return sayi; } </script> </body> </html>

JavaScriptte koordinat kullanarak buton yakalama oyunu oluşturacağız. Fare ile üzerine gelindiğinde yerini değiştirmesini sağlayan ve yakalandığında ekrana uyarı verecek şekilde iki ayrı fonksiyon oluşturacağız. Daha sonrasında sayaç koyup kaç seferde yakalandığını hesaplayacağız. <button id="nesne"></button> HTML: Öncelikle yakalamaya çalışacağımız butonu oluşturuyoruz ve id veriyoruz. var nesne=document.getElementById("nesne"); JavaScript: Oluşturduğumuz butonun “id” si ile butonu bir nesne haline getirip değişken içerisine atıyoruz. nesne.onmouseover=function(e) { var xpos=parseInt(Math.random()*1000); var ypos=parseInt(Math.random()*800); nesne.style.left=xpos +"px"; nesne.style.top =ypos+"px"; nesne.style.width=this.clientWidth+10+"px"; nesne.style.height=this.clientHeight+10+"px"; } Nesneye “.onmouseover” (yani fare üzerine geldiğinde) olayını atıyoruz ve fonksiyon oluşturuyoruz. Fonksiyon içerisinde “xpos” ve “ypos” olarak iki ayrı değişken tanımladık. “xpos” x eksenini, “ypos” ise y eksenini karşılıyor. Kutuyu yakalarken bir yerlerde rastgele belireceği için “Math.random” kullanıyoruz ve ekran genişliğine/yüksekliğine göre aralık belirliyoruz. Burada genişliği 0-1000, yüksekliği 0-800 olarak ayarladık. “parseInt” ile de ondalık kısımlar kurtulduk. Daha sonra nesneye x ve y eksenlerini atıyoruz. Soldan ve yukarıdan ayarladık ama sağdan ve aşağıdan da ayarlanabilir. Lakin sağdan ve soldan ayarlarsak bu sefer garip bir görüntüyle karşılaşırız. Bu fonksiyonun içerisindeki son işlemler ise buton yakalanamadığında genişlik ve yükseklik değerlerinin her seferinde 10px artması. Bunları “this” ile yapıyoruz. “this” aktif olan nesneye müdahale etmek için kullanılıyor. “clientWidth” ve “clientHeight” ifadeleri ise neye müdahale ettiğimizi gösteriyor. nesne.onclick=function() { window.alert(sayac+" Seferde Yakalandı"); nesne.style.width="100px"; nesne.style.height="100px"; } İkinci fonksiyonda ise buton yakalandığında işlenecek kodları yazıyoruz. Ekrana “window.alert” ile uyarı verdiriyoruz ve genişlik/yükseklik değerlerinin eski haline gelmesini sağlıyoruz. #nesne { width: 100px; height: 100px; position:absolute; background:#36A4FF; } CSS: Nesnenin sayfa üzerinde bağımsız hareket edebilmesi için “position:absolute” olması zorunludur. Yoksa buton hareket edemez. Yükseklik/genişlik değerlerini ayarlıyoruz ve arka plan rengi ekliyoruz. Son olarak kaç seferde yakaladığımızı hesaplamak için ilk fonksiyondan önce bir sayaç tanımlıyoruz. İçinde tanımlamamızın nedeni kutu her kaçırdığımızda sayaç tekrar tanımlanacak ve her seferinde değer sıfır olacak. Kodları toparlayacak ve sayacı ekleyecek olursak son hali şöyle olacaktır; <!doctype html> <html> <head> <meta charset="utf-8"> <title>Buton Yakalama Oyunu</title> <style> #nesne{ width: 100px; height: 100px; position:absolute; background:#36A4FF; } </style> </head> <body> <button id="nesne"></button> <script> var sayac=0; var nesne=document.getElementById("nesne"); nesne.onmouseover=function(e) { sayac++; var xpos=parseInt(Math.random()*1000); var ypos=parseInt(Math.random()*800); nesne.style.left=xpos +"px"; nesne.style.top =ypos+"px"; nesne.style.width=this.clientWidth+10+"px"; nesne.style.height=this.clientHeight+10+"px"; } nesne.onclick=function() { window.alert(sayac+" Seferde Yakalandı"); nesne.style.width="100px"; nesne.style.height="100px"; sayac=0; } </script> </body> </html>

Oyunun çalışma mantığı şu şekilde, oyun başladığında kullanıcıya bir tane dört işlem içeren matematik sorucu soruluyor. Eğer kullanıcı soruyu doğru cevaplarsa yeşil puan +1, soru yanlış cevaplanırsa kırmızı puan +1 şeklinde değiştirilip kullanıcıya yeni bir soru soruluyor. Oyun bu şekilde oynanmaya devam ediyor. Oyunu çalıştırmak için bağlantıya tıklayın: Matematik Oyunu Oyna Oyunun kodlarnı yazmaya başlayalım. HTML 1.Aşama: İlk olarak HTML etiketlerini oluşturarak başlıyoruz. <div id="oyun-panel"> <h1>Dört İşlem Matematik Oyunu</h1> <span id="sayi1">0</span> <span id="opt">+</span> <span id="sayi2">0</span> <span>=</span> <input type="text" id="sonuc"> <input type="button" id="cevapla" value="Cevapla"> <div style="clear:both"></div> <div id="dogru">0</div> <div id="yanlis">0</div> <div style="clear:both"></div> </div> JavaScript 2.Aşama: HTML nesnelerinin javascript ile oluşturuyoruz. var sayi1,sayi2,dogru=0,yanlis=0,sonuc,cevapla,opt; //HTML nesnelerinin oluşturulması sayi1=document.getElementById("sayi1"); sayi2=document.getElementById("sayi2"); opt=document.getElementById("opt"); sonuc=document.getElementById("sonuc"); cevapla=document.getElementById("cevapla"); dogru=document.getElementById("dogru"); yanlis=document.getElementById("yanlis"); 3.Aşama: Kullanıcıya hesaplaması için rastgele sayı üretmek için rastgele sayı fonksiyonu oluşturuyoruz. Hazırlanan rastgele sayı fonksiyonunu yazilimbilisim.net içinde bulabilirsiniz. //rastgele sayı üretme fonksiyonu //https://www.yazilimbilisim.net/javascript/javascript-rastgele-sayi-uretme/ Math.rastgele=function(alt, ust){ let sayi=Math.random(); sayi=sayi*(ust-alt); sayi=Math.floor(sayi)+alt; return sayi; } 4.Aşama: Kullanıcıya yeni soru sormak için yeniSoru adında bir fonksiyon oluşturup fonksiyonu aşağıdaki gibi dolduruyoruz. Oluşturulan fonksiyonda rastgele sayı metodunu kullanarak rastgele sayı seçme işlemini gerçekleştiriyoruz. Bu fonksiyonda dikkat edilecek nokta bölme işleminde işlemde zorluk olmaması için kalansız bölme yapmasını sağlamaktadır. Bu işlem için döngü içinde kalansız işlem kontrol ediliyor ve ikinci sayı bu şarta uyacak şekilde seçiliyor. //oyun başladığında yada soru tahmin edildiğinde yeni soru sormak için kullanılır. function yeniSoru(){ let islem=["+","-","*","/"]; opt.textContent=islem[Math.rastgele(0,4)]; //operatör seçimi sayi1.textContent=Math.rastgele(0,50); sayi2.textContent=Math.rastgele(0,50); if(opt.textContent=="/"){ //kalansız bölüm için eklenmiştir. while(true){ sayi2.textContent=Math.rastgele(0,50); if(sayi1.textContent%sayi2.textContent==0) {break;} } } } 5.Aşama:Sayfa yüklendiğinde yeniSoru fonksiyonunu çalıştırıp kullanıcıya bir tane soru sorması sağlanıyor. //sayfa yüklendiğinde ilk kurulumun yapılması window.onload=function(){ yeniSoru(); } 6.Aşama: Bu aşamada opt seçeneğine bağlı olarak işlem sonucu kullanıcı tarafından verilen sayı ile kontrol edip cevap doğru ise yeşil +1, yanlış ise kırmızı +1 olacak şekilde arttırma işlemi gerçekleştiriliyor. Sonrasında da yeni bir soru ile kullanıcının devam etmesi sağlanıyor. //cevapla butonuna basıldığında değerlendirme işlemi cevapla.onclick=function(){ let cevap,s1,s2; s1=Number(sayi1.textContent); s2=Number(sayi2.textContent); switch(opt.textContent){ case '+':cevap=s1+s2;break; case "-":cevap=s1-s2;break; case "*":cevap=s1*s2;break; case "/":cevap=s1/s2;break; default:break; } if(sonuc.value==cevap){ dogru.textContent=Number(dogru.textContent)+1; } else{ yanlis.textContent=Number(yanlis.textContent)+1; } yeniSoru(); } JavaScript Matematik Oyunu Uygulamasının Tüm Kodları ve CSS düzenlemesi: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Matematik Oyunu-YazilimBilisim.Net</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"> <style> body{ color:#fff; background: #B3E5FC; font-family: 'Source Sans Pro', sans-serif; } #oyun-panel{ width: 330px; background: #03A9F4; padding:16px; text-align: center; margin:auto; } h1{ margin:0 0 16px 0; border:solid 1px #fff; padding:5px; font-weight: 300; } span{ font-size: 125%; padding:10px; } #sonuc{ width: 50px; } #cevapla{ margin-top:10px; padding:5px; border:none; width: 100px; background: #0288D1; color:#fff; } #cevapla:hover{ background: #8BC34A; } #dogru,#yanlis{ font-size: 150%; margin-top:10px; padding:10px; display: inline-block; } #dogru{ background: #4CAF50; } #yanlis{ background: #D32F2F; } </style> <body> <div id="oyun-panel"> <h1>Dört İşlem Matematik Oyunu</h1> <span id="sayi1">0</span> <span id="opt">+</span> <span id="sayi2">0</span> <span>=</span> <input type="text" id="sonuc"> <input type="button" id="cevapla" value="Cevapla"> <div style="clear:both"></div> <div id="dogru">0</div> <div id="yanlis">0</div> <div style="clear:both"></div> </div> <script> var sayi1,sayi2,dogru=0,yanlis=0,sonuc,cevapla,opt; //HTML nesnelerinin oluşturulması sayi1=document.getElementById("sayi1"); sayi2=document.getElementById("sayi2"); opt=document.getElementById("opt"); sonuc=document.getElementById("sonuc"); cevapla=document.getElementById("cevapla"); dogru=document.getElementById("dogru"); yanlis=document.getElementById("yanlis"); //rastgele sayı üretme fonksiyonu //https://www.yazilimbilisim.net/javascript/javascript-rastgele-sayi-uretme/ Math.rastgele=function(alt, ust){ let sayi=Math.random(); sayi=sayi*(ust-alt); sayi=Math.floor(sayi)+alt; return sayi; } //oyun başladığında yada soru tahmin edildiğinde yeni soru sormak için kullanılır. function yeniSoru(){ let islem=["+","-","*","/"]; opt.textContent=islem[Math.rastgele(0,4)]; //operatör seçimi sayi1.textContent=Math.rastgele(0,50); sayi2.textContent=Math.rastgele(0,50); if(opt.textContent=="/"){ //kalansız bölüm için eklenmiştir. while(true){ sayi2.textContent=Math.rastgele(0,50); if(sayi1.textContent%sayi2.textContent==0) {break;} } } } //sayfa yüklendiğinde ilk kurulumun yapılması window.onload=function(){ yeniSoru(); } //cevapla butonuna basıldığında değerlendirme işlemi cevapla.onclick=function(){ let cevap,s1,s2; s1=Number(sayi1.textContent); s2=Number(sayi2.textContent); switch(opt.textContent){ case '+':cevap=s1+s2;break; case "-":cevap=s1-s2;break; case "*":cevap=s1*s2;break; case "/":cevap=s1/s2;break; default:break; } if(sonuc.value==cevap){ dogru.textContent=Number(dogru.textContent)+1; } else{ yanlis.textContent=Number(yanlis.textContent)+1; } yeniSoru(); } </script> </body> </head> </html>

Flash playerın bittiği şu zamanda artık tarayıcı oyunlarının JavaScript dilini kullanarak yazıyoruz. Bu yazıda da sizlere javascript kullanarak basit bir oyun yapımını göstereceğim. Chrome tarayıcısında internet bağlantısı gittiği zaman basit bir dinozor oyunu gelir. Sonsuza kadar oynayabileceğiniz bu oyunun en basit halini gösteren kodları aşağıda paylaşıyorum. Videoyu beğenirseniz destek olmak için beğenmeyi unutmayın. Demo İçin Tıklayın OYUNUN HTML KODLARI: <!DOCTYPE html> <html lang="tr" onclick="zipla()"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tasarimkodlama.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="oyun"> <div id="trex"></div> <div id="kaktus"></div> </div> <script src="script.js"></script> </body> </html> OYUNUN CSS KODLARI: *{ margin:0; padding: 0; } body{ background: #000; } #oyun{ width: 800px; height: 200px; border:1px solid #000; background: #fff; margin:100px auto; position: relative; overflow:hidden; } #trex{ position: absolute; width: 39px; height: 42px; background: url(trex.png); bottom:0; } .trex-animate{ animation: trex .5s linear; } #kaktus{ position: absolute; width: 23px; height: 46px; background: url(kaktus.png); bottom: 0; left:775px; } .kaktus-animate{ animation:kaktus 2s linear infinite; } @keyframes kaktus{ 0%{left:775px;} 100%{left:-40px} } @keyframes trex{ 0%{bottom:0px;} 25%{bottom:70px;} 75%{bottom:70px;} 100%{bottom:0px;} } OYUNUN JS KODLARI: const trex=document.querySelector("#trex"); const kaktus=document.querySelector("#kaktus"); function zipla(){ if(kaktus.classList!="kaktus-animate") { kaktus.classList.add("kaktus-animate"); } if(trex.classList!="trex-animate") { trex.classList.add("trex-animate"); setTimeout(function(){ trex.classList.remove("trex-animate"); },500); } } var carpismaKOntrol =setInterval(function(){ var trexBottom =parseInt(window .getComputedStyle(trex) .getPropertyValue("bottom")); var kaktusLeft =parseInt(window .getComputedStyle(kaktus) .getPropertyValue("left")); if(kaktusLeft > 0 && kaktusLeft < 40 && trexBottom < 40){ kaktus.classList.remove("kaktus-animate"); kaktus.style.display="none"; alert("oyun bitti"); } },10); OYUN İÇİ GÖRSEL: