今天（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（负面的），正面的包括三种尺寸的怡宝矿泉水，负面的包括三种尺寸的农夫山泉和两种尺寸的百岁山矿泉水。
| 最少加分 | 最多加分 | 是否为炸弹 | 是否会移动 | 生成概率 | |
| 怡宝 小 | 50 | 100 | 否 | – | 40% |
| 怡宝 中 | 100 | 200 | 否 | – | 60% |
| 怡宝 大 | 200 | 500 | 否 | – | 80% |
| 农夫山泉 小 | -50 | -100 | 否 | – | 40% |
| 农夫山泉 中 | -100 | -200 | 否 | – | 60% |
| 农夫山泉 大 | -200 | -500 | 否 | – | 80% |
| 百岁山 小 | -1 | -1 | 是 | – | 80% |
| 百岁山 大 | -1 | -1 | 是 | – | 40% |
生成概率，正面和负面分别计算。
耗时
基本游戏系统耗时 10 小时，代码量 700 行，资源图片 42 张。
搜罗了一些免费的游戏素材下载网站 背景图和ui元素是在这些地方找的：
