使用基于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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
一百多行代码实现react拖拽hooks
Mar 23 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世纪万年历
2006/12/06 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Pycharm修改python路径过程图解
2020/05/22 Python
python实现简单遗传算法
2020/09/18 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
学生党支部先进事迹
2014/02/04 职场文书
车间核算员岗位职责
2014/07/01 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
单位委托书怎么写
2014/09/21 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
高中开学感言
2015/08/01 职场文书
公司车辆维修管理制度
2015/08/05 职场文书