Oyun Bileşenleri

Oyun alanına bir kırmızı kare ekle:

Bileşek Ekle

Bir bileşen yapıcı fonksiyonu oluşturun, bu bileşeni oyun alanına eklemenizi sağlar.

Bu nesne yapıcı fonksiyonubileşen (component)ilk bileşeni oluşturduk, adı myGamePiece:

örnek

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
{}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
{}

Kişisel Olarak Deneyin

Bu bileşenler, görünüşlerini ve hareketlerini kontrol eden özelliklere ve yöntemlere sahiptir.

Kare

Oyunun hareket için hazır olmasını sağlamak için her saniye 50 kez güncelliyoruz, bu da filmlerdeki kareler gibi.

首先，创建一个名为 updateGameArea() 的新函数。

在 myGameArea 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 updateGameArea() 函数（每秒 50 次）。再添加一个名为 clear() 的函数，用于清除整个画布。

在 component 构造函数中，添加了一个名为 update() 的函数，用于处理组件的绘制。

updateGameArea() 函数调用 clear() 和 update() 方法。

结果是组件每秒会被绘制和清除 50 次：

örnek

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  {}
{}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  {}
{}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
{}

Kişisel Olarak Deneyin

让它动起来

为了证明红色方块每秒被绘制 50 次，每次更新游戏区域时，我们都会将 x 位置（水平）更改一个像素：

örnek

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
{}

Kişisel Olarak Deneyin

为什么要清理游戏区？

似乎没有必要在每次更新时清理游戏区域。然而，如果我们省略 clear() 方法，组件的所有移动都会留下它在最后一帧中的位置的痕迹：

örnek

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
{}

Kişisel Olarak Deneyin

boyut değiştirme

Bileşenin genişliğini ve yüksekliğini kontrol edebilirsiniz:

örnek

10x140 piksel genişliğinde bir dikdörtgen oluşturun:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "kırmızı", 10, 120);
{}

Kişisel Olarak Deneyin

renk değiştirme

Bileşenin rengini kontrol edebilirsiniz:

örnek

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "mavi", 10, 120);
{}

Kişisel Olarak Deneyin

Diğer renk değerlerini de kullanabilirsiniz, örneğin onaltılık, rgb veya rgba:

örnek

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
{}

Kişisel Olarak Deneyin

konum değiştirme

Bileşekleri oyun alanına x ve y koordinatları kullanarak konumlandırıyoruz.

Kaplamanın sol üst köşesi koordinatı (0,0) dir.

Aşağıdaki oyun alanına fareyi sürükleyerek x ve y koordinatlarını görebilirsiniz:

Oyun alanının herhangi bir yerine bileşek yerleştirebilirsiniz:

örnek

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "kırmızı", 2, 2);
{}

Kişisel Olarak Deneyin

çok sayıda bileşek

Oyun alanında istediğiniz kadar bileşek yerleştirebilirsiniz:

örnek

var kırmızıGamePiece, maviGamePiece, sarıGamePiece;
function startGame() {
  kırmızıGamePiece = new component(75, 75, "kırmızı", 10, 10);
  sarıGamePiece = new component(75, 75, "sarı", 50, 60);
  maviGamePiece = new component(75, 75, "mavi", 10, 110);
  myGameArea.start();
{}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
{}

Kişisel Olarak Deneyin

hareket bileşeni

üç bileşeni farklı yönlere aynı anda hareket ettirmek için:

örnek

function updateGameArea() {
  myGameArea.clear();
  kırmızıGamePiece.x += 1;
  sarıGamePiece.x += 1;
  sarıGamePiece.y += 1;
  maviGamePiece.x += 1;
  maviGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
{}

Kişisel Olarak Deneyin