• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > axure实现坦克游戏原型

axure实现坦克游戏原型

作者: 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure原型图软件,axure常用原型模板,axure app原型素材,axure手机app原型,axure手机原型尺寸等相关知识,希望在学习及工作中可以帮助到您

datanke

看到一篇打飞机的文章,深受启发,但是感觉飞机打太多伤身体,抽空试了试做了个打坦克的游戏。

1

玩法介绍:

上下左右移动,空格开火,可以攻击右边的坦克。

设计思路:

游戏嘛,首先要有主角,即我们的坦克。根据经典的红白机坦克大战来作为参考的话,坦克可以往上下左右四个方向进行移动,移动的时候,坦克的朝向也要跟着变化。

行走搞定后,接下来就要能够发射炮弹。炮弹有两种状态,正常飞行和销毁状态。按下空格可以发射炮弹,碰到敌方坦克或边界就切换成销毁状态。

接下来要做一个敌方坦克来做靶子,让子弹碰到靶子后,靶子摧毁(隐藏)

思路有了,接下来开始制作。

1、首先制作出坦克,以及坦克上下左右的四个朝向,这个需要利用动态面板,添加四个状态,每个状态画一个坦克,那么坦克四个方向的图就有了。

2

1

2、接下来在页面的全局事件上,加上按键事件,上下左右来开动坦克。

开动坦克的时候,根据按键方向,让坦克移动一下,同时利用动态状态设置,来达到改变坦克朝向的目的,用条件判断按键,和移动就可以实现了。

1

3、好了,现在我们可以运行一下,看看坦克是否能正常行走。接下来就要让坦克发射炮弹了。要注意,炮弹我们这里只做一发,因为太多的对象axure目前不支持太复杂的交互。炮弹的整个流程是:发射>移动>碰撞消亡。我们首先制作炮弹的发射和移动。炮弹的移动方向,首先是根据发射时的坦克朝向来判断,然后自身再不停的循环移动。

开火时,我们可以通过获取坦克的动态面板状态,来获取子弹的发射方向:

1

然后把这个方向的值,用设置文本动作,赋值给炮弹元件。

接下来,在子弹的移动事件上,写上判断当前炮弹元件的值是哪个方向,就让炮弹往哪个方向移动10像素。

1

注意,要先设置等待50毫秒,再移动,这样才可以触发移动事件的不停循环。如果把这两个动作颠倒,坦克就不会有动画了。

做好之后,可以尝试发射一下,看看子弹是否正常移动

4、接下来继续在子弹的触发器上加上碰撞检测,碰到边界或者敌方坦克后消亡。

首先制作出界判断。我们可以利用条件判断:局部变量来获得子弹的坐标x和y,如果横坐标小于0或者大于等于800,或者纵坐标小于0或者大于等于600就算出界。出界后,隐藏子弹(消亡)。

接下来用条件判断:区域接触,来判断子弹是否接触到了敌方坦克,如果接触到了,子弹和敌方坦克同时消亡。

3

5、好了,到此为止我们的坦克会走,炮弹的移动也做好了。接下来就是要考虑如何进行炮弹的循环发射了。

axure8加入了触发事件,我们可以用它来实现函数功能,这样循环发射炮弹这种以前实现起来比较复杂的逻辑,现在可以利用函数来进行变相的if嵌套循环,这也是axure8制作复杂交互的一个重要亮点。

在按下空格时,首先调用子弹初始化函数(绑到单击事件上),首先判断子弹处于消亡状态,即元件子弹可见不等于true,然后显示子弹,并触发子弹朝向设置函数(绑到双击事件上),然后将子弹的位置初始化到坦克的位置(还是用获取元件坐标事件来实现,用加减法加入一个位置偏移量)。OK,到这里就大功告成了。

函数调用关系图:

1

后记:

本人之前的职业是做网游设计的,现在axure越来越强大了,这个原型目前是初试牛刀,还有很多想加入的功能并未添加进来,比如是否可以结合数据集,做出刷怪器,坦克加入AI,地图上增加砖墙等互动物件等等。如果有喜欢的人,后面可以一起来讨论。

原型文件:

作者提供:

http://pan.baidu.com/s/1hrcMBNe

人人官方:

链接: http://pan.baidu.com/s/1c1hEFvy 密码: fn22

您可能想查找下面的文章:

  • Axure教程:原型设计之侧滑菜单
  • Axure教程:验证码原型制作实例
  • 三步教你 Axure 原型变身 EXE 程序
  • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
  • axure实现坦克游戏原型

相关文章

  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-14Axure原型技巧 | 这回我们模拟下键盘输入
  • 2017-06-13Axure教程:商品详情页产品图效果展示
  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-14banner轮播axure最简易实现及手动切换
  • 2017-06-13自定义微信元件库:Axure基本元件的应用(下)
  • 2017-06-13Axure 8.0实例:复选框的应用
  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13Axure教程|原型设计之抽屉列表
  • 2017-06-13Axure RP8 动态面板之轮播图设置

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure 7高保真还原Web首页布局和交互教程
    • Axure教程:用Axure实现晚会抽奖程序
    • Axure教程:怎样做低保真轨迹追踪与回放
    • Axure教程:原型设计之水泡导航栏
    • 如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
    • Axure 原型 | 关于中继器的简单使用及应用的场景
    • Axure教程:如何使用Axure中继器元件?
    • Axure 7.0实例:利用Axure制作放大镜原型
    • 五分钟教你快速上手Axure交互设计
    • Axure教程:可使用的计算器demo制作(上)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有