Pongo网页版JavaScript源代码及设计思路

1.游戏背景介绍(写在前面的废话)：

    五月初的某天，看到某网推荐了这款游戏，Pongo，看着还不错的样子就用ipad下下来试玩了下，玩了两局感受还错挺过瘾的，由于是手欠类游戏嘛你们懂的。

    可是没一会发现游戏在ipad彷佛有些bug，玩一会就会卡住而后只能强退了，真是揪心，记录还等着破呢。

    怎么办？玩游戏不如玩本身的游戏的念头又邪恶的出现了，而后就把pad丢给了朋友虐心去，我默默回到电脑前开始动手本身写个不会卡的。

    大概两小时吧，写出了基本框架，而后扔sinaapp里试了下效果基本能玩就洗洗睡了。

    次日醒来由于周末没事就花了些时间设计了下界面，同时不幸本身测出了一些比较严重的bug，最后又花了些时间给改掉了。

    最后游戏取名”Pongo+“(手机党点我即玩)，电脑端暂时不支持，并顺便在Github上上传了源码并去掉了提交成绩模块。

2.游戏试玩网址：

Pongo+(仅限移动端)：http://mypongo.sinaapp.com/

‍‍‍‍github开源(欢迎star/fork让游戏更好)：https://github.com/ChenReason/pongo/blob/gh-pages/index.html‍‍‍‍

3.游戏规则玩法：

点击屏幕会改变挡板的运动方向，点击一次挡板方向相应改变一次，目的是为了能恰好挡住四处滚动的小球不让其跑出大圆外。时间越长越好！最后可提交本身的成绩进行排名！

4.游戏所用技术：

    HTML、CSS、JavaScript、Canvas、PHP

5.游戏设计思路：

    a)运用Canvas将游戏的主界面画出，底部为一单色长方形，上面覆盖一个大圆，大圆上再绘制小圆及挡板，挡板中部还有一个大小为1px的超级小圆(做实现碰撞检测)。

    b)小圆运动方向一共有8个分别为上、下、左、右、左上、左下、右上和右下。

    c)挡板的运动方向只有两个，顺时针和逆时针。

    d)碰撞检测未涉及到引擎的使用，而是根据小圆与挡板中部的超级小圆进行距离判断，从而实现简陋的碰撞检测。

    e)小球碰撞后反弹的方向肯定，利用常识列举，共8种状况。

6.游戏实现难点：

    a)碰撞检测。

    b)定时器setInterval的清除时机以及是否清楚完全。

    c)定时器周期长短与游戏体验的关系。

    d)Android与IOS设备性能不一样致使的游戏流畅度问题。

7.游戏现有问题：

    a)因为碰撞检测是比较两圆的圆心距，且涉及到定时器的使用，所以因为定时器间隔极短致使在肉眼所见的一次碰撞背后其实已经发生了数十次碰撞，由此会致使小球最后实际的反弹方向与现实的物理定理有所不一样，通过优化，出现的几率已经较低，但仍未能避免，所以有些玩家会发现小圆若没有很准地撞在挡板正中央则可能致使游戏失败。

    b)因为函数过于冗长，运行效率较低，再加上使用定时器，所以在Andorid与iOS或其余移动端上的游戏体验不尽相同（总体来讲iOS因为Android）。

    c)排行榜并未实现自动实时更新。(数据库还不会用)

8.游戏界面预览：

(图1为第一版，图2去掉了按钮，图3为最终版，图4为排行榜)

图1

图2

图3

图4

10.写在最后

这纯属又是一个自娱自乐，写完后的第三天由于开始忙着投简历找实习就没空再管，扔到朋友圈让朋友玩去了。这一个月过去了再从新看这游戏，感受它不应就这样死掉，本人没什么技术，作得很拙略，所以发出这篇文字但愿能帮到一些对pongo感兴趣的朋友，再者就是但愿若是有这方面的高手看到了可以给予赐教，一切疑惑和赐教都欢迎给我留言，谢谢！

转载请注明出处：http://chenreason.com以及本人署名ChenReason，谢谢。