[我要喝怡宝] 小游戏开发日记&灵感

今天(11-01)是和怡宝(女朋友)两个月的日子,决定写一个小游戏纪念一下,于是做了这个【我要喝怡宝】。https://cestbon.ht.mba/

TODO LIST

灵感

怡宝、C’estbon?矿泉水?做成什么类型的游戏呢?

2D像素风?横板闯关?消除类游戏(羊了个羊)?3D(工程量太大 直接pass)?

最初的想法是基于JS 加入人脸识别、手机姿态控制、声音控制,顺便练习各种HTML5新API,灵感枯竭了。

最后,想到儿时4399玩到的一个小游戏“黄金矿工”,决定复刻一个。

技术栈

最初有这个想法时想过 Unity、Cocos 2DX 等一些游戏引擎,一方面可以直接打包多端(Web、安卓、iOS、小程序)、另一方面也能增长使用游戏引擎的经验,但由于复杂度(对于这么一个小游戏来说)还是放弃了。

最终决定使用原生JS去写,这是我的长项,这么做能直接兼容各个主流浏览器(即平台),后续如果想打包小程序移植起来也很方便。

使用原生JS还可以引入jQuery,方便的使用AJAX进行后端通信。

值得记录的小问题

【1】获取绳子尖端坐标

点击按钮后,角度固定(α°),绳子会发射出去,此时已知绳长、夹角、(定值)起始点坐标,需要求绳子尖端坐标以进行碰撞检测。

这是一个非常简单的高中(甚至初中)数学题,可是由于笔者数学太渣,想了很久还是去求助了学霸。

得出坐标如下: [X+Asin(α),Y-Acos(α)],由于 JavaScript中的 Math 计算是弧度,而CSS中绳子的rotate单位为deg(角度)(*存储为整数型度数),需要将角度转换为弧度。 公式:α/180*Π

JavaScript代码如下:

let strHeight = $('.string').height();
var x =  window._gameData['stringX'] + (strHeight * Math.sin((window._gameData['nowStringDeg']/180)*Math.PI));
var y = 100 + window._gameData['stringY'] - (strHeight * Math.cos((window._gameData['nowStringDeg']/180)*Math.PI));

【2】碰撞检测

每关的关卡地图是自动生成的,我的方案是生成时把坐标和物品信息存储在一个二维数组中。

data为物品Class的所有数据,x1/x2/y1/y2 为物品矩形顶点坐标。

每次帧刷新(约1/60s)时,遍历当前map中所有item,满足如下条件即判定为碰撞。

x>x1 & x<x2 & y>y1 & y<y2

这是最简单的情况下,判断一个点是否在一个矩形内的方法,而实际应用中可能出现多边形、圆形等不规则物体,此时如何判断成了一个难题。

遇到难题就开摆,我们绕过了这个问题 使用最简单的方法。

等等,为什么x1==x2呢?

因为img在被添加到DOM后立刻获取了他的width,此时获取的width是0,被存到了数组里(这是个坑,排查了好久才发现 为什么碰撞检测不到)。

解决方法是在碰撞检测时判断x1==x2,重新赋值x2为x1+item.width。

【3】游戏tick周期

我用了新的 requestAnimationFrame 特性,保证性能的同时优化了不同设备上的游玩效果。

这不是一个新特性,但是是我第一次将其应用到项目中。

传统项目中,我们使用 setInterval() 来执行一个循环任务(例如动画),使用这个特性后,即可用最低的性能代价达到最好的效果。

【4】地图生成

我为每种物品设置了一个概率(n%),本质上是创建一个 Array[100] ,用n个item填满它,随机取一个element,即可达到“概率生成”的效果。

游戏规则

类似黄金矿工,在绳子旋转到一个角度时点击按钮,抓到物品,达成目标。

我设计了两类物品,positive(正面的) 和 negative(负面的),正面的包括三种尺寸的怡宝矿泉水,负面的包括三种尺寸的农夫山泉和两种尺寸的百岁山矿泉水。

最少加分最多加分是否为炸弹是否会移动生成概率
怡宝 小5010040%
怡宝 中10020060%
怡宝 大20050080%
农夫山泉 小-50-10040%
农夫山泉 中-100-20060%
农夫山泉 大-200-50080%
百岁山 小-1-180%
百岁山 大-1-140%

生成概率,正面和负面分别计算。

耗时

基本游戏系统耗时 10 小时,代码量 700 行,资源图片 42 张。

搜罗了一些免费的游戏素材下载网站 背景图和ui元素是在这些地方找的:

https://opengameart.org/

https://kenney.nl/assets

https://craftpix.net/freebies/

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇