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

更新時間：2011年07月31日 20:14:39 作者：

現(xiàn)在jquery比較流行，用js做游戲的也越來越多了，雖然現(xiàn)在html5出來了，但實際上要用html5做點啥出來還是得靠javascript，所以學好js是非常重要的

我建議大家先學會些基礎的JS，再學jquery，這樣會更好接受些新的東西.今天我們要試著做個js經(jīng)典游戲，打乒乓球的游戲，這款游戲大概是我做得最多次的了，我有用過xna、flash、js都做過同一款。先上張截圖，不然大伙還不知道是什么東西.

它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/
采用的技術(shù)是jquery+gamequery， jquery大家都知道是什么了，本文重點介紹下gamequery，gamequery是一款jquery插件，它的官方網(wǎng)址是:
http://gamequery.onaluf.org/ ，它的作用是為了更容易的開發(fā)JS小游戲，大家可以去它網(wǎng)站上看下，有很多案例了，包括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("游戲結(jié)束!<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,此函數(shù)定義要用于顯示游戲 div，這里定義的是300*400,第三個參數(shù)是刷新率，默認是30.

playground.addSprite就是在游戲場景里添加精靈，這款游戲主要是一個小球，一個板。就這樣，游戲算是完成一半了，然后給精靈加上速度，jquery對象的gameQuery.obj就可以了，這里寫的是$().gameQuery.velX,再然后是調(diào)用renderBall進行球運動，再監(jiān)視按鍵控制板的運動，最后就是檢測碰撞。
球與板的碰撞，球與墻面的碰撞， 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/

您可能感興趣的文章: