使用基于jquery的gamequery插件做JS乒乓球游戏_jquery
程序员文章站
2022-06-06 19:34:28
...
我建议大家先学会些基础的JS，再学jquery，这样会更好接受些新的东西.今天我们要试着做个js经典游戏，打乒乓球的游戏，这款游戏大概是我做得最多次的了，我有用过xna、flash、js都做过同一款。先上张截图，不然大伙还不知道是什么东西. 
它的演示地址是: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/
它的演示地址是: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/