Συστατικά Παιχνιδιού

Προσθήκη ενός κόκκινου κουβούκι στην περιοχή του παιχνιδιού:

Προσθήκη στοιχείων

Δημιουργία μιας συνάρτησης κατασκευής για στοιχεία που επιτρέπει την προσθήκη τους στην περιοχή του παιχνιδιού.

Η συνάρτηση κατασκευής αυτού του αντικειμένου ονομάζεταιστοιχεία (component)，ε创造了我们第一个组件，名为 myGamePiece:

παράδειγμα

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

Δοκιμάστε το Ενθουσιαστικά

Αυτά τα στοιχεία έχουν ιδιότητες και μεθόδους που ελέγχουν την εμφάνισή τους και τη κίνηση τους.

Κάδρο

Για να προετοιμαστεί το παιχνίδι για την κίνηση, ενημερώνουμε την εμφάνιση 50 φορές το δευτερόλεπτο, κάτι που μοιάζει με το кадρο ενός κινηματογράφου.

Πρώτα απ' όλα, δημιουργήστε ένα στοιχείο με το όνομα updateGameArea() νέα συνάρτηση.

στο myGameArea οταν θα εκτελείται κάθε 20 χιλιοστά δευτερόλεπτου updateGameArea() η συνάρτηση (50 φορές το δευτερόλεπτο). Και προσθέστε μια διαίρεση στο 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 φορές το δευτερόλεπτο, κάθε φορά που ενημερώνουμε την περιοχή του παιχνιδιού, θα αλλάξουμε την θέση x (υπερπλάγια) κατά ένα πιξέλ:

παράδειγμα

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

Δοκιμάστε το Ενθουσιαστικά

Γιατί να καθαρίζουμε την περιοχή του παιχνιδιού;

Φαίνεται ότι δεν υπάρχει λόγος να καθαρίζουμε την περιοχή του παιχνιδιού κάθε φορά που ενημερώνουμε. Ωστόσο, αν παραλείψουμε clear(); Τεχνική, κάθε κίνηση του στοιχείου αφήνει μια στάζα από τη θέση του στην τελευταία εικόνα:

παράδειγμα

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

Δοκιμάστε το Ενθουσιαστικά

αλλαγή μεγέθους

Μπορείτε να ελέγξετε το πλάτος και το ύψος του στοιχείου:

παράδειγμα

Δημιουργία ορθογώνιου 10x140 pixel:

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

Δοκιμάστε το Ενθουσιαστικά