ล่าสุดการพัฒนาเว็บบทเรียน
 

แสดงเกม HTML

❮ก่อนหน้า ถัดไปบท❯

กดปุ่มเพื่อย้ายไปยิ้มไปนี้:







วิธีการใช้ภาพ?

การเพิ่มภาพบนผืนผ้าใบที่ getContext("2d") วัตถุมีในตัวคุณสมบัติของภาพและวิธีการ

ในเกมของเราเพื่อสร้าง gamepiece เป็นภาพให้ใช้ตัวสร้างองค์ประกอบ แต่แทนที่จะหมายถึงสีที่คุณต้องดูที่ URL ของภาพ และคุณจะต้องบอกว่าสร้างส่วนนี้เป็นประเภท "image" :

ตัวอย่าง

function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif" , 10, 120, "image" );
  myGameArea.start();
}

ในตัวสร้างองค์ประกอบที่เราทดสอบว่าองค์ประกอบเป็นประเภท "image" และสร้างวัตถุภาพโดยใช้ในตัว "ใหม่ Image() " ตัวสร้างวัตถุ เมื่อเรามีความพร้อมในการวาดภาพที่เราจะใช้วิธีการ drawImage แทนวิธี FillRect:

ตัวอย่าง

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {
    this.image = new Image();
    this.image.src = color;
  }
   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 (type == "image") {
      ctx.drawImage(this.image,
        this.x,
        this.y,
        this.width, this.height);
    } else {
       ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
}
ลองตัวเอง»

เปลี่ยนภาพ

คุณสามารถเปลี่ยนภาพเมื่อใดก็ตามที่คุณต้องการโดยการเปลี่ยน src ทรัพย์สินของ image วัตถุของคอมโพเนนต์ของคุณ

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

ตัวอย่าง

function move(dir) {
    myGamePiece.image.src = "angry.gif";
     if (dir == "up") {myGamePiece.speedY = -1; }
    if (dir == "down") {myGamePiece.speedY = 1; }
    if (dir == "left") {myGamePiece.speedX = -1; }
    if (dir == "right") {myGamePiece.speedX = 1; }
}

function clearmove() {
    myGamePiece.image.src = "smiley.gif";
     myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
ลองตัวเอง»

ภาพพื้นหลัง

เพิ่มภาพพื้นหลังไปยังพื้นที่เกมของคุณโดยเพิ่มเป็นส่วนประกอบและยังปรับปรุงพื้นหลังในทุกกรอบ:

ตัวอย่าง

var myGamePiece;
var myBackground;
function startGame() {
    myGamePiece = new component(30, 30, "smiley.gif" , 10, 120, "image");
    myBackground = new component(656, 270, "citymarket.jpg" , 0, 0, "image");
     myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    myBackground.newPos();
    myBackground.update();
     myGamePiece.newPos();
    myGamePiece.update();
}
ลองตัวเอง»

พื้นหลังย้าย

เปลี่ยนองค์ประกอบพื้นหลังของ speedX คุณสมบัติที่จะให้ย้ายพื้นหลัง:

ตัวอย่าง

function updateGameArea() {
    myGameArea.clear();
    myBackground.speedX = -1;
    myBackground.newPos();
    myBackground.update();
    myGamePiece.newPos();
    myGamePiece.update();
}
ลองตัวเอง»

ห่วงพื้นหลัง

ที่จะทำให้วงพื้นหลังเดียวกันตลอดไปเราจะต้องใช้เทคนิคเฉพาะ

เริ่มต้นด้วยการบอกตัวสร้างองค์ประกอบที่ว่านี้เป็นพื้นหลัง ตัวสร้างองค์ประกอบแล้วจะเพิ่มภาพที่สองวางภาพที่สองทันทีหลังจากที่ภาพแรก

ใน newPos() วิธีการตรวจสอบว่า x ตำแหน่งขององค์ประกอบได้ถึงจุดสิ้นสุดของภาพถ้ามีการตั้งค่า x ตำแหน่งขององค์ประกอบที่เป็น 0:

ตัวอย่าง

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image" || type == "background" ) {
        this.image = new Image();
        this.image.src = color;
    }
    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 (type == "image" || type == "background") {
            ctx.drawImage(this.image,
                this.x, this.y, this.width, this.height);
            if (type == "background") {
                ctx.drawImage(this.image,
                this.x + this.width, this.y, this.width, this.height);
            }
         } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.type == "background") {
            if (this.x == -(this.width)) {
                this.x = 0;
            }
        }
     }
}
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯