使用基于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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
手机端转换rem适应
Apr 01 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
js闭包学习心得总结
Apr 17 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
前端JavaScript大管家 package.json
Nov 02 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
layer弹出层全屏及关闭方法
2018/08/17 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
学习python的几条建议分享
2013/02/10 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python提取字典key列表的方法
2015/07/11 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
中等生评语大全
2014/05/04 职场文书
专家推荐信模板
2014/05/09 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android