Posts

Project Euler – Problem 1 Solution

Problem: If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.
* https://projecteuler.net/problem=1

Php;

<?php

// Parameters
$total = 0;

for ($i = 1; $i < 1000; $i++) {
    if ($i % 3 == 0 || $i % 5 == 0) {
        $total += $i;
    }
}
echo $total;

Javascript

'use strict';

// Parameters
var total = 0, i;

for (i = 1;i < 1000; i++) {
    if (i % 3 === 0 || i % 5 === 0) {
        total += i;
    }
}

console.log(total);

Making Snake Game With Javascript

Ever since childhood I have always wondered how to make games and I wanted to make my own game one day. After spending so much time in the software industry, I asked myself why I should not do it anymore. Thus, I will improve my Javascript skill and I will also look at the software development process in a way that I have never looked at before.

Before I started coding the game, I began to think about how the algorithm of the snake’s movement would be. Some of the first options that came to mind were; scan the entire playground in every move, to keep the coordinates of each cell of the snake on a array and update the old and new cells while moving. At the end, I understood that it was best to erase the last cell of the snake and attach a cell to the head.

First I created a snake object and I wrote the code that would create the playground. After creating the playground, I found a nice font for the game and added it. I wrote the algorithm that would make the snake move after I wrote a code that composes the snake and puts it into the playground.

When I wrote the snake’s movement for the first time, it continued to move outside the playing field and could go back inside. For example, while the snake was moving upwards, if I pressed down, it was moving within itself.

First of all, if the snake came to the edge of the playing field, I wrote the codes that would allow it to continue from the other end. So, for example, if the snake reached the left edge, it would have entered the right edge.

After that, I wrote the codes that control the direction key that moves according to the direction the snake moves. So, for example, if I press down on the button while the snake is moving up, it doesn’t do anything. After this I added the ability to start and stop the game.

At this point, I stopped taking care of for about a month or two. A lot of different thoughts and things got in.

Today the game came to mind again and I started again. Finally, I finished the game by adding the bait, the game score and the ability to manage game settings.

I enjoyed making this game very much and I am very excited to see the result. Only problem is if we press the arrow keys too fast, the snake starts to act ridiculous. I think this is caused by the frame rate of the game, but I have not figured it out yet.

My next goal is to write a tetris or a simpler than tetris.

You can play the game on here.

You can check the codes on here.

Sitede Sağ Tıklamayı Önleme

Bazı arkadaşların sitelerinde sağ tıklamayı önlemek içni soru sorduklarını farkettim. Bunun için basit bir kod paylaşacağım ama bilgilendirme yapmak istiyorum. İçeriğin çalınması korkusu ile bunu yapıyorsanız eğer, bu konularda az bilgili birisi her türlü içeriğinize ulaşur. Sayfa kaynak dosları eninde sonunda ulaşılır durumdadır. Kodumuza geçelim. Aşağıdaki script kodunu sitenize ekleyin.

document.addEventListener("contextmenu", function(e){
 e.preventDefault();
}, false);

Siteyi Arapçaya Uygun Hale Getirmek

Bu yazımda siteyi arapça veya benzer diller için sağdan sola çevirme işlemi anlatacağım. Öncelikle javascript fonksiyonlarını ekledikten sonra tek bir kod ile sağdan sola çevirme işlemini yapacağız.

Bu javascript kodumuz bootstrapın css kurallarını sağdan sola çevirmektedir. Kendi özel css kurallarımız için ayrı css kuralları yazmak gereklidir. Mesela styleAr.css gibi bir dosya oluşturup web sitesi dili arapça gibi sağdan sola dillerde olunca eklenecek şekilde ayarlayabilirsiniz.

Javascript

Aşağıdaki javascript kodlarını ayrı bir dosyada veya header etiketi içerisinde ekliyoruz.

var layout = {};
layout.setDirection = function (direction) {
    layout.rtl = (direction === 'rtl');
    document.getElementsByTagName("html")[0].style.direction = direction;
    var styleSheets = document.styleSheets;
    var modifyRule = function (rule) {
        if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
            rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
            rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
        }
        if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
            rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
            rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
        }
        if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
            rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
            rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
        }
        if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
            rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
        }
    };
    try {
        for (var i = 0; i < styleSheets.length; i++) {
            var rules = styleSheets[i].cssRules || styleSheets[i].rules;
            if (rules) {
                for (var j = 0; j < rules.length; j++) {
                    if (rules[j].type === 4) {
                        var mediaRules = rules[j].cssRules || rules[j].rules
                        for (var y = 0; y < mediaRules.length; y++) {
                            modifyRule(mediaRules[y]);
                        }
                    }
                    if (rules[j].type === 1) {
                        modifyRule(rules[j]);
                    }

                }
            }
        }
    } catch (e) {
        // Firefox might throw a SecurityError exception but it will work
        if (e.name !== 'SecurityError') {
            throw e;
        }
    }
};

Siteyi sağdan sola çevirmek için ise aşağıdaki kodu yazmamız yeterlidir.

layout.setDirection('rtl');

Serbest Çizimli Map Polygon

Bu proje serbest çizim özelliğine sahip bir map polygon projesidir. Harita için mapbox.js, serbest çizim için ise leaflet.freedraw.js kullandım. Eğer isterseniz leaflet.js de kullanabilirsiniz.

Canlı Önizleme Sayfası

GitHub Sayfası

Serbest Çizim Özelliği


Serbest çizim yaptığınızda bir Javascript fonksiyonu polygonun kordinatlarının bulunduğu diziyi alır ve encode eder. Bu encode edilmiş diziyi GET isteği ile yollar.

GET isteği geldiğinde ise bunu kontrol eden bir başka fonksiyon bunu alır ve decode eder. Elde edilen kordinat dizisine göre bir polygon alan çizer ve markerları haritaya yerleştirir.

Tüm bunlar için point on polygon problemini araştırdım ve ray casting algoritması kullanarak çözüm sağladım.

PHP ve Json

phpjsonPHP ve Json ikilisi arasındaki ilişkiyi ve Json’un PHP’de kullanımını anlatmak için öncelikle Json nedir onun üzerinde duralım.

Programlamada farklı platformlar arasında veri alışverişi ihtiyacı vardır. Mesela bir sosyal platformdan son paylaşımları çekip kendi projenizde kullanmak isteyebilirsiniz. Bu tür işlemler için platformlar arasında bir paylaşım olması lazımdır. Bu paylaşım için bazı teknolojiler geliştirilmiştir. Mesela bunlardan birisi XML teknolojisidir. Fakat XML, Javascript ile beraber iyi kullanılamamaktadır. İşte burada Json, Javascript ile uyumlu olduğundan çok tercih edilmektedir.

Json içerisindeki veriler her programlamada bulunan dizi ve obje şeklindedir.

Object

“{“ ile başlar ve “}” ile biter. İçerisine veriler “Anahtar” ve “Veri” şeklinde yazılır. Örnek;

{
 "name": "Erhan",
 "surname": "Kılıç"
}

Dizi

“[“ ile başlar ve “]” ile biter. İçerisindeki veriler sadece “Veri” şeklinde yazılır. Örnek;

[
 "Erhan", "Kılıç"
]

Json içerisinde ikisi bir arada istenildiği gibi kullanılabilir. Örnek;

{
 "tip": "kitap",
 "tur": "roman",
 "urunler": [
 {"ad": "Ihtiyar Kemanci", "yazar": "Nihat Genc"},
 {"ad": "Su Cilgin Turkler", "yazar": "Turgut Ozakman"},
 {"ad": "Kar", "yazar": "Orhan Pamuk"}
 ]
}

Json’un tercih edilmesinin en önemli sebebi Javascript’deki obje ve dizi yapısının tamamen aynı olmasıdır. Örnek olarak Javascript‘te de yapmaya çabaladığımızda siz de farkedeceksiniz.

PHP’de Json Fonksiyonları

Php’de Json ile ilgili işlemler şu şekilde yapılabilir. Kendi sitemizde Javascript ya da jQuery, AngularJs gibi kütüphanelerinde kullanmak için, başka platformlarla veri paylaşımında bulunup api oluşturmak için verileri Json formatında ekrana yazdırabiliriz. Başka bir yerden Json ile çektiğimiz veriyi php uygulamamızda kullanmak için kullanabiliriz.

Dikkat etmemiz gereken şey şudur. Eğer aşağıdaki fonksiyonları kullanmazsak bir string değer gibi algılayacağından içerideki verilere erişmek hayli zahmetli olacaktır.

json_encode()

Bu fonksiyon istediğimiz veriyi Json olarak yazdırmamızı sağlar. Örnek Kullanım;

$dizi = array(
 "tip"=> "kitap",
 "tur"=> "roman",
 "urunler"=> array(
 array("ad"=> "Ihtiyar Kemanci", "yazar"=> "Nihat Genc"),
 array("ad"=> "Su Cilgin Turkler", "yazar"=> "Turgut Ozakman"),
 array("ad"=> "Kar", "yazar"=> "Orhan Pamuk")
 )
);
$json = json_encode($dizi);
echo $json;

json_decode()

Bu fonksiyon ise bir yerden çektiğimiz Json veriyi decode ederek php yazılımımız içerisinde kullanmamızı sağlar. İçerideki verilere ise objedeki bir veriye ulaşır gibi ulaşabiliriz. Aşağıdaki örnekte Json veriyi bir string veri olarak oluşturuyorum. Çünkü dışarıdan Json veri çektiğimizde string bir veri olarak gelecektir aynı şekilde. Örnek;

$json ='{
 "tip": "kitap",
 "tur": "roman",
 "urunler": [
 {"ad": "Ihtiyar Kemanci", "yazar": "Nihat Genc"},
 {"ad": "Su Cilgin Turkler", "yazar": "Turgut Ozakman"},
 {"ad": "Kar", "yazar": "Orhan Pamuk"}
 ]
}';
$veri = json_decode($json);
echo $veri->tip;
echo $veri->tur;
foreach($veri->urunler as $urun){
 echo vardumb($urun);
 echo "<br/>";
}

Fonksiyon içerisinde ikinci bir parametre olarak true eklersek obje olarak değil direk dizi olarak kaydecektir ve erişimimiz de bu şekilde değişecektir. Örnek;

$json ='{
 "tip": "kitap",
 "tur": "roman",
 "urunler": [
 {"ad": "Ihtiyar Kemanci", "yazar": "Nihat Genc"},
 {"ad": "Su Cilgin Turkler", "yazar": "Turgut Ozakman"},
 {"ad": "Kar", "yazar": "Orhan Pamuk"}
 ]
}';
$veri = json_decode($json, true);
echo $veri[tip];
echo $veri[tur];
foreach($veri[urunler] as $urun){
 echo vardumb($urun);
 echo "<br/>";
}

Portfolio Items