W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 游戏图像



按下按钮移动笑脸:








如何使用图像?

要在画布上添加图像,getContext("2d")对象具有内置的图像属性和方法。

在我们的游戏中,要创建一个像素的游戏,请使用组件构造函数,而不是引用颜色,您必须参考图像的url。 你必须告诉构造函数这个组件是“image”类型:

Example

function startGame() {
  myGamePiece = new component(30, 30, "http://cdn.w3schools.wang/smiley.gif", 10, 120, "image");
  myGameArea.start();
}

在组件构造函数中,我们测试组件是否为“image”类型,并使用内置的 "new Image()" 对象构造函数创建一个图像对象。当我们准备绘制图像时,我们使用drawImage方法而不是fillRect方法:

Example

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 属性来更改图像。

如果要在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并且当按钮未被点击时恢复正常:

Example

function move(dir) {
    myGamePiece.image.src = "http://cdn.w3schools.wang/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 = "http://cdn.w3schools.wang/smiley.gif";
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
尝试一下 »

背景图像

通过将其添加为组件,将背景图像添加到游戏区域,并更新每个框架中的背景:

Example

var myGamePiece;
var myBackground;

function startGame() {
    myGamePiece = new component(30, 30, "http://cdn.w3schools.wang/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 属性以使背景移动:

Example

function updateGameArea() {
    myGameArea.clear();
    myBackground.speedX = -1;
    myBackground.newPos();
    myBackground.update();
    myGamePiece.newPos();
    myGamePiece.update();
}
尝试一下 »

背景循环

要使相同的背景永远循环,我们必须使用一种特定的技术。

首先告诉组件构造函数这是一个背景。然后,组件构造函数将添加图像两次,将第二个图像立即放置在第一个图像之后。

newPos() 方法中,检查组件的 x 位置是否已到达图像的末尾,如果有,将组件的x位置设置为0:

Example

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;
            }
        }
    }
}
尝试一下 »