使用gamequery做JS游戏(乒乓球游戏)

现在jquery比较流行，用js做游戏的也越来越多了，虽然现在html5出来了，但实际上要用html5做点啥出来还是得靠javascript，所以学好js是非常重要的。我建议大家先学会些基础的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"),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" } ), 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" } ),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",{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/