กราฟิก HTML

กราฟิก หน้าแรก

Google Maps

แนะนำแผนที่ แผนที่พื้นฐาน การวางซ้อนแผนที่ กิจกรรมของแผนที่ การควบคุมแผนที่ ประเภทแผนที่ แผนที่อ้างอิง

กวดวิชา SVG

บทนำ SVG SVG ใน HTML SVG สี่เหลี่ยมผืนผ้า SVG Circle SVG วงรี สาย SVG รูปหลายเหลี่ยม SVG SVG Polyline เส้นทาง SVG ข้อความ SVG SVG ลากเส้น บทนำตัวกรอง SVG เอฟเฟกต์เบลอ SVG SVG Drop Shadows SVG ลิเนียร์ SVG Radial ตัวอย่าง SVG ข้อมูลอ้างอิง SVG

กวดวิชาผ้าใบ

แนะนำผ้าใบ ภาพวาดบนผืนผ้าใบ พิกัดผ้าใบ ผ้าใบไล่โทนสี ข้อความผ้าใบ ภาพแคนวาส อ้างอิงผ้าใบ

นาฬิกาผ้าใบ

แนะนำนาฬิกา หน้าปัดนาฬิกา ตัวเลขนาฬิกา เข็มนาฬิกา นาฬิกาเริ่ม

เกม HTML

แนะนำเกม เกมแคนวาส ส่วนประกอบของเกม ตัวควบคุมเกม อุปสรรคของเกม คะแนนเกม รูปภาพเกม เสียงเกม เกมแรงโน้มถ่วง เกมเด้ง การหมุนเกม การเคลื่อนไหวของเกม

คะแนนเกม


กดปุ่มเพื่อย้ายสี่เหลี่ยมสีแดง:








นับคะแนน

มีหลายวิธีในการเก็บคะแนนในเกม เราจะแสดงวิธีเขียนคะแนนลงบนผืนผ้าใบ

ขั้นแรกให้สร้างองค์ประกอบคะแนน:

ตัวอย่าง

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

ไวยากรณ์สำหรับการเขียนข้อความบนองค์ประกอบผ้าใบจะแตกต่างจากการวาดรูปสี่เหลี่ยมผืนผ้า ดังนั้น เราจึงต้องเรียกตัวสร้างองค์ประกอบโดยใช้อาร์กิวเมนต์เพิ่มเติม โดยบอกตัวสร้างว่าองค์ประกอบนี้เป็นประเภท "ข้อความ"

ในตัวสร้างส่วนประกอบ เราทดสอบว่าส่วนประกอบนั้นเป็นประเภท "ข้อความ" หรือไม่ และใช้ 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();
}