గేమ్ హ్యాండికాప్

按下按钮可移动红色方块：

添加一些障碍

现在我们想为游戏添加一些障碍。

将新组件添加到游戏区域。将其设为绿色，宽 10 像素，高 200 像素，然后将其放置在右侧 300 像素、向下 120 像素的位置。

还要更新每一帧中的障碍物组件：

ప్రతిరూపం

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

亲自试一试

కోల్లిపోలు విజయం ముగిసింది

పైని ఉదాహరణలో, మీరు అడ్వర్స్ బ్లాక్తో సరిపోలినప్పుడు ఏమీ జరగదు. గేమ్లో ఇది సంతోషకరం కాదు.

మేము ఎలా తెలుసు మా ఎరుపు బ్లాక్ అడ్వర్స్ బ్లాక్తో సరిపోలింది ఉంది అని?

కంపోనెంట్ నిర్మాణ కాలంలో కొత్త మాధ్యమాన్ని సృష్టించండి, దానిలో ఈ కంపోనెంట్ మరొక కంపోనెంట్తో సరిపోలినా అని తనిఖీ చేయడానికి విధానం ఉంది. ప్రతి ఫ్రేమ్ అప్డేట్ చేయడంలో ఈ విధానాన్ని పిలవాలి, ప్రతి నిమిషం 50 సార్లు.

కూడా వెళ్ళి ఉంటుంది myGameArea ఆయా వస్తువు జోడించడం stop() ఈ మాధ్యమం సర్వ్ చేయడానికి విధానం ఉంది. ఈ విధానం ప్రతి 20 మిల్లీసెకండ్లు ఒకసారి సర్వ్ చేస్తుంది.

ప్రతిరూపం

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 的属性值：

ప్రతిరూపం

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

亲自试一试

多重障碍

添加多个障碍怎么样？

为此，我们需要一个用于计算帧数的属性，以及一个以给定帧速率执行某些操作的方法。

ప్రతిరూపం

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 ఫంక్షన్ నకు కొన్ని మార్పులు చేయాలి.

ప్రతిరూపం

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 ఫ్రేమ్లకు ఒక అడ్డబందును జోడిస్తుంది.

సంఖ్యాలకు అనుగుణంగా అడ్డబందులు

గేమ్ అధ్యాత్మకతను మరియు ఆసక్తిని పెంచుటకు, మేము సంఖ్యాలకు అనుగుణంగా అడ్డబందులను పంపతాము అలాగే ఎరుపు కట్టె పైన మరియు క్రిందికి కదలాలి కాదు పెనుగా ప్రమాదం జరగకుండా ఉండగలదు.

ప్రతిరూపం

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

亲自试一试