DIV CSS 佈局教程網

我建議大家先學會些基礎的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>
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/