这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
我建议大家先学会些基础的 JS,再学 jquery,这样会更好接受些新的东西. 今天我们要试着做个 js 经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过 xna、flash、js 都做过同一款。先上张截图,不然大伙还不知道是什么东西.
现在 jquery 比较流行,用 js 做游戏的也越来越多了,虽然现在 html5 出来了,但实际上要用 html5 做点啥出来还是得靠 javascript,所以学好 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/
来源: http://www.phperz.com/article/17/0419/282883.html