标签:
今天给大家分享一款基于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); } } ());
via:http://www.w2bc.com/Article/14341
标签:
原文地址:http://www.cnblogs.com/liaohuolin/p/4193689.html