使用基于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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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中变量引用与变量销毁机制分析
2014/11/15 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
Vue实现日历小插件
2019/06/26 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python字典DICT类型合并详解
2017/08/17 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
华为c/c++笔试题
2016/01/25 面试题
运动会通讯稿150字
2014/02/15 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
忠诚教育心得体会
2014/09/03 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
先进工作者个人总结
2015/02/15 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2015年环保局工作总结
2015/05/22 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL