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

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

WBOY

Lepaskan： 2016-05-16 18:04:27

asal

1288 orang telah melayarinya

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

复制代码代码如下:

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