使用基于jquery的gamequery插件做JS乒乓球游戏


Posted in Javascript onJuly 31, 2011

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

<script> 
var game=function(){ 
var private={}; 
private.PLAYGROUND_WIDTH=300; 
private.PLAYGROUND_HEIGHT=400; 
private.status=-1; 
private.speed=30; 
var get=function(key){ 
return private[key]; 
} 
var set=function(key,val){ 
private[key]=val; 
} 
var playground; 
return{ 
init:function(){ 
$("#gradeinfo").remove(); 
playground=$("#playground").playground({height:get("PLAYGROUND_HEIGHT"),width:get("PLAYGROUND_WIDTH"),RefreshRate:get("speed") }); 
$('#playground').css('width', get('PLAYGROUND_WIDTH')); 
$('#playground').css('height', get('PLAYGROUND_HEIGHT')); 
$('#playground').css('position', 'relative'); 
$('#playground').css('border', '1px solid #ccc'); 
this.initBall(); 
this.initPlayer(); 
$("#sceengraph").css("visibility","visible"); 
$('#player').get(0).gameQuery.score = 0; 
var classObj = this; 
$().playground().registerCallback(function(){ 
var status = get('status'); 
if (status > 0) { 
classObj.renderBall(); 
} 
},get("speed")); 
}, 
initBall:function(){ 
$("#ball").remove(); 
playground.addSprite('ball', { animation:$.gameQuery.Animation( { imageURL:"./blank.gif" } ), width:10, height:10 }); 
$('#ball').get(0).gameQuery.velX = 4; 
$('#ball').get(0).gameQuery.velY = 4; 
$("#ball").css("top", get('PLAYGROUND_HEIGHT')-20) 
$("#ball").css("left", (get('PLAYGROUND_WIDTH')-10)/2) 
}, 
initPlayer:function(){ 
$("#player").remove(); 
playground.addSprite("player",{ animation:$.gameQuery.Animation( { imageURL:"./blank.gif" } ),width:50, height:8,posx:(get('PLAYGROUND_WIDTH')-50)/2,posy:get('PLAYGROUND_HEIGHT')-10}); 
$("#player").addClass("player"); 
}, 
renderBall:function(){ 
var ballPosition = $('#ball').position(); 
var PLAYGROUND_WIDTH = get('PLAYGROUND_WIDTH'); 
var PLAYGROUND_HEIGHT = get('PLAYGROUND_HEIGHT'); 
ballPosition.top-=$('#ball').get(0).gameQuery.velY; 
ballPosition.left+=$('#ball').get(0).gameQuery.velX; 
$('#ball').css('top', ballPosition.top); 
$('#ball').css('left', ballPosition.left); 
if (ballPosition.top <= 0) { 
$('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY; 
} 
if(ballPosition.left<=0 || ballPosition.left+$('#ball').width()>=PLAYGROUND_WIDTH){ 
$('#ball').get(0).gameQuery.velX = -$('#ball').get(0).gameQuery.velX; 
} 
$("#ball").collision("#player").each(function(){ 
$('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY; 
$('#player').get(0).gameQuery.score++; 
}); 
if(ballPosition.top+$('#ball').height() >= PLAYGROUND_HEIGHT){ 
playground.addSprite("gradeinfo",{width:100,height:80,posx:100,posy:100}); 
$("#gradeinfo").html("游戏结束!<br/>得分:"+$('#player').get(0).gameQuery.score); 
set('status', -1); 
} 
}, 
pause:function(){ 
if(get('status')==0){ 
set('status',1); 
}else{ 
set('status',0); 
} 
}, 
keyDownHandler: function(evt) { 
// console.log(evt); 
var thisObj = this; 
switch(evt.keyCode) { 
case 13: 
if (get('status') == -1) { 
this.start(); 
} else { 
this.pause(); 
} 
break; 
case 37: 
if (! this.moveStaus) { 
this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', -4); }, 20); 
} 
break; 
case 39: 
if (! this.moveStaus) { 
this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', 4); }, 20); 
} 
break; 
} 
}, 
keyUpHandler:function(evt){ 
window.clearInterval(this.moveStaus); 
this.moveStaus=null; 
}, 
movePlayer:function(player, dir){ 
if (get('status') == 1) { 
var pos = $(player).position(); 
var newPos = pos.left+dir; 
if (newPos > 0 && newPos+$(player).width() < get('PLAYGROUND_WIDTH')) { 
$(player).css('left', newPos); 
} 
} 
}, 
start:function(){ 
if (get('status') == -1) { 
set('status', 1); 
$().playground().startGame(function(){ 
$("#welcome").remove(); 
}); 
} 
} 
} 
}() 
$(function(){ 
game.init(); 
$(document).keydown(function(evt){ 
game.keyDownHandler(evt); 
}); 
$(document).keyup(function(evt){ 
game.keyUpHandler(evt); 
}); 
}); 
</script>

然后我们来开始讲解:
首先是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/ 

Javascript 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
详解Bootstrap插件
Apr 25 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 #Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 #Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 #Javascript
工作需要写的一个js拖拽组件
Jul 28 #Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 #Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 #Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 #Javascript
You might like
php三维数组去重(示例代码)
2013/11/26 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
java script编程起步(第三课)
2007/01/10 Javascript
json数据的列循环示例
2013/09/06 Javascript
jquery map方法使用示例
2014/04/23 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Django权限机制实现代码详解
2018/02/05 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
社区党总支书记先进事迹材料
2014/01/24 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python