使用JavaScript实现网页版Pongo设计思路及源代码分享

首页

web前端

js教程

使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:44 PM

javascript

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

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

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

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

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

第二天醒来因为周末没事就花了些时间设计了下界面，同时不幸自己测出了一些比较严重的bug，最后又花了些时间给改掉了。

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

2.游戏试玩网址：

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

github开源(欢迎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为排行榜)

使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧

图1

使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧

图2

使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧

图3

使用JavaScript实现网页版Pongo设计思路及源代码分享_javascript技巧

9.游戏JavaScript部分源代码：

复制代码代码如下:

///////////////////////////////////////////
tapme();
var timer;
function startgame(){//开始游戏

    if(ifingame==0)
    {
        ifingame=1;
        grade=0;
        var xx=Math.floor(Math.random()*8);
        /*      switch(xx)
        {
            case 0:
   smallcircle.direction=gamedirection.shang;
   break;
   case 1:
   smallcircle.direction=gamedirection.xia;
   break;
   case 2:
   smallcircle.direction=gamedirection.zuo;
   break;
   case 3:
   smallcircle.direction=gamedirection.you;
   break;
   case 4:
   smallcircle.direction=gamedirection.zuoshang;
   break;
   case 5:
   smallcircle.direction=gamedirection.zuoxia;
   break;
   case 6:
   smallcircle.direction=gamedirection.youshang;
   break;
   case 7:
   smallcircle.direction=gamedirection.youxia;
   break;
   default:
   break;
        }*/
    smallcircle.direction=gamedirection.xia;
smallcircle.x=smallcircle.y=0;
line.start=Math.PI/2-Math.PI/26;
line.end=Math.PI/2+Math.PI/26;
line.direction=gamedirection.anticlock;

clearInterval(timer);
timer=setInterval(movetest,10);
    }
}//开始游戏 startgame()
    function opentop()
    {
        window.location="http://pongotop.sinaapp.com";
    }

10.写在最后

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn