گیم جزئی

کورس پیش کئے گئے:

گیم ایریا میں ایک قرمز مربع کا اضافہ کریں:

کمپوننٹ کا اضافہ کریں

یہ آئیٹم کانسٹرکٹر کہلاتا ہے، جو آپ کو اجازت دیتا ہے کہ آپ کمپوننٹ کو گیم ایریا میں شامل کریں。کمپوننٹ (کامپوننٹ)، ہم نے پہلا کمپوننٹ بنایا، جس کا نام می گیم پیسیز:

ਪ੍ਰਤੀਯੋਗੀ

وار می گیم پیسیز;
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);
}

نوکا تیسر

یہ کمپوننٹ اپنے انداز اور موشن کی کنٹرول کرنے والی خاصیت اور طریقوں کا حامل ہیں。

فریم

لئکہ گیم کا موشن تیار ہو، ہم ہر سیکنڈ میں 50 بار اپڈیٹ کردیگے، جو فلموں میں فریم جیسا نظر آتا ہے。

ਦੀ ਸਿਰਜਣਾ ਕਰੋ updateGameArea() ਪਹਿਲਾਂ, ਇੱਕ ਨਾਮ

ਦੇ ਫੰਕਸ਼ਨ ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਹੈ ਦੇ ਨਵੇਂ ਫੰਕਸ਼ਨ ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਹੈ。 myGameArea updateGameArea() ਫੰਕਸ਼ਨ (ਹਰ ਸਕਾਰੀਆਂ 50 ਵਾਰ) ਵਿੱਚ ਇੱਕ ਅੰਤਰ ਜੋ ਹਰ 20 ਮਿਲੀਸਕਾਰੀਆਂ ਵਿੱਚ ਚਲਾਉਂਦਾ ਹੈ clear(); ਵਿੱਚ ਸਾਫ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਦੇ ਫੰਕਸ਼ਨ ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਹੈ component ਕੰਸਟਰਕਟਰ ਵਿੱਚ, ਇੱਕ ਨਾਮ update() ਦੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

updateGameArea() ਫੰਕਸ਼ਨ ਕਾਲ ਕਰਨ clear(); ਅਤੇ update() ਮੇਥੋਡ。

ਨਤੀਜਾ ਇਹ ਹੁੰਦਾ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ ਹਰ ਸਕਾਰੀਆਂ ਵਿੱਚ 50 ਵਾਰ ਚਿੱਤਰਿਤ ਅਤੇ ਸਾਫ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

ਪ੍ਰਤੀਯੋਗੀ

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();
}

نوکا تیسر

ਇਸ ਨੂੰ ਗਤੀ ਦਿਓ

ਲਾਲ ਚੌਕਟੀ ਹਰ ਸਕਾਰੀਆਂ ਵਿੱਚ 50 ਵਾਰ ਚਿੱਤਰਿਤ ਹੁੰਦੀ ਹੈ, ਹਰ ਅੱਪਡੇਟ ਗੇਮ ਖੇਤਰ ਵਿੱਚ ਅਸੀਂ ਵਿੱਚ ਵਾਲੇ ਸਥਾਨ ਵਿੱਚ ਇੱਕ ਪਿਕਸਲ ਬਦਲਾਉਂਦੇ ਹਾਂ:

ਪ੍ਰਤੀਯੋਗੀ

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

نوکا تیسر

ਕਿਉਂ ਗੇਮ ਖੇਤਰ ਸਾਫ ਕਰਦੇ ਹਾਂ?

ਲੱਗਦਾ ਹੈ ਕਿ ਹਰ ਅੱਪਡੇਟ ਵਿੱਚ ਗੇਮ ਖੇਤਰ ਸਾਫ ਕਰਨਾ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ। ਪਰ, ਜੇਕਰ ਅਸੀਂ clear(); ਮੇਥੋਡ, ਕੰਪੋਨੈਂਟ ਦੀ ਸਾਰੀ ਗਤੀ ਆਖਰੀ ਫ੍ਰੇਮ ਵਿੱਚ ਉਸ ਦੀ ਸਥਿਤੀ ਦਾ ਪਾਠ ਛੱਡ ਦਿੰਦੀ ਹੈ:

ਪ੍ਰਤੀਯੋਗੀ

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

نوکا تیسر

ਮਾਪ ਬਦਲਣਾ

ਤੁਸੀਂ ਉਪਾੰਗਣ ਦੇ ਚੌਦਾਰਤਾ ਅਤੇ ਉਚਾਈ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ:

ਪ੍ਰਤੀਯੋਗੀ

10x140 ਪਿਕਸਲ ਦਾ ਚੌਕਾ ਰੈਕਟੈਂਜ਼ ਬਣਾਓ:

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

نوکا تیسر

ਰੰਗ ਬਦਲਣਾ

ਤੁਸੀਂ ਉਪਾੰਗਣ ਦੇ ਰੰਗ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ:

ਪ੍ਰਤੀਯੋਗੀ

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

نوکا تیسر

ਤੁਸੀਂ ਹੋਰ ਰੰਗ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਹੈਕਸਾਡੈਸੀਮਲ, rgb ਜਾਂ rgba:

ਪ੍ਰਤੀਯੋਗੀ

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

نوکا تیسر

ਸਥਾਨ ਬਦਲਣਾ

ਅਸੀਂ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਮਦਦ ਨਾਲ ਉਪਾੰਗਣਾਂ ਨੂੰ ਖੇਡ ਖੇਤਰ 'ਤੇ ਸਥਿਤ ਕਰਦੇ ਹਾਂ。

ਕੈਨਵਾਸ ਦੇ ਉੱਪਰੋਕਤ ਲੰਬੇ ਕੋਣ ਦੇ ਨਿਰਦੇਸ਼ਾਂ (0,0) ਹਨ。

ਨਿਚੇ ਦੇ ਖੇਡ ਖੇਤਰ 'ਤੇ ਮਾਉਸ ਲਟਕਾਓ ਅਤੇ ਉਸ ਦੇ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਦੇਖੋ:

ਤੁਸੀਂ ਉਪਾੰਗਣਾਂ ਨੂੰ ਖੇਡ ਖੇਤਰ ਦੇ ਕਿਸੇ ਸਥਾਨ 'ਤੇ ਰੱਖ ਸਕਦੇ ਹੋ:

ਪ੍ਰਤੀਯੋਗੀ

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

نوکا تیسر

ਬਹੁਤ ਸਾਰੇ ਉਪਾੰਗਣ

ਤੁਸੀਂ ਖੇਡ ਖੇਤਰ ਵਿੱਚ ਕਿਸੇ ਪੈਮਾਨੇ ਦੇ ਉਪਾੰਗਣਾਂ ਨੂੰ ਰੱਖ ਸਕਦੇ ਹੋ:

ਪ੍ਰਤੀਯੋਗੀ

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

نوکا تیسر

ਚਲਾਉਣ ਵਾਲਾ ਉਪਾੰਗਣ

ਤਿੰਨ ਉਪਾੰਗਣਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਚਲਾਓ:

ਪ੍ਰਤੀਯੋਗੀ

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

نوکا تیسر