html5 手游制作,HTML5游戏制作（九）——炮塔游戏

蔚落 2022-10-08 00:40 242阅读 0赞

本章学习创建一个炮台类游戏，通过一个完成的游戏案例，来理解：

平铺背景、物理属性、行为的含义，以及进一步熟悉界面视图的功能

，掌握基本的操作技巧。

【炮塔游戏】游戏功能描述：

玩家点击鼠标可以实现炮口的朝向，并根据鼠标点击的距离计算炮弹的初速度，实现距离越大速度越快的效果。将箱子打出视图之外可获取积分，当积分大于一定值的时候，即胜利。

是不是很有意思？那让我们开始吧！

学习目标：

掌握tiledbackground对象的使用方法

掌握physics行为的使用方法

巩固原点设置和复制对象的方法

巩固setangle toward position动作

巩固mouse对象的使用方法

掌握applyimpulse at angle动作

了解onloader layout complete事件

1.  添加对象和图层

素材公众号内回复【

炮塔游戏

】即可获取。

(1)首先，点击文件，新建一个空白项目，点击【Open】。

(2)将默认的图层命名为【Background】，回到视图窗口，我们再添加一个平铺背景的对象【TiledBackground】，导入我们的平铺素材，然后调整到合适的位置。

![7bdf27e242c9482594684a19de43f4ba.jpg][]

平铺背景：即重复显示的意思，将这张图片重复显示直到充满整个屏幕。很多图案的重复也可以叫做平铺。

![76d5876cdf1946c6bf16891b0a5e493e.jpg][]

拖动鼠标选中如下图所示的效果即可。

![088427d4a9344049807f486b7b111d4c.jpg][]

(3)接着我们来给它添加一个物理行为【Physics】，物理行为即给对象添加了一个物理属性，可模仿真实世界中的重力作用。

![39749b7909aa49ee949cba0a96fa5021.jpg][]

添加完物理行为后，大家会发现它会往下掉。这是因为物理行为会模仿自然环境产生重力效果。我们可以将其设置为不可移动【Immovable】>【Yes】，碰撞覆盖我们选中盒型碰撞【CollisionMask】>【BoundingBox】。

![86422885fb5d4caaa9ba93474396c575.jpg][]

(4)接下来，我们再新建一个图层，命名为【Game】。

![bc6736260d3541c78ff72b0fb699cede.jpg][]

然后，我们导入Ball对象，可以直接将对象拖入【Game】图层，并调整合适大小；同样给它添加一个物理行为【Physics】。

![6da9730cbe024f639b73f4e31ef4d64c.jpg][]

并将球的碰撞覆盖【CollisionMask】设置为环形碰撞【Circle】。

![72144ace8e8749b097dca8f258255706.jpg][]

测试后正常。

![6d496c5e79ff4da0b08f489b0d948f76.jpg][]

2. 添加Game图层内容

以下操作对象图层皆在【game】图层上。

(1)导入箱子对象【box】，将它的大小【size】设置为【48,48】。然后点击视图【view】，并勾选对齐网格【snapto gird】，设置网格大小为16，接着再勾选显示网格【showgrid】。这时画布中便会出现网格效果，方便我们去对齐添加的对象。

![813eafa5bc994c60a35896755b6a9059.jpg][]

(2)双击箱子【box】对象，打开动画编辑器，选中原点【origin】，在弹出的对话框中选中origin，单击右键，快速定位【quickassign】，将它的原点设置为左上角【top-left】。

设置箱子对象的原点为左上角，主要目的是方便箱子对齐。

![6d592a54ccd44be4992f9b97c6033715.jpg][]

(3)按住【Ctrl】键，拖动鼠标左键，依次复制出多个箱子对象。

![f09f5c01f811427f87581fbadce9a919.jpg][]

(4)然后，选中一个箱子，再给箱子也添加一个物理行为【Physics】，点击其他箱子可以发现物理行为同样被复制了。同时，要将它的碰撞覆盖设置为盒型碰撞。

![27b733782e2a48e78eaee344cb55aa06.jpg][]

(5)接下来，我们把炮塔和炮导入进来。

选中炮塔对象，双击编辑图像，使用矩形选框，选中炮塔，并把多余的部分裁剪，最后调整大小。操作过程如下图所示：

![efa7f1ab6ce24dedae786df75af7c56c.jpg][]

3. 设置发射子弹功能

(1)首先，插入鼠标对象。在画布中双击空白处，找对鼠标对象，点击【Insert】即可。

![38d9bc99543d4e129c4dae153989abfe.jpg][]

(2)然后，切换到事件列表中，添加语句1：

选中系统【System】>每帧【EveryTick】；

![2869ff7dfbbb43fabf726d615e951abd.jpg][]

接着，再后面添加动作：

选中我们的大炮对象【Cannon2】，设置它的朝向【SetAngle Toward Position】为鼠标朝向。

![916817a8016646d8b35f9f206120d4f6.jpg][]

![0f313cfea28d4547a5d2d09550ad05e7.jpg][]

这时，我们需要将炮身的原点对炮塔的圆圈位置对齐。

双击编辑大炮，选择原点，将它的原点设置在合适的位置。

![db7b0b27cd0b4df4a7b0a2eb2a05bbae.jpg][]

为了方便对齐，我们可以将自动对齐网格取消，便于用鼠标拖动对齐圆圈。也可使用键盘

↑↓←→

键进行微调。

(3)接着添加语句2：

当我们点击鼠标的时候，炮管发射炮弹。

依次操作为，添加事件，【Add event】>选中鼠标【Mouse】>当点击鼠标左键【On click】的时候，炮管产生炮弹。具体操作如下：

![511a4be46aad47a7bed9967eefb07f80.jpg][]

![689a1dd877ab4289ab97bc6244928f22.jpg][]

添加动作：生成炮弹

![34ff79654eed43138efb0eb933df3192.jpg][]

![81e1d3a0e7544563a1b01c70ce69b1e6.jpg][]

来预览一下效果：

![381dea1770fb4af88e2ef14987669d6f.jpg][]

发现还有一些问题，我们的炮弹没有从炮口发射出来，而是从下往上出来的，还实现了球体的完美平衡(注意这里的炮弹有物理属性)，需要编辑一下图像原点，将其设置为炮口。

(4)双击大炮对象，编辑图形原点，添加一个原点，将其设置在炮口。然后，切换到事件列表，将语句2中的动作图像原点改为1。

![9da51aef10ee4cabae1dbb5275fdf25a.jpg][]

![36bfd23f48fe4aefbe72ca4ec43676a6.jpg][]

(5)产生初速度，在某个方向上产生脉冲速度。

在语句2中继续添加动作，选中【ball】，选择【Applyimpulse at angle】对某个角度添加脉冲，即添加一个初速度。

![0a34f367aac24fcbb50625ce2a8a6766.jpg][]

然后，在【Impulse】中设置鼠标与炮弹之间的距离，

distance(ball.X,ball.X,mouse.X,mouse.Y)

,注意是在英文状态下输入；Angle设置为炮身的角度【cannon2.angle】

![e878df267a4548678b262b6b2c454631.jpg][]

完整语句如下：

![ce76fcb9091b40c4b09d4fc84185b72b.jpg][]

4.  添加音效

(1)给游戏添加音效

添加声音对象。

![d518a92577514ca9a0c15c9c02ea9d6a.jpg][]

在项目工程面板中找到【Sounds】文件夹，单击右键【ImportSounds】导入音频。

![e7ea35f171dd4ebd9a758f7d0bb3b85d.jpg][]

找到所需的音效文件，点击打开，再点击【Import】导入，确定。

![4837cb2d22df4e1291e742b50136a55d.jpg][]

![5e0d211cf08647c8a341bc1070e89a11.jpg][]

回到我们的语句2中，给点击鼠标发射炮弹添加音效。

依次操作为：添加动作【AddAction】>选中音效【Audio】>播放【Play】，找到对应的音效，点击确定即可。

![7e526b83f39d43a5aa3c722b72444fd1.jpg][]

![8aa67266950e44dd899a2f45076f2415.jpg][]

(2)添加背景音效

新建语句4，依次执行：系统【System】>加载界面完成【OnLoader Layout Complete】。

![ee86b16f44f7419bb0bf35d180fde0a1.jpg][]

添加动作，选择音效对象，播放背景音效。

![db2615d5c1bf412b9904135f0bb0272c.jpg][]

![ea3f86aadb9e4bcf9e54a75f95623825.jpg][]

完整语句如下：

![a0fbbf6659d645e0be9704df32b8d6b6.jpg][]

效果如下，功能OK。

![2f0d36fe3da14f058ded1c1362845507.jpg][]

5. 添加积分功能

(1)添加文本对象

![f2de2d22ed79406aad7f287f71c7359c.jpg][]

(2)在事件列表中设置文本：

新建全局变量Score，

![a9de9438192e4ae69d14b82bf20e1cce.jpg][]

(3)添加语句4，设置得分，

![6e50e0eb8a3a4f69888a36535b3e6ec1.jpg][]

(4)添加语句5，当箱子出界的时候，积分增加20。

操作如下：添加事件【Add event】，选中箱子【Box】，添加条件为箱子出界【Is outside layout】。

![091fbd15d1884336ba82b14f58bae371.jpg][]

接着添加动作：系统【system】>增加【add to】>选中积分【Score】，设置数值为【20】。

![497756ca8ce94def860b71f11e6d83d9.jpg][]

![e088e02b8c154e1aa73871c14881f1d2.jpg][]

测试发现积分会不断的增加，原因是箱子出界后并没有消失，所以会不断的增加；

需要将出界的箱子设置为消失。

![9c9672e76d594debbf528e30161df3aa.jpg][]

完整语句如下：

![1d52babbb3fe4f4fbae859a0efc6293c.jpg][]

6. 设置重玩

(1)再次添加文本对象，命名为Win，设置它的显示内容为YOUWIN!，大小72，不可视。

![a4c3237cac0e480b8f5b98bfce0c3e9a.jpg][]

(2)当积分大于480的时候，会显示胜利。

回到事件列表中，我们添加一个事件，当我们的积分＞400的时候，游戏胜利。依次操作如下图所示：

添加语句6，选中系统，执行比较值。

![f2219cae78544be8b0df3abd62dbd29c.jpg][]

设置score>=400。

![b64836c9c718471c9f29eaf5953911d3.jpg][]

接着，添加动作：让win文本可视。

![e6f08ff717d94ff98da3166523710351.jpg][]

![39851ed5cc9b4f268c5db9c5ff8674c4.jpg][]

(2)添加语句7：

选择鼠标对象，在某个对象上单击鼠标的时候，做某个动作。

![97adeb393d5f4a0eaa1d1a2a805c3fc3.jpg][]

这里当鼠标点击按钮对象的时候，会发生什么动作。

![7b7bd9e32b874ed89ec54a16098ca6b0.jpg][]

所有音效消失，全局变量重置，系统从新加载。

![c927ff6d6c9d4f08adb65a03f330f0a8.jpg][]

(3)游戏完整语句如下：

这里需要注意，当鼠标点击按钮对象的时候，需要再加一个条件即当按钮对象显示的时候，鼠标才可以点击。

![4cec5600567c4365a22b35161385ab84.jpg][]

素材：公众号回复【炮塔游戏】即可获取。

本小节完，快来试试吧。(点击阅读原文可试玩)

感觉不错，点个赞。

编辑：两点IT

【免责声明】图片等素材来源网络，仅供学习，如有侵权请及时联系

[7bdf27e242c9482594684a19de43f4ba.jpg]: https://img.136.la/20210615/7bdf27e242c9482594684a19de43f4ba.jpg
[76d5876cdf1946c6bf16891b0a5e493e.jpg]: https://img.136.la/20210615/76d5876cdf1946c6bf16891b0a5e493e.jpg
[088427d4a9344049807f486b7b111d4c.jpg]: https://img.136.la/20210615/088427d4a9344049807f486b7b111d4c.jpg
[39749b7909aa49ee949cba0a96fa5021.jpg]: https://img.136.la/20210615/39749b7909aa49ee949cba0a96fa5021.jpg
[86422885fb5d4caaa9ba93474396c575.jpg]: https://img.136.la/20210615/86422885fb5d4caaa9ba93474396c575.jpg
[bc6736260d3541c78ff72b0fb699cede.jpg]: https://img.136.la/20210615/bc6736260d3541c78ff72b0fb699cede.jpg
[6da9730cbe024f639b73f4e31ef4d64c.jpg]: https://img.136.la/20210615/6da9730cbe024f639b73f4e31ef4d64c.jpg
[72144ace8e8749b097dca8f258255706.jpg]: https://img.136.la/20210615/72144ace8e8749b097dca8f258255706.jpg
[6d496c5e79ff4da0b08f489b0d948f76.jpg]: https://img.136.la/20210615/6d496c5e79ff4da0b08f489b0d948f76.jpg
[813eafa5bc994c60a35896755b6a9059.jpg]: https://img.136.la/20210615/813eafa5bc994c60a35896755b6a9059.jpg
[6d592a54ccd44be4992f9b97c6033715.jpg]: https://img.136.la/20210615/6d592a54ccd44be4992f9b97c6033715.jpg
[f09f5c01f811427f87581fbadce9a919.jpg]: https://img.136.la/20210615/f09f5c01f811427f87581fbadce9a919.jpg
[27b733782e2a48e78eaee344cb55aa06.jpg]: https://img.136.la/20210615/27b733782e2a48e78eaee344cb55aa06.jpg
[efa7f1ab6ce24dedae786df75af7c56c.jpg]: https://img.136.la/20210615/efa7f1ab6ce24dedae786df75af7c56c.jpg
[38d9bc99543d4e129c4dae153989abfe.jpg]: https://img.136.la/20210615/38d9bc99543d4e129c4dae153989abfe.jpg
[2869ff7dfbbb43fabf726d615e951abd.jpg]: https://img.136.la/20210615/2869ff7dfbbb43fabf726d615e951abd.jpg
[916817a8016646d8b35f9f206120d4f6.jpg]: https://img.136.la/20210615/916817a8016646d8b35f9f206120d4f6.jpg
[0f313cfea28d4547a5d2d09550ad05e7.jpg]: https://img.136.la/20210615/0f313cfea28d4547a5d2d09550ad05e7.jpg
[db7b0b27cd0b4df4a7b0a2eb2a05bbae.jpg]: https://img.136.la/20210615/db7b0b27cd0b4df4a7b0a2eb2a05bbae.jpg
[511a4be46aad47a7bed9967eefb07f80.jpg]: https://img.136.la/20210615/511a4be46aad47a7bed9967eefb07f80.jpg
[689a1dd877ab4289ab97bc6244928f22.jpg]: https://img.136.la/20210615/689a1dd877ab4289ab97bc6244928f22.jpg
[34ff79654eed43138efb0eb933df3192.jpg]: https://img.136.la/20210615/34ff79654eed43138efb0eb933df3192.jpg
[81e1d3a0e7544563a1b01c70ce69b1e6.jpg]: https://img.136.la/20210615/81e1d3a0e7544563a1b01c70ce69b1e6.jpg
[381dea1770fb4af88e2ef14987669d6f.jpg]: https://img.136.la/20210615/381dea1770fb4af88e2ef14987669d6f.jpg
[9da51aef10ee4cabae1dbb5275fdf25a.jpg]: https://img.136.la/20210615/9da51aef10ee4cabae1dbb5275fdf25a.jpg
[36bfd23f48fe4aefbe72ca4ec43676a6.jpg]: https://img.136.la/20210615/36bfd23f48fe4aefbe72ca4ec43676a6.jpg
[0a34f367aac24fcbb50625ce2a8a6766.jpg]: https://img.136.la/20210615/0a34f367aac24fcbb50625ce2a8a6766.jpg
[e878df267a4548678b262b6b2c454631.jpg]: https://img.136.la/20210615/e878df267a4548678b262b6b2c454631.jpg
[ce76fcb9091b40c4b09d4fc84185b72b.jpg]: https://img.136.la/20210615/ce76fcb9091b40c4b09d4fc84185b72b.jpg
[d518a92577514ca9a0c15c9c02ea9d6a.jpg]: https://img.136.la/20210615/d518a92577514ca9a0c15c9c02ea9d6a.jpg
[e7ea35f171dd4ebd9a758f7d0bb3b85d.jpg]: https://img.136.la/20210615/e7ea35f171dd4ebd9a758f7d0bb3b85d.jpg
[4837cb2d22df4e1291e742b50136a55d.jpg]: https://img.136.la/20210615/4837cb2d22df4e1291e742b50136a55d.jpg
[5e0d211cf08647c8a341bc1070e89a11.jpg]: https://img.136.la/20210615/5e0d211cf08647c8a341bc1070e89a11.jpg
[7e526b83f39d43a5aa3c722b72444fd1.jpg]: https://img.136.la/20210615/7e526b83f39d43a5aa3c722b72444fd1.jpg
[8aa67266950e44dd899a2f45076f2415.jpg]: https://img.136.la/20210615/8aa67266950e44dd899a2f45076f2415.jpg
[ee86b16f44f7419bb0bf35d180fde0a1.jpg]: https://img.136.la/20210615/ee86b16f44f7419bb0bf35d180fde0a1.jpg
[db2615d5c1bf412b9904135f0bb0272c.jpg]: https://img.136.la/20210615/db2615d5c1bf412b9904135f0bb0272c.jpg
[ea3f86aadb9e4bcf9e54a75f95623825.jpg]: https://img.136.la/20210615/ea3f86aadb9e4bcf9e54a75f95623825.jpg
[a0fbbf6659d645e0be9704df32b8d6b6.jpg]: https://img.136.la/20210615/a0fbbf6659d645e0be9704df32b8d6b6.jpg
[2f0d36fe3da14f058ded1c1362845507.jpg]: https://img.136.la/20210615/2f0d36fe3da14f058ded1c1362845507.jpg
[f2de2d22ed79406aad7f287f71c7359c.jpg]: https://img.136.la/20210615/f2de2d22ed79406aad7f287f71c7359c.jpg
[a9de9438192e4ae69d14b82bf20e1cce.jpg]: https://img.136.la/20210615/a9de9438192e4ae69d14b82bf20e1cce.jpg
[6e50e0eb8a3a4f69888a36535b3e6ec1.jpg]: https://img.136.la/20210615/6e50e0eb8a3a4f69888a36535b3e6ec1.jpg
[091fbd15d1884336ba82b14f58bae371.jpg]: https://img.136.la/20210615/091fbd15d1884336ba82b14f58bae371.jpg
[497756ca8ce94def860b71f11e6d83d9.jpg]: https://img.136.la/20210615/497756ca8ce94def860b71f11e6d83d9.jpg
[e088e02b8c154e1aa73871c14881f1d2.jpg]: https://img.136.la/20210615/e088e02b8c154e1aa73871c14881f1d2.jpg
[9c9672e76d594debbf528e30161df3aa.jpg]: https://img.136.la/20210615/9c9672e76d594debbf528e30161df3aa.jpg
[1d52babbb3fe4f4fbae859a0efc6293c.jpg]: https://img.136.la/20210615/1d52babbb3fe4f4fbae859a0efc6293c.jpg
[a4c3237cac0e480b8f5b98bfce0c3e9a.jpg]: https://img.136.la/20210615/a4c3237cac0e480b8f5b98bfce0c3e9a.jpg
[f2219cae78544be8b0df3abd62dbd29c.jpg]: https://img.136.la/20210615/f2219cae78544be8b0df3abd62dbd29c.jpg
[b64836c9c718471c9f29eaf5953911d3.jpg]: https://img.136.la/20210615/b64836c9c718471c9f29eaf5953911d3.jpg
[e6f08ff717d94ff98da3166523710351.jpg]: https://img.136.la/20210615/e6f08ff717d94ff98da3166523710351.jpg
[39851ed5cc9b4f268c5db9c5ff8674c4.jpg]: https://img.136.la/20210615/39851ed5cc9b4f268c5db9c5ff8674c4.jpg
[97adeb393d5f4a0eaa1d1a2a805c3fc3.jpg]: https://img.136.la/20210615/97adeb393d5f4a0eaa1d1a2a805c3fc3.jpg
[7b7bd9e32b874ed89ec54a16098ca6b0.jpg]: https://img.136.la/20210615/7b7bd9e32b874ed89ec54a16098ca6b0.jpg
[c927ff6d6c9d4f08adb65a03f330f0a8.jpg]: https://img.136.la/20210615/c927ff6d6c9d4f08adb65a03f330f0a8.jpg
[4cec5600567c4365a22b35161385ab84.jpg]: https://img.136.la/20210615/4cec5600567c4365a22b35161385ab84.jpg