گیم چکر

ਲਾਲ ਚੌਕਾ ਘੁਮਾ ਸਕਦਾ ਹੈ:

ਘੁਮਾਉਣ ਵਾਲਾ ਭਾਗ

ਇਸ ਟਿੱਪ ਦੇ ਪਹਿਲੇ ਭਾਗ ਵਿੱਚ, ਲਾਲ ਚੌਕਾ ਗੇਮ ਖੇਤਰ 'ਤੇ ਚਲ ਸਕਦਾ ਸੀ, ਪਰ ਘੁਮਾਉਣ ਅਤੇ ਘੁਮਾਉਣ ਦੀ ਸਮਰੱਥਾ ਨਹੀਂ ਸੀ:

ਕੰਪੋਨੈਂਟ ਨੂੰ ਘੁਮਾਉਣ ਲਈ, ਅਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਚਿੱਤਰਿਤ ਕਰਨ ਦਾ ਤਰੀਕਾ ਬਦਲਣਾ ਹੋਵੇਗਾ:

canvas ਐਲੀਮੈਂਟ ਦਾ ਇੱਕੋ ਇੱਕ ਉਪਲਬਧ ਘੁਮਾਉਣ ਵਾਲਾ ਮੈਥਡ ਪੂਰੇ ਕੈਨਵਸ ਨੂੰ ਘੁਮਾਉਂਦਾ ਹੈ:

ਜੋ ਵੀ ਕੈਨਵਸ 'ਤੇ ਚਿੱਤਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ, ਉਹ ਸਿਰਫ਼ ਕੰਪੋਨੈਂਟ ਨਹੀਂ ਘੁਮਾਉਣਗੇ, ਸਗੋਂ ਸਾਰੇ ਕੰਪੋਨੈਂਟ:

ਇਸ ਲਈ ਅਸੀਂ update() ਮੈਥਡ ਵਿੱਚ ਕੁਝ ਬਦਲਾਵ ਕਰਨ:

ਪਹਿਲਾਂ ਅਸੀਂ ਮੌਜੂਦਾ ਕੈਨਵਸ ਕੰਟੈਕਸਟ ਅਬਜੈਕਟ ਨੂੰ ਸੰਭਾਲਾਂਗੇ:

ctx.save();

ਫਿਰ ਅਸੀਂ translate ਮੈਥਡ ਦੀ ਮਦਦ ਨਾਲ ਪੂਰੇ ਕੈਨਵਸ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਕੰਪੋਨੈਂਟ ਦੇ ਕੇਂਦਰ 'ਤੇ ਖਿੜਾਉਣਾ ਚਾਹੀਦੇ ਹਾਂ:

ctx.translate(x, y);

ਫਿਰ ਅਸੀਂ rotate() ਮੈਥਡ ਦੀ ਮਦਦ ਨਾਲ ਚਾਹੀਦੀ ਘੁਮਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਾਂਗੇ:

ctx.rotate(angle);

ਹੁਣ ਅਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕੈਨਵਸ ਉੱਤੇ ਚਿੱਤਰਿਤ ਕਰਨ ਲਈ ਤਿਆਰ ਹਾਂ, ਪਰ ਹੁਣ ਅਸੀਂ ਪਲੇਟ ਦੇ ਕੇਂਦਰ ਨੂੰ 0,0 ਸਥਾਨ 'ਤੇ ਚਿੱਤਰਿਤ ਕਰਾਂਗੇ (ਅਤੇ ਪਲੇਟ ਨੂੰ ਪਲਟ ਕਰਾਂਗੇ ਅਤੇ ਘੁਮਾਉਣਗੇ):

ctx.fillRect(width / -2, height / -2, width, height);

ਕੰਮ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਅਸੀਂ restore ਮੈਥਡ ਦੀ ਮਦਦ ਨਾਲ ਇਸ ਕੰਟੈਕਸਟ ਅਬਜੈਕਟ ਨੂੰ ਉਸ ਸੰਭਾਲੇ ਸਥਾਨ 'ਤੇ ਵਾਪਸ ਲਿਆਉਣਾ ਹੈ:

ctx.restore();

ਜਿਸ ਵਿੱਚ ਇਹ ਕੰਪੋਨੈਂਟ ਇੱਕੋ ਇੱਕ ਘੁਮਾਉਣ ਵਾਲਾ ਹੈ:

component constructor

component ਕੰਸਟਰਕਟਰ ਵਿੱਚ ਇੱਕ ਨਾਮ ਹੈ angle ਦਾ ਨਵਾਂ ਗੁਣ, ਇਹ ਕੰਪੋਨੈਂਟ ਦੇ ਘੁਮਾਉਣ ਦੇ ਰੇਡੀਅਨ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ。

component ਕੰਸਟਰਕਟਰ ਦੇ update ਮੰਥਨ ਸਾਡੇ ਕੰਪੋਨੈਂਟ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਇੱਥੇ ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਘੁਮਾਉਣ ਦੇ ਪਰਿਵਰਤਨਾਂ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ:

ਇੱਕ ਉਦਾਹਰਣ

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

خود کو بچارو