今天心血来潮，想搞个小游戏玩玩，就做个“小青蛙过河”的小玩意。你还别说，做起来还挺有意思的！
准备工作
我啥也没想，就直接在纸上画个草图。大概就是几块石头，一个小青蛙，然后让青蛙跳来跳去，跳到对岸就赢。想得挺简单的，做起来再说！
然后我就打开电脑，琢磨着用啥工具。本来想着用Unity，毕竟搞游戏方便。后来一想，就这么个小东西，用Unity太大材小用，就决定用最简单的网页技术来实现，HTML、CSS、JavaScript，这仨兄弟就够！
开工！
我先用HTML把基本的结构搭起来。搞几个<div>，分别代表石头和小青蛙。然后用CSS给它们加点样式，石头就用灰色的圆角矩形，小青蛙就用个绿色的圆圈，再加个小眼睛啥的，看着顺眼就行。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
接下来就是最关键的，用JavaScript让青蛙动起来！
- 先是监听键盘事件。 我得知道玩家按哪个键，上下左右，对？这块用
addEventListener就能搞定，监听keydown事件，然后判断一下按键码，就知道玩家想往哪跳。 - 然后就是移动青蛙。 这块就是改变青蛙的
<div>的left和top属性。每次按键，就给它加个固定的值，让它看起来像是在跳。 - 再来是碰撞检测。得判断小青蛙有没有跳到石头上, 要是小青蛙跳出边界，或者掉到河里，那就得重来，是不？我的做法也很简单，就是比较青蛙和石头的位置，看看有没有重叠。可以用循环去遍历小青蛙与石头的坐标位置，每次移动都需要去判断下。
- 就是判断输赢。 青蛙跳到对岸的石头上，那就赢！这个也很简单，只要判断一下青蛙的位置是不是到对岸就行。
遇到的坑
做的时候也遇到一些小问题。比如说，青蛙跳得太快，一下就飞出去；或者有时候按键没反应，得按好几次才跳一下。这些都是小问题，稍微调一下参数，改改代码就好。
还有一个问题是，我一开始没考虑到青蛙跳到石头外面的情况，结果青蛙就直接“飞”走。后来加碰撞检测，才解决这个问题。
成果展示
经过一番折腾，我的“小青蛙过河”终于做好！虽然画面很简单，但是玩起来还挺有意思的。看着小青蛙一步一步跳到对岸，还挺有成就感的！哈哈
这回做小游戏的过程还是挺愉快的。虽然只是个小玩意，但是也让我学到不少东西。下次有时间，再做一个更复杂的游戏玩玩！
