阅读更多

2顶
0踩

Web前端

原创新闻 充满想象力的 JavaScript 物理和重力实验

2014-12-03 10:27 by 见习记者 webgeeker 评论(0) 有6311人浏览

在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大。几年前,所有这些实验都必须使用 Java 或 Flash 才能做。在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是使用 JavaScript 做出来的。

 

Cloth

布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

 

 

在线演示   /   源码下载

 

Ball Pool 

Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。

 

 

在线演示    /  源码下载

 

Verlet JS

Verlet-js 是一个简单的集成 Verlet 的物理引擎,基于 JavaScript 编写,作者是 Sub Protocol。粒子系统、距离限制、角度限制等,Verlet-js 都能支持,基于这些基础,它可以帮助你构建几乎任何你能想象到的任何东西。

 

在线演示    /  源码下载

 

HTML5 Blob

惊艳的 Canvas 水滴效果,双击可以把水滴分离;拖放到一起可以融合;晃动浏览器可以让水滴跳动;键盘左右键可以切换皮肤;上下键可以变换大小。

 

 

在线演示   /   源码下载

 

Canvas Cloth

下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果。

 

 

在线演示    /  源码下载

 

WebGL Cloud

使用 HTML5 WebGL 实现超逼真的云朵效果。通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

 

 

在线演示    /  源码下载

 

Crazy Tentacles

这个示例叫疯狂的触手,移动鼠标可以进行涂鸦,点击鼠标可以清除画布。

 

 

在线演示   /   源码下载

 

Surface

使用 WebGL 实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。

 

 

在线演示   /   源码下载

 

Fractal Trees

分形理论作为一个新兴的数学分支,是对经典几何学的延伸,借助于计算机辅助手段,分形理论实现了理论与实践的紧密结合。

 

 

在线演示   /   源码下载

 

来自: 梦想天空
2
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 9个充满想象力的 JavaScript 物理和重力实验

    在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大。几年前,所有这些实验都必须使用 Java 或 Flash 才能做。在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是...

  • three.js学习笔记(十)——物理引擎

    我们可以利用数学函数和一些解决方案来实现自己的物理效果,但是如果需求更加真实的物理效果,像是物体张力、摩擦力、拉伸、反弹等真实物理效果,最好使用外部库 原理 我们会创建一个Three.js世界和一个Physics物理...

  • 游戏开发中的物理介绍

    游戏开发中的物理介绍碰撞对象物理过程回调碰撞层和蒙版GUI示例代码示例Area2DStaticBody2DRigidBody2DKinematicBody2D 在游戏开发中,您通常需要知道游戏中的两个对象何时相交或接触。这就是所谓的碰撞检测。当检测...

  • JS物理引擎p2.js中文文档

    JS物理引擎 p2.js 的中文版WIKI。物理引擎p2.js多用于开发HTML5游戏,国内Egret白鹭引擎使用p2.js物理引擎。

  • JavaScript实现运动函数的封装(抛物)

    当今的生活质量越来越高,人们对于自身的身体素质也更加重视。对于运动的热情,逐渐高涨起来。 ... 提到抛物运动,回想起高中物理,是不是大家对于打篮球就充满了‘自信’。手抬高,一扔,进了...

  • web物理引擎p2.js入门手册

    最近在学egret游戏引擎,他们推荐的第三方物理引擎库是p2.js,瑞士的一个杀马特开发的,中文资料很少,于是我就把他github项目的wiki给翻译出来了,这里是项目地址:https://github.com/schteppe/p2.js/wiki六个月前...

  • 【一统江湖的大前端(8)】matter.js 经典物理

    【一统江湖的大前端(8)】matter.js 经典物理 我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1!!!精选30+JavaScript库,从使用方式,设计原则,原理源码...

  • 使用box2dweb做一个下落的小球,宝宝玩的不亦乐乎

    家里的宝宝就喜欢玩球球,特别是蓝色的,而最近正好找到了一个优秀的物理引擎,就拿它来做了一个下落的小球...肯定有一个好的引擎可以直接拿来用,然后就发现了 `Box2D` 这个物理引擎,不但带有重力系统,还支持碰撞...

  • HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分

    最近想学习Javascript版本的Box2D JS物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,API还引导向了FLASH AS3脚本。 我要的是能在H5页面上跑的javascript版本的教程啊!!! ...

  • Popmotion简介:指针与物理

    在第1部分中,我们发现了如何使用补间和关键帧制作精确的时间表动画。 在第2部分中,我们将研究指针跟踪和基于速度的动画。 指针跟踪使我们能够创建可滚动的产品货架,自定义值滑块或拖放界面。 基于速度的...

  • JavaScript 编程精解 中文第三版 十六、项目:平台游戏

    十六、项目:平台游戏 原文:Project: A Platform Game ... 部分参考了《JavaScript 编程精解(第 2 版)》 所有现实都是游戏。 Iain Banks,《The Player of Games》 我最初对电脑的痴迷,就像许多小...

  • 好奇!仅 13kB 大小的游戏,源码长啥样?

    事实证明是我的无知限制了我的想象力,这些 13kB 的游戏并没有我想的那么简陋和无聊。它们不仅有丰富的图像,还有音乐、物理、重力系统,包含射击、益智、技巧等不同的类别玩法多样,令我眼前一亮! 下面我就整理出...

  • 13KB的代码能做什么?有些人可是弄出了一个完整的游戏!

    网上常看到有人说 贫穷限制了我的想象力,TJ君只想说技术限制了我的想象力。。。 毕竟自己做不到不代表别人做不到,对吧?像这样只有13KB大小却能好好玩一番的游戏不止这一个,小伙伴们肯定要奇怪了,怎么大伙都说...

  • cannon.js_如何使用Cannon.js和Three.js创建基于物理的3D布

    在之前的实验中,我向您展示了如何构建基于3D物理的菜单,现在让我们看一下如何使用Cannon.js和Three.js将图像转换为布状材料,并使其被风扭曲。 。 In this tutorial, we’ll assume that you’re comfortable ...

  • 【华为云技术分享】【一统江湖的大前端(8)】matter.js 经典物理

    【摘要】 介绍前端物理引擎matterjs基本使用及实战 示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题,它通常都是作为游戏开发引擎的附属工具而出现的,...

  • Egret中使用P2物理引擎

    游戏中的对象按照物理规律移动,体现重力、引力、反作用力、加速度等物体特性,实现自由落体、摇摆运动、抛物线运动,以及物理碰撞现象的模拟。用于模拟物理碰撞、物理运动的引擎称为物理引擎。  来自瑞典...

  • 十分钟打造 3D 物理世界

    前言在繁忙的业务中,为了缩短设计和开发的周期,我们的 H5 小游戏更多的会采用 2D 的视觉风格,但总是一个风格是很无趣的,所以最近搞了一个 3D 物理游戏的需求,在开发的过程中遇到了不少问题,希望通过这篇文章将...

  • Python项目-自动办公-59 PPT_pptx_在PPT中写入图片和表格.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

  • Python项目-实例-20 快递查询.zip

    Python课程设计,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。

Global site tag (gtag.js) - Google Analytics