html格斗游戏,对打游戏

不用引擎,不用画布canvas,不用任何库(包括jquery), 原生div+img组件,开发格斗游戏
游戏教程视频已经上传 b站:https://www.bilibili.com/video/av89986087/

接下来会陆续发布该游戏的开发教程。

大家好,我是居家懒人,现在是2020年,我在湖北老家过春节,嗯~~~,因为这次武汉冠状病毒,大家都憋在家,都说呆在家里不出门,就是对国家最好的贡献,各位兄弟姐妹们,有没有坚持室内健身和学习呢

我的职业是做IT农民,就是什么也不会,生活圈子狭窄,只会写代码的码农
宅在家这些天,吃的很好,但是睡的其实不好,因为心里头空空的,躺在床上很晚了却睡不着,直到一天我翻出了自己的记事本里的一个记录之后
 
接下来的几天作息时间才有了一些节奏,我记事本里这个想法就是用原生html写一个小游戏,看看能做到什么程度。
 
对了介绍一下我的工作,感觉慢杂乱的,做过技术主管,开发过手游,页游,app,还开发过小程序,甚至还做过flash动画广告制作,那是我大学毕业后早报纸上找到的第一份工作. 大学的一个兴趣就是玩flash,做各种时间轴动画,加上一点点似懂非懂的代码让图片跟随鼠标位移什么的,不过后来因为我没有美术功底,然后想找编程相关的工作,做了几个月就离开了。

说到游戏开发,都离不开讨论现在流行的游戏引擎,我也做了简单的归纳:

好,有点跑题了,回到我的关于html的话题,在很多年前,html5标准还没有普及,甚至现在html中的canvas组件还没有,也就是不支持webgl出现的时候,听说,不知道是国内还是国外的大牛高玩,写出了html版本的星际争霸,我没玩过。
 
刚才说到我要用原生html写一个小游戏,那么具体是个什么类型呢:答案是对打游戏,可能会有懂行一些或者比较认真的小伙伴们要问,
 
"什么?你要用html开发一款对打游戏?用html标签那种写UI的组件来开发?现在都是采用成熟的游戏引擎的年代了,你做这件事情有什么意义?"
 
嗯,我要说,我没想过把这个游戏做的很完善或者体验很好,我的目标是实现一些基本的功能就打住,不再玩后开发,所以也没有想过把这个游戏做上线,毕竟时间有限,而我的记事本里接下来要做的事情还有很多
 
那么这个小游戏就是我爱折腾,想要动手实践一下而已,真的就是一个非常小非常小的小游戏,没有很酷炫的技能特效,也没有给人带来沉浸感的光线,阴影效果,其实可以看到仅仅是几张图片被我控制来回跑来跑去而已, 只能算是做一个demo,一次尝试。
 
我在网上找了两个人物角色,决定自己ps一下直接用,
 
不知道玩dota的伙伴,喜不喜欢屠夫这个角色,或者现在王者荣耀的伙伴,爱不爱玩钟馗,他们的技能是我最喜欢的,就是钩子技能,于是我自己给钢铁侠弄了个仍钩子的技能,
 
扔出去把对手勾过来,然后咬一口,但是我没有美术功底,所以就用一团火焰来代表发动攻击了,
 
右边这个角色我起名叫做盔甲幽灵,他的技能就是蓄力攻击,蓄力越久,扔出的长矛越远
 
游戏的角色技能的平衡我其实没有想太多,盔甲幽灵因为比较很难打到人,所以给他的攻击值设的比较高
 
怎么样,两个角色是不是仔细看有些得瑟,摇头晃脑的
左边人物走路,右边人物走路,左边人物跳跃,右边人物跳跃
我直接把我当前的书桌拍下来,做成了游戏背景,可以随人物移动的时候水平滚动
 
 
好了,算是一个开篇介绍,内容做的比较仓促,感谢兄弟姐妹们看到这里,从下一期开始,我就会逐步的给大家讲解,这个看起来比较无聊的小游戏的步骤。
嗯,下期再见。

都闪开,不用任何游戏引擎,html也能开发格斗游戏的更多相关文章

  1. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇:简介及目录》(附上完整工程文件)

    G-3D引擎2D射击类游戏制作教程 游戏类型: 打飞机游戏属于射击类游戏中的一种,可以划分为卷轴射击类游戏. 视觉表现类型为:2D 框架简介: Genesis-3D引擎不仅为开发者提供一个3D游戏制作 ...

  2. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇08:弹幕系统》本系列完结

    8.弹幕系统 弹幕系统概述: 弹幕系统的设计体现了射击游戏的基本要素,玩家要在敌人放出的大量子弹(弹幕)的细小空隙间闪避,能在玩家闪躲弹幕的时候给玩家带来快感,接近满屏的子弹,增加了对玩家的视觉冲击力 ...

  3. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇05:角色中弹》

    5.角色中弹 概述: 为了使游戏具有挑战性,大部分游戏设定中,游戏角色都有生命限制.即在游戏中,由于玩家的操控操控不当,导致游戏角色死亡游戏终止.打飞机游戏也不例外,当敌人击中角色的时候,角色宣判死亡 ...

  4. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇04:碰撞检测》

    4.碰撞检测 碰撞概述: 游戏世界里,游戏对象不能做出如同在真实世界里的物理运动效果.对于大部分游戏来说,都要为其添加物理系统,让其可以模拟真实世界发生的物理运动.但是在这个打飞机游戏Demo中,是用 ...

  5. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇03:子弹发射》

    3.子弹发射 子弹发射概述: 在打飞机游戏中,子弹是自动发射的.子弹与子弹之间间隔一定的时间,玩家通过上下左右控制游戏角色,来达到躲避敌人及击中敌人的操作. 发射原理: 抽象理解为有两个容器存放子弹, ...

  6. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇02:滚屏》

    2.滚屏 滚屏概述: 打飞机游戏场景背景设计通常很简单,因为角色敌人道具等都不与背景发生交互事件.开发者只需要根据设定的游戏类型,为游戏制作背景,模拟一个大环境即可. 滚屏原理: 材质UV动画,实现背 ...

  7. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇07:全屏炸弹》

    7.全屏炸弹 全屏炸弹概述: 为了增设游戏的趣味性,我们制作一个游戏的基本框架以外.还会增设一些其他的额外的功能.比如5秒无敌状态.冰冻效果等.下面咱们以消灭屏幕中所有炸弹为例,看除了碰撞可以触发事件 ...

  8. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇06:计分》

    6.计分 计分概述: 分值计量直接反应玩家在游戏中获得的成就感.因此,计分系统在游戏中显得尤为重要,有的反应在直接获取的分数上,有的反应在杀敌数量上等. 计分原理: 原理图,如图6-1所示. 图6-1 ...

  9. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇01:播放序列动画》

    1.播放序列动画 系列动画播放概述 2D游戏中的动画系统,不同于3D游戏.3D游戏中,角色美术资源不仅包含角色模型的,还包括角色的贴图和动作等,模型本身自带角色的动作动画效果.2D游戏中,角色美术资源 ...

随机推荐

  1. SQLiteOpenHelperde的oncreate方法

    main中

  2. 「扫盲」Elasticsearch

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家的公司用Elasticsearch多不 ...

  3. python3复习

    一.基础11.运行python代码cmd->python 文件路径/文件名称2.解释器针对linux/uinux系统3.注释单行注释    #多行注释    三个单引号或三个双引号4.变量法律规 ...

  4. Flask DBUtils

    作用:创建连接池,解决多线程问题 1.安装模块 pip3 install -i https://pypi.douban.com/simple DBUtils 2.settings.py(配置文件) f ...

  5. git 控制版本

    git:版本控制工具 1.进入想要进行版本控制项目的文件夹内 2.右击->Git Bash Here 3.初始化 git init 会多出一个.git隐藏文件夹 4.查看文件状体 git sta ...

  6. Java入门 - 语言基础 - 21.Scanner类

    原文地址:http://www.work100.net/training/java-scanner.html 更多教程:光束云 - 免费课程 Scanner类 序号 文内章节 视频 1 概述 2 使用 ...

  7. Nginx配置不同端口号映射二级域名

    upstream xx{ #ip_hash; server 127.0.0.1:1008; } server { listen 80; server_name xx.xxx.com; location ...

  8. php代码没解析成功

    在Apache中加载PHP模块 1.打开Apache的配置文件httpd.conf(位于Apache2\conf 目录下). 2.查找 “#LoadModule ssl_module modules/ ...

  9. typescript 第一弹

    typescript官网: http://typescriptlang.org typescript 在线运行环境: http://www.typescriptlang.org/play/index. ...

  10. redis--->字符串和哈希对比

    redis 的字符串和哈希对比 相同点和不同点 相同点: 首先是他们有很多效果类似的命令,比如set和hset,mset和hmset等等 大多数情况下使用字符串存储的场景使用hash也可以实现. 不同 ...