ScrollRoad - Demo30.06.2013

road1 ScrollRoad

Orta okuldayken bilgisayarımda Road Rash diye bir oyun vardı. Bu oyunda şehir içinde yasadışı motosiklet yarışı yapıyordunuz. Çok severek oynardım; rakiplerinizi motor üzerinde yumrukla, tekmeyle, sopa ve zincirle döverek saf dışı bırakabiliyordunuz. Zincirle ya da sopayla vururken çıkan sesler... Oyunun müzikleri de şahaneydi. Çok severdim yani.

Şimdiye kadar benim bilgisayarım olmuş tüm bilgisayarların yüzleştiği bir gerçek vardır: Format! Bir formattan sonra yüklenen her şey başka bir formatla gider. Bu oyun da öyle oldu, adını da aklımda tutmamıştım. Oyunu ancak yıllar sonra, yani geçen günlerde Google'da "moto race where you kick" benzeri bir arama sorgusuyla bulabildim. "Hmm, adı Road Rash'mış hemen indireyim."

İndirdim. Birkaç gün neredeyse aralıksız oynadım. Her bölümde farklı sayıda bina, yol, rakip, yaya ve masum araç oluşturuluyor. Her bölümün bu özelliklerinin sabit bir tanımı olduğunu, karşılaşacağınız durumun her seferinde değişebileceğini düşündüm. Yani x bölümünde a noktasında bir polis motoru olması önceden belirlenmiş, kendisiyle gireceğiniz etkileşim size bağlı.

Buna benzer düşünsel süreçlerin, esinlenmelerin sonunda oyundaki gibi yol olarak belirlenmiş yerlerde istenilen miktarda yol oluşturacak, üzerinde bir araçla hareket etmenizi, çevreyle etkileşime girmenizi sağlayacak bir javascript oyunu yapmayı hayal ettim.

<div id="road">
<!-- rel: karşı şerit genişliği, alt: bu tip yoldan kaç tane geleceği -->
<div class="yol" rel="2" alt="8"></div>
<div class="yol gec" rel="1t2" alt="1"></div>
<div class="yol" rel="1" alt="8"></div>
<div class="yol gec" rel="2t1" alt="1"></div>
<div class="yol" rel="2" alt="8"></div>
[...]
</div>

HTML'de istenilen türde ve sayıda yol parçasını meydana getirecek olan katmanları ayarladım. Bu yol parçalarının hepsinin toplam uzunluğu, o bölümde katedilecek toplam mesafe oldu. Bu mesafeye dayanarak yol kenarlarına yerleştirilecek ev sayısı, yoldaki masum araç yoğunluğu gibi değişkenleri kafama göre belirledim. Uygun bir araba resmi belirledim, klavye kontrolleri atadım, ev grafiklerini kendim çok ilkel biçimde hazırladım, araba grafiğini siyah-beyaz yapıp hafif ayarlamalarla yeni bir grafik dosyası haline getirip onu yoldaki masum araçlara atadım. Masum araçlara çarpınca güya size küfür ettiklerini ifade eden konuşma balonları ayarladım. Oyuna başlamak için herhangi bir tuşa basmanızı söyleyen giriş ekranını yaptım.

var webme = "http://img.webme.com/pic/s/scriptype/";
var ccnr = " center center no-repeat";

[...]

//Yol döşeme
$("div#road > div.yol").each(function(){
  var t = $(this);
  var r = t.attr('rel');
  var a = t.attr('alt');
  for (i=0;i<a;i++) {
     t.append('<div class="parc"></div>');
  }
});

$("div.parc").each(function(){
  var tr=$(this).parent('div.yol').attr('rel');
  $(this).css('background','url('+webme+'r'+tr+'.png)'+ccnr);
});

Aracın ileri doğru hareket ediyor gibi görünmesini sağlamak için scrollTop() metodunu kullandım: siz ileri bastıkça ekran katmanının scrollTop değeri değişiyor. Ayrıca siz ileri bastıkça scrollTop değerinin değişme oranı da değişiyor. İleri tuşuna bastıkça aralıksız olarak, başlangıçta sıfır olan bir sayı değişkenini arttırıyorsunuz. O değişkendeki değeri olduğu gibi scrollTop değerinden çıkarmak mantıksız ve gerçekdışı olacağından, o değerin 20'de 1'i gibi bir değeri işleme alan, yine o değer de aşırı bir noktaya ulaştıysa diye kontrol edip belli bir tavan değerde sabitleyen bir fonksiyon yazdım. Aracın giderek hızlanması, belli bir hızda da "top speed"e ulaşmasını sağlamış oldum. Hiçbir şeye basmayınca, o ana kadar yükselttiğiniz değer gerçekçi bir hızla düşmeye başlıyor, bu da giderek yavaşlamanızı sağlıyor. Frenlerde ise daha hızlıca yavaşlayıp sıfırda sabitleniyor. Sağ-sol yönlendirmesini tamamen CSS değerini oynatarak sağladım. Sağ-sol tuşlarına basınca aracın sağa-sola dönme grafikleri uygulanıyor, sonra varsayılan grafik geri uygulanıyor. Bir masum araca çarptığınızı tespit edip hızınızı anında sıfırlamak için de, çirkin bir ruh haliyle, aracınızın önünün pozisyonuyla herhangi bir aracın arkasının pozisyonu çakışıyor mu onu kontrol ettirdim.

Tüm bunları anlatmamın nedeni ise aslında çok üst düzey olmayan javascript bilgisiyle hem size zaman geçirtecek, hem etrafınızdakileri şaşırtacak uygulamalar, oyunlar yapabileceğinizi ve basit bir ilhamla aklınıza koyduğunuz işi gerçekleştirmenin zevkli bir şey olduğunu göstermekti.

Ben oyunu geliştirirken belli bir noktada tatmin olduğum ve zevk vermeyecek bir şeyle uğraşmayı hiç sevmeyen biri olduğum için oyunu tam anlamıyla yarım yamalak bıraktım. Rakip araç, yaya, gösterge paneli eklemedim, gerek kod gerek tarayıcı optimizasyonu yapmadım. Gerçekten. Chrome dışında hiçbir tarayıcıda düzgün çalışmıyor.

Aşağıdaki linkten oyunun tamamlanmamış son haline ulaşabilirsiniz.

Demo: ScrollRoad