Let’s make a HTML5 Snake Game!

I’ve made my first game; Snake! It is a simple HTML5 Snake Game.

HTML5 Snake Game

Now we’ll look for how to make a HTML5 snake game.

Before start to coding, let’s look what do you need for making the game;

  • A code editor (I prefer Sublime Text. It is the best!)
  • Pixi.js (Pixi is a very simple 2D library. It is more clean than pure WebGL functions.)

Now, we can start coding!

The SnakeGame() class;

We’re need a SnakeGame.Game()  class;

..and let we write methods of SnakeGame.Game()  class;

We’ve created the Game.prototype.setSnake()  method, now we need a Snake()  class;

Init method of Snake()  objects. We’ll use this for restarting the game.

We set a property for direction d in Snake()  class, and a step list property ss.

Now we’re creating a method for set current direction;


These are okay. Now we’re have the real issue; collisions.. There are three collision types;

  1. Border Collision (Detecting collision when snake impact to walls..)
  2. Meal Collision (Detecting snake eating meals.)
  3. Self Collision (Detecting collision when snake impact to itself!

Border Collision

This is more simple than Self Collision and Meal Collision. We can implement this very simply;

Meal Collision

Now we need understand the snake is hungry; This is more difficult than Border Collision.

These are okay..and let’s make the the difficult!..

Self Collision

Three collision types are ok. We can continue..


The Snake Step Method

The game need a step()  method. This is snake’s frame creation method.

Remember, we’ve already created a main frame creation method  for SnakeGame.Game()  class; SnakeGame.Game.step().

It was like such as;

Now we’re making a frame creation method for the snake;

FPS Synchronization

We need sync FPS with our specified snake speed.

This method has using parameters.delta (0 – 1] variable. This method takes into calculating the parameters.delta  variable.

We’ll get the delta from PIXI.ticker.Ticker()  object and pass it to this method.


Exporting a Game Controller Class

We need a class for exporting a controller class; Game(). We’ll able to control the game like;

  • Create new game
  • Pause or resume controls
  • Shortcuts binding
  • Drawing screen
  • Drawing game menus

We’re using Pixi.js‘s Ticker here.

All game controls is here. We’ll export this game controller class and use it.


Some Helpers


main.js that using Game Controller

Now we’re creating a main.js with using Game()  controller class.

We’ve already set keyboard shortcuts in Game()  controller class..  And make emitting some events from there; finish , begin , pause , coninue ..


A Simple HTML for Game Screen

CSS


index.html

We’ll include game screen (game.html) with iframe in here.

That’s all.. We creted a HTML5 Snake Game.

You can download source code from Github and play snake.

Share Button

PHP’nin saçmalıkları: Closure’ların aslında closure olmaması

Yine bu afedersiniz PHP yapacağını yaptı.. Bir de sorunu anlayıp kendisine has derme-çatma bir çözümle süsledikten sonra pis pis sırıtıyor ki sormayın.. 😀

Şimdi efenim bu PHP hazretlerinin closure’ları desteklediğini biliyoruz tabi ki bu bir yalan 😀 Meğer bu closure dediğimiz zımbırtı closure değilmiş.. Olay çok basit;

Bunu referansları kullanarak;

yada böyle çözmek mümkün;

Herşey iyi hoş çalışıyor en azından diyebiliriz tabii ama lakin ki öyle değildir 😀 PHP kendi yaklaşımının COW (Copy on Write) olduğunu söylüyor. Bu durumda use ($foo, $bar)  şeklinde lexical scope olarak kullanacağımız değişkenleri closure için PHP hazretlerine belirtiyoruz.. Elbette &$degisken  yerine $degisken dediğimizde insan bir an soruyor acaba bu $degisken  ayrıca bellekte kopyalanıyor mu? diye ama COW yaklaşımından dolayı kopyalamıyor ancak closure içinde değişirse PHP COW yapıyor.

Buraya kadar herşey normal gibi ama örneği birde şöyle deneyelim;

Evet closure kendini çağıramadı çünkü kendini göremiyor 😀 PHP closure’ları  use ($foo, &$bar)  sentaksı ile belirtilen değişkenleri en başta tanımlayarak yorumluyor. Closure kendini çağıramıyor çünkü PHP kendisini tanımlarken henüz kendisi yok 😀 Dolayısıyla kendisi tanımlanırken olmayan kendisini lexical scope’a belirtemiyor.. Bunu use ($f)  şeklinde değil de use (&$f)  şeklinde belirterek çözüyoruz. Böylece PHP’miz $f’yi sadece değişken referansı olarak aktarıyor ve fonksiyon bu değişkene tanımlandığında olay çözülüyor.

Tabi daha öncede belirttiğim gibi bütün bunlar nerede ne şekilde yorumlanıyor çok merak ediyorum zira bir önceki yazı da (PHP’nin Hastalıkları -1 (Referansların düzgün çalışmaması)) bahsettiğim gibi referanslar da düzgün çalışmıyor 😀

İşte süper closure ve lexical scope örneği 😀 Bazen insan korkmuyor değil lan bu PHP bir yerlerde “aga bu kadarı beni aşar ben sigint döndürür kaçarım hadi eyv..” derse diye düşünmüyor değilim 😀

Share Button

PHP’nin Hastalıkları -1 (Referansların düzgün çalışmaması)

Merhabalar,

PHP ile seviyeli bir ilişkimiz var tabi şu sıralar kendisine biraz sövmekteyim. Zira kendileri çok fazla saçmalık içermekte. Herneyse, konumuza dönelim.

Evet, maalesef, üzülerek söylüyorum; PHP değişken referansları hani o &$degisken  dediğimiz zımbırtılar düzgün çalışmıyor. Zend’ci abilerimiz Zend Engine’i böyle yapmış işte.

Şimdi örneğimize gelelim;

Pek popüler PHP’miz burada tabiri caizse sıçıyor. Sonuç tam bir hüsran;

Burada tek çare PHP’nin çakma objelerini kullanmak. Buna bir şeyler yapmışlar: ArrayObject() kendileri $dizi[..], $dizi[] = $birsey;  gibi sözdizimsel şekerleri desteklemekte.

Sorunu ilkel tip array  yerine ArrayObject() kullanarak çözebiliyoruz. O da şöyle;

Bu sefer sonuç gayet güzel;

Sorunu objeleri kullanarak çözmüş olsak da pek popüler PHP’miz burada da sıçmaya aralıksız devam etmekte efenim kendilerini bu büyük başarılarından ötürü tebrik ederiz.

Not: Tabi bu arada ArrayObject()‘in ciddi bir performans kaybı yaşattığını da belirtmekte fayda var. Yapacak bir şey yok o ayrı.

 

Share Button

Merhaba Dünya!

Bir kez daha bir blog açmış bulunmaktayım. Belki bir şeyler yazarım.

Share Button