基于html5和jquery的篮球跳动游戏

浏览数：33 / 时间：2015年06月09日

今天给大家分享一款基于html5和jquery的篮球跳动游戏。这款实例和之前分享的 HTML5重力感应小球冲撞动画类似。用鼠标拖动篮球，篮球在页面上跳动，可在演示中看下效果。效果图如下：

技术分享

实现的代码。

这个实例主要是js代码。js需要引用jquery和Phaser.js这两个库。页面上的js代码如下：

 (function () {
            var w = window.innerWidth;
            var h = window.innerHeight;
            var game = new Phaser.Game(w, h, Phaser.CANVAS, ‘‘, {
                preload: preload,
                create: create,
                update: update
            });
            var totalBalls = 8;
            var balls, ballStartX, ballStartY, ballEndX, ballEndY;
            function random(min, max) {
                return game.rnd.integerInRange(min, max);
            }
            function preload() {
                game.load.image(‘basketball‘, ‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/basketball.png‘);
            }
            function create() {
                game.physics.startSystem(Phaser.Physics.ARCADE);
                game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
                balls = game.add.group();
                for (var i = 0; i < totalBalls; i++) {
                    setTimeout(function () {
                        var ball = balls.create(random(0, game.world.width), -100, ‘basketball‘);
                        game.physics.arcade.enable(ball);
                        ball.scale.setTo(0.2, 0.2);
                        ball.body.velocity.x = random(-50, 50);
                        ball.body.gravity.y = 1000;
                        ball.body.bounce.y = 0.5;
                        ball.body.bounce.x = 0.5;
                        ball.body.collideWorldBounds = true;
                        ball.inputEnabled = true;
                        ball.input.enableDrag(true);
                        ball.input.start(0, true);
                        ball.events.onDragStart.add(grab, ball);
                        ball.events.onDragStop.add(toss, ball);
                    }, 200 * i);
                }
            }
            function update() {
                for (var i = 0; i < balls.length; i++) {
                    var thisBall = balls.getAt(i);
                    var vX = thisBall.body.velocity.x;
                    var vY = thisBall.body.velocity.y;
                    if (thisBall.body.bottom === game.world.bounds.bottom) {
                        if (thisBall.body.velocity.x > 0) {
                            thisBall.body.velocity.x = vX - 1;
                        } else if (thisBall.body.velocity.x < 0) {
                            thisBall.body.velocity.x = vX + 1;
                        }
                    }
                }
            }
            function grab() {
                ballStartX = this.body.position.x;
                ballStartY = this.body.position.y;
                this.body.moves = false;
                this.body.velocity.setTo(0, 0);
                this.body.allowGravity = false;
            }
            function toss() {
                ballEndX = this.body.position.x;
                ballEndY = this.body.position.y;
                this.body.moves = true;
                this.body.allowGravity = true;
                var vX = (ballEndX - ballStartX) * 10;
                var vY = (ballEndY - ballStartY) * 10;
                this.body.velocity.setTo(vX, vY);
            }
        } ());