pongo网页版javascript源代码及设计思路

《pongo网页版javascript源代码及设计思路》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Pongo网页版JavaScript源代码及设计思路http://www.yunyoubar.com/邮件群发1.游戏背景介绍(写在前面的废话)：五月初的某天，看到某网推荐了这款游戏，Pongo，看着还不错的样子就用ipad下下来试玩了下，玩了两局感觉还错挺过瘾的，因为是手欠类游戏嘛大家懂的。但是没一会发现游戏在ipad似乎有些bug，玩一会就会卡住然后只能强退了，真是揪心，记录还等着破呢。怎么办？玩游戏不如玩自己的游戏的念头又邪恶的出现了，然后就把pad丢给了朋友虐心去，我默默回到电脑前开始动手自己写个不会卡的。大概两小时吧，写出了基本框架，然后扔sinaapp里试了下效果基本能玩就洗

2、洗睡了。第二天醒来因为周末没事就花了些时间设计了下界面，同时不幸自己测出了一些比较严重的bug，最后又花了些时间给改掉了。最后游戏取名”Pongo+“(手机党点我即玩)，电脑端暂时不支持，并顺便在Github上上传了源码并去掉了提交成绩模块。2.游戏试玩网址：Pongo+(仅限移动端)：http://mypongo.sinaapp.com/github开源(欢迎fork让游戏更好)：https://github.com/ChenReason/pongo/blob/gh-pages/index.html3.游戏规则玩法：点击屏幕会改变挡板的运动方向，点击一次挡板方向相应改变一次，目的是为了

3、能刚好挡住四处滚动的小球不让其跑出大圆外。时间越长越好！最后可提交自己的成绩进行排名！4.游戏所用技术：HTML、CSS、JavaScript、Canvas、PHP5.游戏设计思路：a)运用Canvas将游戏的主界面画出，底部为一单色长方形，上面覆盖一个大圆，大圆上再绘制小圆及挡板，挡板中部还有一个大小为1px的超级小圆(作实现碰撞检测)。b)小圆运动方向一共有8个分别为上、下、左、右、左上、左下、右上和右下。c)挡板的运动方向只有两个，顺时针和逆时针。d)碰撞检测未涉及到引擎的使用，而是根据小圆与挡板中部的超级小圆进行距离判断，从而实现简陋的碰撞检测。e)小球碰撞后反弹的方向确定，利用

4、常识列举，共8种情况。6.游戏实现难点：a)碰撞检测。b)定时器setInterval的清除时机以及是否清楚彻底。c)定时器周期长短与游戏体验的关系。d)Android与IOS设备性能不同导致的游戏流畅度问题。7.游戏现有问题：a)由于碰撞检测是比较两圆的圆心距，且涉及到定时器的使用，因此由于定时器间隔极短导致在肉眼所见的一次碰撞背后其实已经发生了数十次碰撞，由此会导致小球最后实际的反弹方向与现实的物理定理有所不同，经过优化，出现的概率已经较低，但仍未能避免，因此有些玩家会发现小圆若没有很准地撞在挡板正中央则可能导致游戏失败。b)由于函数过于冗长，运行效率较低，再加上使用定时器，因此在A

5、ndorid与iOS或其他移动端上的游戏体验不尽相同（整体来说iOS由于Android）。c)排行榜并未实现自动实时更新。(数据库还不会用)8.游戏界面预览：(图1为初版，图2去掉了按钮，图3为最终版，图4为排行榜)图1图2图3图49.游戏JavaScript部分源代码：1.var ifingame=0;  2.var maxgrade=0,grade=0;  3.var grade1,grade2;  4.var nickname;   5.var gamespeed=1.4;//小球速度  6.var linespeed=Math.PI/95;  //跟踪线速度  7.var cra

6、shdistancefaild=-7;//碰撞检测参数  8.var crashdistancesucc=15  9.var fantanjuli=7;      10.var themaxgradeline=12.1;       11.       12.function getCookie1(nickname)  13.{  14.    if (document.cookie.length>0)  15.    {   16.        c_start=document.cookie.indexOf(nickname + "=")  17.        if (c_star

7、t!=-1)  18.        {   19.            c_start=c_start + nickname.length+1;  20.            c_end=document.cookie.indexOf(",",c_start);  21.            if (c_end==-1)   22.                c_end=document.cookie.length;