Javascript ile PONG Oyunu Kodlama - Oyuncu Mekaniği

Bu yazıda oyunumuzun temel mekaniklerinden olan oyuncu mekaniğini kodlayacağız. Bildiğiniz üzere PONG oyununda 2 tane karakter (aslında çubuk) oluyor. Birini bilgisayar kontrol ederken diğerini oyuncu kontrol ediyor. Bizim oyunumuzdaki oyuncunun kontrolü Mouse ile olacak. Karakter, Mouse'umuzun Y koordinatını takip edecek.

Oyuncu Mekaniği Kodları:
JavaScript:
//Bu Class'ı p5js'in draw() fonksiyonu içerisinde çağırmayı unutmuyoruz tabi ki.

class Player {
  constructor(width, height, offset) {
    this.width = width;
    this.height = height;
    this.offset = offset;
  }
 
  create() {
    noStroke();
    fill(255);
    this.playerY = min(mouseY - (this.height / 2), height - this.height);
    if (mouseY <= this.height/2) this.playerY = 0;
    rect(this.offset, this.playerY, this.width, this.height);
  }
}

Yazılan Tüm Kod:
JavaScript:
let playerWidth = 10, playerHeight = 80;
let xOffset = 20;

let player;

function setup() {
  createCanvas(800,500);
}

function draw() {
  background(0, 10, 20);
 
  //Player
  player = new Player(playerWidth, playerHeight, xOffset);
  player.create();
}

class Player {
  constructor(width, height, offset) {
    this.width = width;
    this.height = height;
    this.offset = offset;
  }
 
  create() {
    noStroke();
    fill(255);
    this.playerY = min(mouseY - (this.height / 2), height - this.height);
    if (mouseY <= this.height/2) this.playerY = 0;
    rect(this.offset, this.playerY, this.width, this.height);
  }
}

İlgili Video:
Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.

Yorumlar


Blog girdisi detayları

Ekleyen
oynozan
Okuma süresi
1 dakika okuma
Görüntüleme
578
Yorumlar
4
Son güncelleme
Değerlendirme
5,00 yıldız 1 değerlendirme

Yazılım kategorisindeki diğer girdiler

Bu girdiyi paylaş

Geri
Yukarı