我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna、flash、js都做过同一款。先上张截图,不然大伙还不知道是什么东西. 【WEB前端开发】使用基于jquery的gamequery插件做JS乒乓球游戏_jquery
它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/
采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquery插件,它的官方网址是:
http://gamequery.onaluf.org/ ,它的作用是为了更容易的开发JS小游戏,大家可以去它网站上看下,有很多案例了,包括JS版的拳皇。
语言组织能力有点差,就不多说了,上代码吧!
复制代码 代码如下:


然后我们来开始讲解:
首先是playground,此函数定义要用于显示游戏 div,这里定义的是300*400,第三个参数是刷新率,默认是30.


playground.addSprite就是在游戏场景里添加精灵,这款游戏主要是一个小球,一个板。就这样,游戏算是完成一半了,然后给精灵加上速度,jquery对象的gameQuery.obj就可以了,这里写的是$().gameQuery.velX,再然后是调用renderBall进行球运动,再监视按键控制板的运动,最后就是检测碰撞。
球与板的碰撞,球与墙面的碰撞, gamequery提供有一个方法来检测,collision(filter),如:

复制代码 代码如下:
$("#ball").collision("#player").each(function(){
$('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY;
$('#player').get(0).gameQuery.score++;
});

这里碰撞后就改变了Y轴的方向.


http://gamequery.onaluf.org/api.php
在这里,可以看到它的API,基本上游戏该有的它都有了,看下例子就明白了,是不是很简单?由于这东西是几年前做的,我也讲不清楚了,有兴趣的可以研究下。这里还有教程:http://gamequery.onaluf.org/tutorials/1/