手串厂家
免费服务热线

Free service

hotline

010-00000000
手串厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

分步解析HTML5画布游戏的制作过程

发布时间:2020-02-10 10:50:47 阅读: 来源:手串厂家

自从发布《Onslaught! Arena》后,许多人要求我分享制作简单画布游戏的基础教程。所以,我决定利用这篇博文介绍自己认为最简单的画布游戏制作方法,并逐步进行解析。

以下便是游戏的制作过程!让我们跳过,直接进入游戏制作过程。

screenshot from

1、创建画布

// Create the canvas

var canvas = eateElement(“canvas”);

var ctx = tContext(“2d”);

dth = 512;

ight = 480;

PendChild(canvas);

我们首先要做的是创建画布元素。我使用JavaScript而不是HTML来实现这个目标,以此来展示这个步骤的简易性。获得这个元素后,我们就可以进行设置,设定其尺寸,将其添加到主体文件。

2、添加图片

// Background image

var bgReady = false;

var bgImage = new Image();

load = function () {

bgReady = true;

};

c = “images/g”;

游戏需要图像元素!因此,让我们来加载些许图片。我想要以尽可能简单的方式来介绍这个教程,所以只添加1个图片。bgReady旨在让画布明白何时开始绘制,因为在加载完成前尝试渲染会产生DOM错误。

对于我们需要的背景、英雄和怪物这3个图像,我们都采取这种做法。

3、游戏对象

// Game objects

var hero = {

speed: 256, // movement in pixels per second

x: 0,

y: 0

};

var monster = {

x: 0,

y: 0

};

var monstersCaught = 0;现在,我们定义某些随后需要用到的变量。英雄有速度设置,以每秒移动的帧数来表示。怪物不会移动,所以它只含有坐标。最后,monstersCaught存储玩家捕获的怪物数量。

4、玩家输入内容

// Handle keyboard controls

var keysDown = {};

addEventListener(“keydown”, function (e) {

keysDown[yCode] = true;

}, false);

addEventListener(“keyup”, function (e) {

delete keysDown[yCode];

}, false);

现在,处理玩家的输入问题。这或许是首个会让此前从事网页开发的开发者感到棘手的部分。重要的是要记住,我们并不一定要在输入事件发生时马上做出回应。在网页背景中,当用户初始化输入内容时马上播放动画或请求数据或许是个恰当的做法。但是在这种游戏中,我们将游戏逻辑和输入分割开来。出于这个原因,我们才会存储用户输入内容,留待后面使用。

要实现这个目标,我们需要使用keysDown变量,这是可以存储任意事件的keyCode。如果按键代码位于对象中,就表明用户正在按动该按键。

5、新游戏

// Reset the game when the player catches a monster

var reset = function () {

hero.x = dth / 2;

hero.y = ight / 2;

// Throw the monster somewhere on the screen randomly

monster.x = 32 + (ndom() * (dth – 64));

monster.y = 32 + (ndom() * (ight – 64));

};调用重置功能来开始新游戏或关卡等其他内容。它会将英雄(游戏邦注:也就是玩家)放置在屏幕中央,怪物在屏幕中随机分布。

6、更新对象

// Update game objects

var update = function (modifier) {

if (38 in keysDown) { // Player holding up

hero.y -= eed * modifier;

}

if (40 in keysDown) { // Player holding down

hero.y += eed * modifier;

}

if (37 in keysDown) { // Player holding left

hero.x -= eed * modifier;

}

if (39 in keysDown) { // Player holding right

hero.x += eed * modifier;

}

// Are they toUChing?

if (

hero.x <= (monster.x + 32)

&& monster.x <= (hero.x + 32)

&& hero.y <= (monster.y + 32)

&& monster.y <= (hero.y + 32)

) {

++monstersCaught;

reset();

}

};这是更新函数,每次间歇执行时都会调用。首先,它检查上、下、左和右方向键,看看用户是否已经按动。如果用户确实已按动,英雄就会朝相应的方向移动。

更新中的修改器或许会让你感觉很奇怪。将来你会看到它在主函数中的作用,但我想先在这里做下解释。修改器是个以1为基数的基于时间的数字。如果经过了1秒钟时间,数值就会是1,英雄的速度就将乘以1,也就是说他在这1秒内将移动256像素。如果经过的时间是0.5秒,那么数值就是0.5,英雄在该时间内移动的距离就是速度值的一半。这个函数的调用速度很快,所以修改器数值通常都比较小,但是使用这种方法可以确保英雄的速度保持不变。

现在,我们已经可以根据玩家的输入来移动英雄,我们可以查看移动会产生何种结果。如果英雄和怪物之间能够发生碰撞,我们的目标就实现了!这才是游戏。我们得到分数(游戏邦注:monstersCaught中的数值加1),游戏重置。

7、渲染对象

// Draw everything

var render = function () {

if (bgReady) {

awImage(bgImage, 0, 0);

}

if (heroReady) {

awImage(heroImage, hero.x, hero.y);

}

if (monsterReady) {

awImage(monsterImage, monster.x, monster.y);

}

// Score

llStyle = “rgb(250, 250, 250)”;

nt = “24px Helvetica”;

xtAlign = “left”;

xtBaseline = “top”;

llText(“Goblins caught: ” + monstersCaught, 32, 32);

};如果你能够看到发生的动作,游戏会显得更加有趣,所以让我们来绘制场景中的其他内容。首先,我们将背景图片绘制到画布上。在英雄和怪物图片上重复这个步骤。请注意,顺序很重要,因为任何放置在表面的图片都会覆盖其下方的像素。

接下来,我们修改部分背景上的资产,比如字体,我们调用fillText来呈现玩家的分数。因为我们没有任何复杂的动画或移动操作,所以我们只需使用绘图即可。

8、主游戏循环

// The main game loop

var main = function () {

var now = w();

var delta = now – then;

update(delta / 1000);

render();

then = now;

};

主游戏循环控制游戏的流程。首先,我们要获得当前时间戳,这样我们才能够计算距离上次间歇过去了多少毫秒。我们以毫秒为单位来更新修改器。然后,我们调用渲染并记录时间戳。

9、开始游戏

// Let’s play this game!

reset();

var then = w();

setInterval(main, 1); // Execute as fast as possible这是最后一个代码。首先,我们调用重置来开启新游戏和关卡。记住,这样做会使得英雄出现在屏幕中心,怪物在场景中随机分布。然后,我们开启时间戳。

现在,你已经理解了在JavaScript中使用画布元素进行游戏开发的基本过程。你可以尝试开发自己的游戏!

中山代理记账公司排名

注册公司商标

广州注册公司变更

中山工作签证代理

中山注册公司中介

深圳注册公司哪家好

深圳注册公司管理

中山代理记账公司电话

相关阅读