热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5手游制作,HTML5游戏制作(九)——炮塔游戏

本章学习创建一个炮台类游戏,通过一个完成的游戏案例,来理解:平铺背景、物理属性、行为的含义,以及进一步熟悉界面视图的功能&#

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

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

,掌握基本的操作技巧。

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

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

是不是很有意思?那让我们开始吧!

学习目标:

掌握tiledbackground对象的使用方法

掌握physics行为的使用方法

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

巩固setangle toward position动作

巩固mouse对象的使用方法

掌握applyimpulse at angle动作

掌握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

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



推荐阅读
author-avatar
百变睛灵_345
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有