గేమ్ రోటేషన్

ఎరుపు కాంపోనెంట్ చక్రాలు చేయగలదు:

చక్రాలు వండలు

ఈ శిక్షణలో మొదటి భాగంలో, ఎరుపు కాంపోనెంట్ కాంపోనెంట్ అందుబాటులో ఉంది కానీ చక్రాలు చేయడానికి కాదు చక్రాలు చేయడానికి చేయబడింది.

కాంపోనెంట్ ను చక్రాలు చేయడానికి, మామూలు గణనా పద్ధతిని మార్చాలి.

కాంపాస్సు అబ్జెక్ట్ మాత్రమే ప్రత్యక్షంగా చక్రాలు ఉంటుంది పద్ధతి:

మీరు కాంపాస్సుపైన మరెల్లా ప్రతి కాంపోనెంట్ కూడా చక్రాలు ఉంటుంది, కానీ కేవలం ప్రత్యేక కాంపోనెంట్ కాదు.

దీనికి కారణం ఇది: update() పద్ధతిలో కొన్ని మార్పులు చేయడానికి:

మొదట, మేము ప్రస్తుత కాంపాస్సు అబ్జెక్ట్ ని సేవ్ చేస్తాము:

ctx.save();

కొన్నిసార్లు మేము translate పద్ధతిని ఉపయోగించి మొత్తం కాంపాస్సును కేంద్ర కాంపోనెంట్ కేంద్రానికి తిరిగి పెట్టాము:

ctx.translate(x, y);

కొన్నిసార్లు మేము rotate() పద్ధతిని ఉపయోగించి కావాలి చక్రాలు చేయడానికి:

ctx.rotate(angle);

ఇప్పుడు మేము కాంపోనెంట్ ను కాంపాస్సు పైన దృశ్యాన్ని చేయడానికి తయారవుతున్నాము, కానీ ఇప్పుడు మేము కేంద్రంలో పోసించడానికి సరిగ్గా సరిగ్గా కాంపాస్సును తిరిగి పెట్టాము:

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

పూర్తి అయినప్పుడు, మామూలు పద్ధతిని ఉపయోగించి ఈ కాంటెక్స్ట్ అబ్జెక్ట్ మునుపటి స్థానానికి తిరిగి పెట్టాలి:

ctx.restore();

ఈ కాంపోనెంట్ ఒక మాత్రమే చక్రాలు ఉంటుంది:

కాంపోనెంట్ నిర్మాణకర్త

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

亲自试一试