Making Snake Game With Javascript

/1 Comment/in , /by

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

/0 Comments/in /by

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

/0 Comments/in , /by

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');

Sosyal Medya Paylaşım Butonları Nasıl Eklenir

/0 Comments/in , /by

Bu makalede temanıza sosyal medya paylaşım butonlarının nasıl eklenebileceğini anlatacağım. Ekleyeceğiniz tema ister html ister wordpress olsun farketmeyecek. Buradaki tüm kodlar sosyal medya platformlarının developers sayfalarından alınmadır. Oraya da bakabilirsiniz.

Facebook Paylaşım Butonu

Bu kodda data-href=”” parametresinin değerini değiştirmeniz gerekmekte. Orada site urlsi yazmalı. Eğer wordpress kullanıyorsanız <?php the_permalink() ?> yazabilirsiniz. 

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://www.sitenizinurlsi.com" data-layout="button_count"></div>

Twitter Tweet Butonu

Bu kodda data-href=”” parametresinin değerini değiştirmeniz gerekmekte. Orada site urlsi yazmalı. Eğer wordpress kullanıyorsanız <?php the_permalink() ?> yazabilirsiniz.  Aynı zamanda data-text=”” parametresinin değerini de değiştirmeniz gerekmekte. Orada da sayfa başlığı yer almalı. Eğer tweet içerisine via kısmı yani şu aracılığı ile paylaşılmıştır anlamına gelen bir yazı eklemek istiyorsanız data-via=”” parametresine içinde değeri (mesela twitter kullanıcı adınız) olacak şekilde yazabilirsiniz.  

<div style="display:inline-block;vertical-align:top">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.sitenizinurlsi.com" data-text="Sitenizin Başlığı"> Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
</script>
</div>

Pinterest Pin Butonu

Bunda herhangi bir değişiklik yapmanıza gerek yok. Sadece şunu unutmamalısınız, orada eklenen javascript dosyası sayfada sadece bir kere eklenmiş olmalı.

<div style="display:inline-block;vertical-align:top">
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>

Linkedin Paylaşım Butonu

Burada da herhangi bir değişiklik yapmanıza gerek yok.

<div style="display:inline-block;vertical-align:top">
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-counter="right"></script>
</div>

Google +1 Butonu

Bu kodda data-href=”” parametresinin değerini değiştirmeniz gerekmekte. Orada site urlsi yazmalı. Eğer wordpress kullanıyorsanız <?php the_permalink() ?> yazabilirsiniz.

<div style="display:inline-block;vertical-align:top">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<a class="g-plusone" data-size="medium" data-href="http://www.sitenizinurlsi.com"></a>
</div>