今天给大家分享一款基于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

基于html5和jquery的篮球跳动游戏的更多相关文章

  1. 基于 html5的 jquery 轮播插件 flickerplate

    https://github.com/chrishumboldt/Flickerplate 官网 <link href="${baseURL}/themes/default/css/f ...

  2. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  3. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  4. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  5. 基于HTML5实现的中国象棋游戏

    棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多.今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式.程序写累了,喝上一杯咖啡,和电 ...

  6. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  7. 基于HTML5实现五彩连珠小游戏

    今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...

  8. 一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  9. 基于HTML5的SLG游戏开发(序)

          2012年前后,HTML5游戏凭借跨平台.易移植.部署简单.节省成本等优点被炒的火热,经过一两年的快速发展,市场出现了一些成功地HTML5游戏产品,像磊友的<修仙三国>,神奇时 ...

随机推荐

  1. datanode无法启动问题

    在执行了hdfs namenode -format命令之后,再启动datanode发现无法启动. 查看datanode的日志发现: datanode的ClusterId和namenode的Cluste ...

  2. html5.js 让所有IE支持HTML5

    摘自: http://hi.baidu.com/skway/item/33f38a9487356b4ff14215cf?qq-pf-to=pcqq.c2c html5.js 让所有IE支持HTML5 ...

  3. 【深夜福利】Caffe 添加自己定义 Layer 及其 ProtoBuffer 參数

    在飞驰的列车上,无法入眠.外面阴雨绵绵,思绪被拉扯到天边. 翻看之前聊天,想起还欠一个读者一篇博客. 于是花了点时间整理一下之前学习 Caffe 时添加自己定义 Layer 及自己定义 ProtoBu ...

  4. [Grunt] Watch && grunt-contrib-watch

    Watch is an essential component of any Grunt build, and you will find yourself using it in almost ev ...

  5. 转自http://bbs.linuxtone.org/thread-1062-1-1.html

    详细参考:http://wiki.codemongers.com/NginxChsHttpMainModule worker_processes指明了nginx要开启的进程数,据官方说法,一般开一个就 ...

  6. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

  7. 算法笔记_043:最大连续子数组和(Java)

    目录 1 问题描述 2 解决方案 2.1 蛮力枚举法 2.2 动态规划法   1 问题描述 给定一个整数数组,数组里可能有正数.负数和零.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和 ...

  8. ssh 安装笔记

    debian 6.0 的一台32位机器,aptitude search openssh-server-x509 没结果(其他机同样源配置是有结果的),于是上内部源下载openssh-server-x5 ...

  9. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  10. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...