android 小鸡走动动画,使用Matter.js实现的小鸡掉落动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var chickenContainer = document.getElementById('chicken-container');
// Matter module aliases
var Engine = Matter.Engine,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint;
// window height and width
var width = $(window).width();
var height = $(window).height();
// create a Matter.js engine
var engine = Engine.create(chickenContainer, {
render: {
options: {
showAngleIndicator: false,
wireframes: false,
background: 'transparent',
width: width,
height: height
}
}
});
// add a mouse controlled constraint
var mouseConstraint = MouseConstraint.create(engine, {
constraint: {
render: {
visible: false
}
}
});
World.add(engine.world, mouseConstraint);
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
};
engine.world.bodies = [];
// these static walls will not be rendered in this sprites example, see options
World.add(engine.world, [
Bodies.rectangle(width / 2, height - offset, width, offset, options), // bottom
Bodies.rectangle(width, height / 2, offset, height, options), //right
Bodies.rectangle(0, height / 2, offset, height, options), //left
Bodies.rectangle(0, -300, width, 15, { isStatic: true, render: {visible: true}, angle: Math.PI * 0.2 }),
Bodies.rectangle((width / 10) * 10, -300, width, 15, { isStatic: true, render: {visible: true}, angle: Math.PI * -0.2 })
]);
var stack = Composites.stack(350, 40, 5, 20, 20, 20, function(x, y, column, row) {
return Bodies.circle(x, y, Common.random(25, 25), {
restitution: 0.55,
render: {
sprite: {
texture: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/180245/hen.svg'
}
},
position: {
y: -250
}
});
});
World.add(engine.world, stack);
var renderOptions = engine.render.options;
// run the engine
Engine.run(engine);
// function cluck() {
// //clucking
// var videoPlayer = document.getElementById("clucking");
// videoPlayer.load().play;
// }
// var mickey = Composites.stack(350, 2, 1, 1, 20, 20, function(x, y, column, row) {
// return Bodies.rectangle(x, y, 220, 120, {
// restitution: 0.9,
// render: {
// sprite: {
// texture: 'https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png'
// }
// }
// });
// });
// World.add(engine.world, mickey);
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint;
var width = 800;
var height = 600
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
background: 'transparent',
wireframes: false,
showShadows: true
}
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
};
engine.world.bodies = [];
// these static walls will not be rendered in this sprites example, see options
World.add(engine.world, [
Bodies.rectangle(width / 2, height - offset, width, offset, options)
]);
var stack = Composites.stack(350, 40, 5, 20, 20, 20, function(x, y, column, row) {
return Bodies.circle(x, y, Common.random(25, 25), {
restitution: 0.55,
render: {
sprite: {
texture: '/uploads/161001/hen.svg'
}
},
position: {
y: -250
}
});
});
World.add(engine.world, stack);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
android 小鸡走动动画,使用Matter.js实现的小鸡掉落动画相关推荐
- 3dsmax 长动画导入 three.js 转变成 多个动画
3dsmax biped长动画导入 three.js 转变成 多个动 文章目录 3dsmax biped长动画导入 three.js 转变成 多个动 导出长动画 动画切割 导出长动画
- html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示 代码结构 1. 引入JS 2. HTML代码 varying v ...
- 物体掉落动画效果css html,CSS3 弹性圆球掉落动画(带挤压变形效果)
CSS 语言: CSSSCSS 确定 .load_block { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bac ...
- 粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
- 使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
前言 最近有一款"合成大西瓜"的小游戏有点火,试玩了一下,玩法比较简单,实现难度也不大,所以参照游戏原型自己实现了一下,游戏开发主要使用了 Phaser 游戏框架,本文主要分享游戏 ...
- 【一统江湖的大前端(8)】matter.js 经典物理
[一统江湖的大前端(8)]matter.js 经典物理 我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1! ...
- 【华为云技术分享】【一统江湖的大前端(8)】matter.js 经典物理
[摘要] 介绍前端物理引擎matterjs基本使用及实战 示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题 ...
- 物理世界的互动之旅:Matter.js入门指南
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 本文简介 戴尬猴,我是德育处主任 欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
最新文章
- ffmpeg封装h264裸流为mp4文件,视频播放速度特别慢-解决
- 【PAT (Advanced Level) Practice】1050 String Subtraction (20 分)
- 中断服务子程序(ISR)
- std::reserves使用
- Windows live writer插入代码图片Test
- 第十四篇 元类编程(二)
- 从 5G 到智能革命,这篇文章值得一看
- 计算机毕设 ai_2020年计算机人工智能方向保研经历分享(南大,复旦,中科院计算所)...
- 大整数的代数运算_高等代数教学笔记2:多项式I
- vs2010 sp1安装失败进而回滚的解决方法(本人已解决)
- 浏览器兼容IE内核插件-IE TAB 安装
- android打开cad文件怎么打开方式,dwg文件怎么打开_手机上dwg文件用什么程序可以打开...
- excel公式识别html,POI/Excel/HTML单元格公式问题
- Mc1.16forge官混教程/教补-#6 原版配方数据包
- html灯箱效果代码,WordPress纯代码实现图片灯箱lightbox效果
- 解决Latex编译报错 Font shape `TU/ptm/b/n‘ undefined (Font) using ‘TU/ptm/bx/n‘ instead
- Instagram帖子类型及标题撰写技巧
- From double Click to Main: PAL initialization
- h5故障代码_格力变频空调显示故障代码“H5”维修方法与流程
- DHCP的原理与配置
热门文章
- u盘连接计算机找不到,重装系统后U盘插入电脑怎么没反应?找不到U盘盘符解决办法...
- 计算机系大二学期计划范文,大二学期学习计划范文6篇
- 公司内局域网访问接口
- 微信“15。。。。。”背后的故事
- 我得了一种很奇怪的病...
- v-loam源码阅读(一)视觉特征
- twitter全自动发推_如何阻止Twitter视频自动播放
- Java基础面试题精选汇总,备战面试突破篇--直击offer
- adb命令:WIFI连接设备
- 哪个牌子的儿童护眼灯好?分享315护眼灯合格名单的护眼台灯