游戏障碍

বটন প্রেস করে লাল বাক্সটি সরব করা যাবে:

বাধা এলাকা যোগ করুন

এখন আমরা গেমকে কিছু বাধা এলাকা যোগ করতে চাই。

নতুন কম্পোনেন্টটিকে গেম এলাকায় যোগ করুন। তাকে সবুজ রঙের করে, প্রশস্ততা ১০ পিক্সেল, উচ্চতা ২০০ পিক্সেল রাখুন এবং তাকে ডানদিকে ৩০০ পিক্সেল, নীচে ১২০ পিক্সেল স্থানান্তরিত করুন。

প্রত্যেক ফ্রেমের মধ্যে বাধা এলাকা কম্পোনেন্টটি আপডেট করা হবে:

প্রতিদিন

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() মথুরা ২০ মিলিসেকেন্ড সময়কালের ব্যাপারে পরিষ্কার করে দেয়।

প্রতিদিন

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();
  }
    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 ফাংশন ফ্রেম গণনা করে এবং ১৫০ ফ্রেম পর একটি বাধা যোগ করে。

র‍্যান্ডম সাইজের বাধা

গেমটির বিকল্পতা ও আনন্দ বাড়াতে, আমরা একটি সাইজ র‍্যান্ডম বাধা পাঠাব যাতে লাল বক্সকে ভাসিয়ে উপর ও নীচে গোতার করতে হবে যাতে তা সংঘর্ষ না হোক。

প্রতিদিন

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

亲自试一试