Κίνδυνος Παιχνιδιού

πατήστε το κουμπί για να μετακινήσετε το κόκκινο κουτί:

προσθέτουμε εμπόδια

Τώρα θέλουμε να προσθέσουμε μερικά εμπόδια στο παιχνίδι.

προσθέτουμε το νέο στοιχείο στην περιοχή του παιχνιδιού. Θα το κάνουμε πράσινο, πλάτος 10 εικονοστοιχεία, ύψος 200 εικονοστοιχεία και θα το τοποθετήσουμε στη δεξιά πλευρά 300 εικονοστοιχεία, κάτω 120 εικονοστοιχεία.

να ενημερώσουμε κάθε κύκλο του αντικειμένου εμπόδιο:

instance

var myGamePiece;
var myObstacle;
function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myObstacle = new component(10, 200, "green", 300, 120);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myObstacle.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

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

Collision = Game Over

In the above example, nothing happens when you hit an obstacle. In the game, this is not satisfactory.

How do we know if our red block has collided with an obstacle?

In the constructor of the component, create a new method to check if the component collides with another component. This method should be called every frame update, 50 times per second.

also to myGameArea object addition stop() method, which clears an interval of 20 milliseconds.

instance

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);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  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);
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}
function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

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

Κίνηση εμπορίου

Οι εμπόροι είναι ασφαλείς όταν είναι σταθεροί, οπότε θέλουμε να τους κινήσουμε.

αλλάζει κάθε φορά που ενημερώνεται myObstacle.x οι τιμές των ιδιοτήτων:

instance

function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.x += -1;
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

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

Πολλαπλοί εμπόροι

Τι θα συμβεί αν προσθέσουμε πολλαπλούς εμπόρους;

Για το λόγο αυτό, χρειαζόμαστε μια ιδιότητα για τον υπολογισμό του αριθμού των καρέ και έναν τρόπο για να εκτελείται μια δραστηριότητα με καθορισμένη ταχύτητα καρέ.

instance

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.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
function everyinterval(n) {
  if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
  return false;
}

Αν ο αριθμός του τρέχοντος καρέ με τον καθορισμένο διαδρόμο αντιστοιχεί, η συνάρτηση everyinterval επιστρέφει true.

Πρώτα απ' όλα, αν θέλουμε να καθορίσουμε πολλαπλούς εμπόρους, να δηλώσουμε τη μεταβλητή εμπορίου ως μαζικό.

Επιπλέον, χρειαζόμαστε αλλαγές στην συνάρτηση updateGameArea.

instance

var myGamePiece;
var myObstacles = [];
function updateGameArea() {
  var x, y;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    y = myGameArea.canvas.height - 200
    myObstacles.push(new component(10, 200, "green", x, y));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

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

στο updateGameArea Στη συνάρτηση, πρέπει να διατρέχουμε κάθε εμπόδιο για να δούμε αν συμβαίνει σύγκρουση. Αν συμβεί σύγκρουση, η συνάρτηση updateGameArea θα σταματήσει και δεν θα γίνει πλέον ζωγραφική.

updateGameArea Η συνάρτηση μετρά τα έντερα και προσθέτει ένα εμπόδιο κάθε 150 έντερα.

τυχαία μεγέθη εμποδίων

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

instance

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    minHeight = 20;
    maxHeight = 200;
    height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
    minGap = 50;
    maxGap = 200;
    gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
    myObstacles.push(new component(10, height, "green", x, 0));
    myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

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