使用Paper.js制作HTML5游戏

前言:我从非常基础的html开始,并从CSS知识和对javascript的模糊理解开始。

我为什么喜欢坦克? 我有NFI,但是我有,当我需要一个想法在第二年统一休息之前制作一款游戏时,我认为坦克游戏的想法会很有趣。

总体而言,该项目花了我不到两周的时间。 我不是每天都在处理它,但是在考试期末它是一个不错的拖延工具。

我对自己想做的事情有一个基本的想法,但这实际上是一种“让我们看看这是怎么回事”的事情,因此有很多地方-如果我再有时间的话,我可能会做出不同的决定-但那是在学习’聪明?

该如何

核心很简单。 一个基本的index.html文件,带有一些简单的CSS来控制菜单,显示和某些交互性。 总体而言,该项目的90%都使用javascript,其中大部分都使用了paperscript(一种香草的微妙变体,用于更无缝的paper.js体验)进行了画布乐队的演出。 就像我最近做的许多Littler html项目一样,我使用urge.sh进行托管和部署。

设计

快速地将图形放在一起往往倾向于使用简单的快捷方式。 我的坦克是基本形状和多边形的集合,收集并包装在一起并具有一些基本功能。 我的爆炸,随着时间的流逝散布着随机散布的圈子。 我的贝壳,快速移动的圈子。

在进行任何真实的游戏玩法之前,我为坦克和炮塔设置了一些基本的上下左右的wasd控件,以便可以测试手感。 我希望它反应迟钝,并且足够简单以掌握基础知识。

游戏玩法

我将游戏设置为两个团队之间的竞赛。 绿色,黑色,并且用户标识为黄色和黑色混合体(用于区分),并且是黑色团队的成员。 核心游戏玩法围绕在地图上移动以与敌人相遇而进行。 距离较远的镜头可能会偏转,或者至少造成较小的损害。 点坯可能造成严重损坏,甚至损坏坦克。 如果坦克不移动,则有一定的准确性加成;如果坦克移动,则有较小的分散性。

引入AI

基本的AI很简单。 让坦克尝试向敌人进攻。 在范围内时,开始拍摄。 该算法在每次重绘时都运行,这意味着游戏结束得相对较快,但事实证明这是a)有点无聊和可预测的,b)有点难以击败AI。 战车也没有使用炮塔,我希望他们使用

经过大量调整后,在战车前增加了一个不可见的视锥,以引入射线投射式目标跟踪,并且为游戏提供给AI的信息水平更加模糊,可玩性更高。 我很想深入进行调整。


下一步

即使这是一个很大的玩具项目,我还是想做两件事来扩大游戏范围。

  • 与免费数据库集成可获得永久性的高分。
  • 并添加合作模式(至少在一些基本水平的多人游戏中)

现在,请检查一下,让我知道您的想法。

游戏在这里直播。

该项目的源代码在github上。

让我知道你的想法!