Κίνηση Παιχνιδιού

Με τη χρήση μιας νέας μεθόδου για τη σχεδίαση των στοιχείων που αναφέρεται στο κεφάλαιο γύρω από τη γυρίσματα του παιχνιδιού, οι κινήσεις είναι πιο ευελιξία.

πώς μετακινείται το αντικείμενο;

στο component Προσθέστε μια συνάρτηση συντεταγμένη το μέγεθος της ταχύτητας της μονάδας.

επίσης να αλλάξουμε την ιδιότητα newPos() μεθόδους να κάνουμε μερικές αλλαγές, για να συντεταγμένη και γωνία υπολογισμό της θέσης της μονάδας.

Με προεπιλογή, η επιφάνεια της μονάδας είναι κατευθυνόμενη προς τα πάνω, και με τη ρύθμιση συντεταγμένη ιδιότητα σε 1, η μονάδα θα ξεκινήσει να κινείται μπροστά.

Παράδειγμα

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  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();
  }
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

Δοκιμάστε το προσωπικά

στροφή

Ελπίζουμε επίσης να μπορούμε να γυρίσουμε αριστερά και δεξιά. Δημιουργήστε μια συνάρτηση με το όνομα moveAngle νέες ιδιότητες, οι οποίες δείχνουν την τρέχουσα τιμή μετακίνησης ή γωνία γύρισματος. Στην newPos() στην προσκλήωση moveAngle ιδιότητα υπολογισμού γωνία:

Παράδειγμα

Παρακαλώ ρυθμίστε την ιδιότητα moveangle σε 1 και δείτε τι συμβαίνει:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  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();
  }
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

Δοκιμάστε το προσωπικά

Χρήση πληκτρολογίου

Πώς μετακινείται το κόκκινο τετράγωνο όταν χρησιμοποιείτε το πλήκτρο πληκτρολογίου; Όταν πατάτε το πλήκτρο 'πάνω', το κόκκινο τετράγωνο δεν μετακινείται πάνω και κάτω, αλλά μετακινείται από ένα μέρος σε άλλο και προχωράει μπροστά, και γυρίζει αριστερά και δεξιά όταν πατάτε τα πλήκτρα 'αριστερά' και 'δεξιά'.

Παράδειγμα

Δοκιμάστε το προσωπικά

Επιβεβαιώστε ότι η περιοχή του παιχνιδιού έχει προσοχή και χρησιμοποιήστε τα κλειδιά κατεύθυνσης για να κινήσετε τον κόκκινο κύβο.