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

HTML 游戏组件



在游戏区域添加一个红色方块:


添加组件

制作一个组件构造函数,它可以让您将组件添加到游戏区域中。

对象构造函数被称为 component,我们将第一个组件称为 myGamePiece

Example

var myGamePiece;

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

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

尝试一下 »

组件具有控制其外观和动作的属性和方法。


框架

为了使游戏准备运动,我们将每秒更新显示50次,这与电影中的框架非常相似。

首先,创建一个名为 updateGameArea() 新函数。

myGameArea 对象中,添加一个间隔,它将每20毫秒(每秒50次)运行 updateGameArea() 函数。还要添加一个名为 clear() 的函数,它清除整个画布。

component 构造函数中,添加一个名为 update() 的函数来处理组件的图形。

updateGameArea() 函数调用 clear()update() 方法。

结果是每秒绘制和清除50次:

Example

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

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    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);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.update();
}
尝试一下 »

让它移动

为了证明红色正方形每秒绘制50次,我们将在每次更新游戏区域时将x位置(水平)改变一个像素:

Example

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
尝试一下 »

为什么要清除游戏区?

每次更新都可能会清除游戏区域。但是,如果我们省略了 clear() 方法,组件的所有运动都将在最后一帧中留下位置:

Example

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
尝试一下 »

改变尺寸

您可以控制组件的宽度和高度:

Example

Create a 10x140 pixels rectangle:

function startGame() {
    myGameArea.start();
    myGamePiece = new component(10, 140, "red", 10, 120);
}
尝试一下 »

改变颜色

您可以控制组件的颜色:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue", 10, 120);
}
尝试一下 »

您还可以使用其他颜色值,如hex,rgb或rgba:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
尝试一下 »

改变位置

我们使用x和y坐标将组件定位到游戏区域。

画布的左上角的坐标为 (0,0)。

将鼠标悬停在下方的游戏区域以查看其x和y坐标:

X
Y

您可以将游戏区域中的所有组件放置在任何位置:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 2, 2);
}
尝试一下 »

多组件

您可以在游戏区域放置尽可能多的组件:

Example

var redGamePiece, blueGamePiece, yellowGamePiece;

function startGame() {
    redGamePiece = new component(75, 75, "red", 10, 10);
    yellowGamePiece = new component(75, 75, "yellow", 50, 60);
    blueGamePiece = new component(75, 75, "blue", 10, 110);
   
myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
尝试一下 »

移动组件

使所有三个组件在不同的方向移动:

Example

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.x += 1;
    yellowGamePiece.x += 1;
    yellowGamePiece.y += 1;
    blueGamePiece.x += 1;
    blueGamePiece.y -= 1;
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
尝试一下 »