HTML5 Oyuna Yerçekimi Nasıl Eklenir - mankenler

Yerçekimi hesaplamaları en başından beri HTML5 video oyunlarının bir parçası olmuştur. Aslında düşünülmesi gereken iki tür yerçekimi vardır. Platform tarzı oyunlarda, oyuncu bir gezegene yakın ve tüm yerçekimi her şeyi düz olarak aşağıya çekiyor gibi görünüyor.

Hızlanma vektörlerinin nasıl ekleneceğini bildiğiniz zaman, platform tarzı yerçekimi aslında çalışmak kolaydır. Yer çekimini, her karede her zaman küçük bir miktarda çeken sabit bir kuvvet olarak düşünün.

Oyununuza roket nasıl eklenir

Bu örnekte ilginç bir başka özellik daha var. Yukarı ok tuşuna bastığınızda, araba resmi alevlerle birlikte başka bir görüntüye dönüştürülür.

HoverCar örneği için kod tam olarak şu şekilde gösterilir:

hoverCar. html var araba; var şehir; var oyun; işlev Araba () {tCar = yeni Sprite (oyun, "hoverCar. png", 70, 50); tCar. (0) setspeed; tCar. hSpeed ​​= 0 tCar. checkKeys = işlevi () {tCar. changeImage ("hoverCar. png"); if (keysDown [K_LEFT]) { bu. hSpeed ​​- = 1 } if (keysDown [K_RIGHT]) { bu. hSpeed ​​+ = 1 } if (keysDown [K_UP]) { bu. addVector (0, 5); bu. changeImage ("hoverCarThrust. png") ;} Bu. changeXby (bu h.Speed); } // son checkKeys tCar. checkGravity = işlev () { if (this.y> 580) { bu. setPosition (bu x, 580); } else { bu. addVector (180, 1); } // end if } // son checkGravity return tCar;} // son araba def işlevi init () {game = yeni Sahne (); araba = yeni Araba (); şehir = yeni Sprite (oyun, "şehir. png", 800, 600); Kent. (0) setspeed; Kent. setPosition (400, 300); oyun. start ();} / / bitiş init işlevi update () {oyun. açık(); Kent. güncelleştirme(); araba. checkKeys (); araba. checkGravity (); araba. update ();} // son güncelleme

Oyundaki kuvvet vektörü nasıl kullanılır

Yerçekimi aslında oldukça basittir. Bu sadece bir kuvvet vektörü. Bu örnekteki diğer ilginç kısımlar, aracın görüntü açısını değiştirmeden yatay hareketi değiştirmeyi ve iticiyi göstermek için görüntüyü ayarlamayı içerir. Adımlar:

1. İki farklı görüntü oluşturun.

   Resmin iki farklı versiyonunu oluşturmak için görüntü düzenleyicinizi kullanın.

2. Sıradan bir görüntü oluşturun.

   Çoğu araç sprite gibi, bir checkKeys () yöntemine ihtiyacınız vardır. Bu sıradan bir şekilde kurulmuştur, ancak davranış biraz farklıdır.

3. Görüntüyü varsayılana ayarlayın.

   Varsayılan görüntünün iticileri yok. Bunu varsayılan görüntü yapmak için changeImage () yöntemini kullanın. İticiler açıldığında, görüntü değişecektir.

4. Yatay hızı kontrol etmek için bir değişken kullanın.

   Aracın yatay hızını yönetmek için hSpeed ​​değişkenini oluşturabilirsiniz.

5. hSpeed'i değiştirmek için sol ve sağ okları ayarlayın.

   Sol ve sağ ok tuşları hSpeed ​​değişkenini değiştirir.

6. Yatay hızı ayarlamak için changeXby kullanın.

   Tüm tuşları kontrol ettikten sonra, aracın x değerini hSpeed'in geçerli değerine değiştirin.

7. Yukarı ok, bir vektör yukarıya ekler.

   Kullanıcı, yukarı ok tuşuna bastığında küçük bir kuvvet vektörü yukarıya eklemek için şimdi rezil addVector () işlevini kullanın. Unutmayın, 0 derece yükseldi. Oyununuz için istediğiniz itme miktarını elde etmek için bu değerle oynayın.

8. Yukarı ok tuşuna bastığınızda iticileri gösterin.

   Kullanıcı yukarı okuna basarsa iticileri göstermeniz gerekir. Sprite görüntüsünü roket iticileri olana ayarlamak için changeImage () yöntemini kullanın.

9. Bir checkGravity () yöntemi oluşturun.

   Bu yöntem, yerçekimini telafi etmek için her karede çağrılır.

10. Yerde olup olmadığınızı kontrol edin.

    Bu örnekte, zemin 580'den büyük bir y değeri olarak tanımlanır.

11. Zemin üzerindeyseniz yerçekimi kuvveti vektörü ekleyin.

    Birikebileceği için yerçekimi kuvveti vektörünün oldukça küçük olması gerekir. İstediğiniz davranışı elde etmek için yerçekimi kuvvetini ve iticileri dengelemeniz gerekir. Yer çekimi çok güçlü olursa iticiler çalışmazlar. İticiler çok güçlü olursa, araba sadece uzaya doğru uçar.