❮ HTML 游戏画布制作教程
HTML Game 游戏控制器教程 ❯
游戏组件制作
更新于 2024/8/17 4:20:00
在游戏区域添加一个红色方块:
添加组件
制作一个组件构造函数，让您可以将组件添加到游戏区域。
对象构造函数称为component，我们制作我们的第一个组件，称为myGamePiece:: p>
实例
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);}
亲自试一试 »
组件具有控制其外观和运动的属性和方法。
Frames
为了让游戏做好准备，我们将每秒更新显示 50 次，这很像电影中的帧。
首先，创建一个名为 updateGameArea() 的新函数。
在 myGameArea 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 updateGameArea() 函数 （每秒 50 次）。 还要添加一个名为 clear() 的函数，用于清除整个画布。
在 component 构造函数中，添加一个名为 update() 的函数，用于处理 组件。
updateGameArea() 函数调用 clear() 和 update() 方法。
结果是组件每秒被绘制和清除50次:
实例
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 位置（水平）更改一个像素:
实例
function updateGameArea() { myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();}
亲自试一试 »
为什么要清除游戏区?
似乎没有必要在每次更新时清除游戏区域。 但是，如果我们省略 clear() 方法，组件的所有移动都会留下它在最后一帧中所处位置的轨迹:
实例
function updateGameArea() { // myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();}
亲自试一试 »
改变大小
可以控制组件的宽高:
实例
创建一个 10x140 像素的矩形:
function startGame() { myGameArea.start(); myGamePiece = new component(140, 10, "red", 10, 120);}
亲自试一试 »
改变颜色
你可以控制组件的颜色:
实例
function startGame() { myGameArea.start(); myGamePiece = new component(30, 30, "blue", 10, 120);}
亲自试一试 »
您还可以使用其他颜色值，例如 hex、rgb 或 rgba:
实例
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
您可以将组件放置在游戏区域的任意位置:
实例
function startGame() { myGameArea.start(); myGamePiece = new component(30, 30, "red", 2, 2);}
亲自试一试 »
许多组件
您可以在游戏区域放置任意数量的组件:
实例
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();
}
亲自试一试 »
移动组件
使所有三个组件向不同方向移动:
实例
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();
}
亲自试一试 »
❮ HTML 游戏画布制作教程
HTML Game 游戏控制器教程 ❯