คะแนนเกม

বাটন ক্লিক করে লাল বক্সকে সরব করতে হবে:

স্কোর রেকর্ড

গেমে স্কোর রেকর্ড করার অনেকগুলি পদ্ধতি আছে, আমরা আপনাকে দেখাব যে কিভাবে স্কোরকে চিত্রক্ষেত্রে লিখা যায়。

প্রথমে একটি স্কোর কম্পোনেন্ট তৈরি করুন:

var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 160);
  myScore = new component("30px", "Consolas", "black", 280, 40, "text");
  myGameArea.start();
}

কারণ চিত্রক্ষেত্র এলিমেন্টের ওপর লেখা টেক্সটকে আঁকার সময় সামগ্রীটি আঁকা হয়, তাই আমরা কম্পোনেন্ট নির্মাণকারী ফাংশনকে একটি অতিরিক্ত পারামিটার দিয়ে আহ্বান করতে হবে, যাতে নির্মাণকারী ফাংশনকে বোঝানো যায় যে এই কম্পোনেন্টের ধরন "text"

কম্পোনেন্ট নির্মাণকারী ফাংশনে, আমরা কম্পোনেন্টটি কি হয়েছে তা পরীক্ষা করি。 "text" ধরন, এবং fillText পদ্ধতি না হলে, fillRect পদ্ধতি:

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {}}
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
...
}

最后，我们在 updateGameArea 函数中添加一些代码，将分数写入画布。我们使用 frameNo 属性来计算分数：

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].speedX = -1;
    myObstacles[i].newPos();
    myObstacles[i].update();
  }
  myScore.text = "SCORE: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

ทดลองด้วยตัวเอง