HTML5 Oyununuza Çarpışma Ekleme - AYAKLAR

HTML5 video oyunlarındaki en ilginç şeyler sprite'ler birbirine çarpıp çarpıştıklarında gerçekleşir. Oyun motorları normalde iki sprite'nin çakışıp çakışmadığını test etmek için bir takım araçlara sahiptir. Bu, çarpışma algılama olarak adlandırılır ve bir takım yollarla yapılabilir. Bu örnek, standart sınırlayıcı dikdörtgen düzenini kullanmaktadır. Mükemmel değil, ancak uygulanması çok kolay ve yaygın olarak kullanılmaktadır.

Oyununızda sınırlayıcı dikdörtgen çarpışmalar nasıl kurulur

colTest'e bir göz atın. html ve basit bir örnek göreceksiniz.

ColTest'te. html örneğinde, kullanıcı yaratıcıyı fareyle hareket ettirir ve yaratıcı ekranın ortasındaki kutuya dokunduğunda bir mesaj alırsınız.

COLTEST. html checkCollisions (); kutu. güncelleştirme(); yaratık. update ();} // son güncelleme; function checkCollisions () { if (box. CollidesWith (critter)) { çıktı. innerHTML = "Çarpışma"; } else { çıktı. innerHTML = "Çarpışma yok"; } // end if } // son checkCollisions boş

Bu kodda bazı ilginç şeyler oluyor:

1. Normal fare imlecini gizleyin.

   Farenizi takip eden başka bir nesneye sahip olduğunuzda, normalde normal ok imlecini gizlemek istersiniz. SimpleGame'de oyunu kullanın. Oyun ekranının içinde fare imlecini gizlemek için hideCursor () yöntemi.

2. Birden fazla sprite oluşturun.

   İki tango ya da çarpışmak gerekiyor. Bu örnekte, kutu sabit kalacak ve fareyi izleyen bir yaratık olacaktır.

3. Kritere bir FollowMouse () yöntemi verin.

   Bu örnekte, yaratıcı fareyi takip ettirin. Bir followMouse () yöntemi oluşturarak başlayın.

4. Farenin konumunu belirleyin.

   Fare konumu (simpleGame.js'de) belge ile belirlenir. mouseX ve belge. mouseY özellikleri.

5. Fare konumunu yaratıcı konuma kopyalayın.

   Sığanın x konumunu ayarlamak için fare x konumunu kullanın ve y ile tekrarlayın.

6. Yaratıcının followMouse () yöntemini her kareye çağırın.

   Her zamanki gibi, update () işlevi, art arda gerçekleşmesi gereken kodu koyduğunuz yerdir.

ColTest ile oyun oynarsanız. html sayfasında, muhtemelen çarpışmaların tam olmadığını fark edeceksiniz. Yaratıcı kutuya dokunmadığında bile bir çarpışma kaydı yaptırmak mümkündür. Bu önemlidir, çünkü simpleGame sınırlayıcı kutu çarpışmaları olarak adlandırılan bir düzen kullanır.

Bu, gerçekte, görüntülerin çarpıp karışmadığını değil, görüntülerin çevresindeki dikdörtgelerin çarpışıp çarpmayacağını kontrol etmediğiniz anlamına gelir. Bu örnekte, fark ufak olmakla birlikte, bu mekanizma ile, özellikle de uzun ve ince unsurlarla bazen önemli hatalar göreceksiniz. Bir sprite döndüğünde, sınırlayıcı dikdörtgenin boyutu değişebilir.

Oyununuz için mesafeye dayalı çarpışmalar

sınırlayıcı çember çarpışmaları olarak adlandırılan alternatif bir çarpışma algılama biçimi var. Bu mekanizma ile, sadece iki sprite merkezi arasındaki mesafeyi hesaplarsınız ve bu değer bir miktar eşik değerden küçükse, onu bir çarpışma olarak değerlendirirsiniz. Bu yaklaşımın iki avantajı vardır:

• Çarpışma mesafesi sabittir. Görüntüler döndürülürse, görüntülerin boyutunu değiştirse bile görüntü merkezleri arasındaki mesafe değişmez.

• Çarpışma eşiği çeşitlendirilebilir. İstediğiniz hassasiyeti ayarlayabilirsiniz. Kolay çarpışmalar için büyük bir çarpışma yarıçapı ve yalnızca çarpıtmalar birbirine çok yakın olduğunda çarpışmaların tetiklenmesini istiyorsanız daha küçük bir yarıçap ayarlayın.

simpleGame kitaplığı Sprite nesnesi, bir sprite'tan diğerine olan mesafeyi hesaplayan distanceTo () yöntemine sahiptir. Uzaktan bu koda bir örnek görebilirsiniz. html örneği:

mesafe. html var oyun; var kutu; yaratık; var çıktı; işlev init () {game = yeni Sahne (); oyun. hideCursor (); kutu = yeni Sprite (oyun, "simpleBox. png", 50, 50); critter = yeni Sprite (oyun, "yaratıcı. gif", 50, 50); çıktı = belge. getElementById ("çıkış"); // kutu sabit konum kutusunu ver. ayarlanan konum (200, 150); Kutu. (0) setspeed; yaratık. setPosition (100, 100); yaratık. (0) setspeed; // critter fare yaratıcısı tarafından kontrol edilir. followMouse = işlevi () {this. setX (doküman mouseX); bu. setY (document. mouseY);} // sonu takipMouse oyunu. start ();} / / bitiş init işlevi update () {oyun. açık(); yaratık. followMouse (); checkDistance (); kutu. güncelleştirme(); yaratık. update ();} // son güncelleme; function checkDistance () { dist = kutu. DistanceTo (yaratık); if (dist <50) { çıktı. innerHTML = "Çarpışma:" + dist; } else { çıktı. innerHTML = "Çarpışma yok:" + dist; } // end if } // son checkDistance boş

Mesafee dayalı çarpışma yöntemi, sınırlayıcı dikdörtgen biçimine çok benzemektedir. Eski checkCollisions () gibi davranacak bir checkDistance () işlevi oluşturun. CheckDistance'da gerçekleşen şeylerin adımları:

1. İki sprite arasındaki mesafeyi bulun.

   İki sprite arasındaki mesafeyi belirlemek için sprite'ın distanceTo () yöntemini kullanın.

2. Mesafe bir miktar eşiğin altında ise, bir çarpışma olarak sayın.

   Genellikle, bir çarpışma eşiğinin başlangıç ​​noktası olarak küçük sprite genişliğini kullanmanız gerekir; ancak bunu, çarpışmaları daha fazla veya daha düşük olası kılmak için ayarlayabilirsiniz.

3. Çarpışma durumunu bildirin.

   Bu örnekte basitçe "çarpışma" veya "çarpışma yok" yazdı; ancak gerçek bir oyunda çarpışmalar diğer eylemlerin tetikleyicileri: puanın artırılması, hayat sayısının azaltılması, çarpışan öğelerin hızının veya konumunun değiştirilmesi, ya da her neyse. (Umarım patlamalar içerir.)