Vue.js ile Temel Oyun Geliştirme

Vue.js, genellikle kullanıcı arayüzleri ve tek sayfa uygulamaları (SPA) geliştirmek için tercih edilen bir JavaScript kütüphanesidir. Ancak, Vue.js'in gücünü kullanarak basit oyunlar da geliştirmek mümkündür. Bu yazıda, Vue.js ile nasıl basit bir oyun yapabileceğinizi keşfedeceğiz.

Oyun Fikri

Yaratacağımız oyun, kullanıcıların belirli bir süre içinde ekrandaki hedefleri tıklamaları gereken basit bir oyun olacak. Oyun, kullanıcıların hızını ve yeteneklerini test edecek.

Başlangıç Noktası

Öncelikle Vue.js projelerinizi başlatmak için Vue CLI aracını kullanacağız. Terminalden şu komutu çalıştırabilirsiniz:

vue create basit-oyun

Proje Yapısı

Projeyi oluşturduktan sonra, aşağıdaki yapıyı oluşturacağız:

basit-oyun/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── Target.vue
│   ├── App.vue
│   └── main.js
└── public/

Target Bileşeni Oluşturma

Target.vue bileşenini oluşturarak başlayalım. Bu bileşen, tıklanabilir hedef olacak:

<template>
  <div class=\"target\" @click=\"hit\" :style=\"{ top: position.y + \'px\', left: position.x + \'px\' }\">
    🎯
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: {
        x: Math.random() * 300,
        y: Math.random() * 300,
      },
    };
  },
  methods: {
    hit() {
      this.$emit(\'targetHit\');
      this.position.x = Math.random() * 300;
      this.position.y = Math.random() * 300;
    },
  },
};
</script>

<style>
.target {
  position: absolute;
  font-size: 40px;
  cursor: pointer;
}
</style>

Bu bileşen, ekrandaki rastgele bir konumda belirecek ve kullanıcının üzerine tıkladığında, konumunu değiştirecektir.

App.vue Düzenlemesi

Ana uygulama bileşenini düzenleyerek, hedef bileşenini içe aktaralım ve oyunu başlatalım:

<template>
  <div id=\"app\">
    <h1>Hedefi Yakala!</h1>
    <p>İlk 10 vuruşunu tamamlayana kadar bekle!</p>
    <Target v-for=\"index in 10\" :key=\"index\" @targetHit=\"handleHit\" />
    <p>Toplam Vuruş: {{ hits }}</p>
  </div>
</template>

<script>
import Target from \'./components/Target.vue\';

export default {
  components: { Target },
  data() {
    return {
      hits: 0,
    };
  },
  methods: {
    handleHit() {
      this.hits++;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

Oyun Turu

Bu kadar! Artık oyunumuz çalışır durumda. Kullanıcı hedefleri tıkladıkça hits değişkeni artacak. Bununla birlikte bazı stil düzenlemeleri yaparak, hedefin daha belirgin olması için daha iyi görseller ekleyebiliriz.

Sonuç

Vue.js ile basit bir oyun geliştirme süreci oldukça eğlenceli ve öğreticiydi. Bu örnek, daha karmaşık ve etkileşimli projelere geçiş için iyi bir temel sağlıyor. Artık Vue.js ile daha geniş uygulamalar geliştirmek için hazırız!

Daha Fazla Keşfet

Vue.js dünyasında oyun geliştirme ile ilgili daha fazla kaynak ve makaleyi inceleyerek, becerilerinizi geliştirebilirsiniz. Hızlı başlangıçlar için Vue.js belgelerini gözden geçirmeyi unutmayın!