Skip to content

Y
yucheng_code
Commit 6f8fcd31 authored by 余成's avatar 余成
Browse files
Options

1

parent c6289fe6
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 14 deletions
1.html 0 → 100644
View file @ 6f8fcd31
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>愤怒的小鸟</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/matter-js/0.18.0/matter.js"></script>
<script src="./1.js"></script>
<script>
ab = Example.slingshot()
</script>
</body>
</html>
\ No newline at end of file
1.js 0 → 100644
View file @ 6f8fcd31
var Example = Example || {};
var ejectDistance = 3;
const HEIGHT = 446
const WIDTH = 1022
Example.slingshot = function () {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Events = Matter.Events,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 1022,
height: 446,
background: "url('assets/bg.png')",
wireframeBackground:'#fff',
wireframes: false,
showVelocity:true,
showCollitions:true
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// 地面
var ground = Bodies.rectangle(511, 444, 1022, 10, { isStatic: true }),
// 小鸟
birdOptions = { mass: 20, restitution: 0.6 },
bird = Bodies.circle(200, 350, 16, birdOptions),
anchor = { x: 200, y: 350 },
elastic = Constraint.create({
pointA: anchor,
bodyB: bird,
length: 0.01,
stiffness: 0.25,
render:{
strokeStyle:'black'
}
});
//怪物堆
var woodOptions = { mass: 2, isStatic:false, restitution:0, friction:0.4}
var rockOptions = { mass: 4, isStatic:false, restitution:0, friction:0.5}
var ironOptions = { mass: 6, isStatic:false, restitution:0, friction:0.2}
var stacks = [];
//石头1
stacks[0] = Bodies.rectangle(450, HEIGHT - 42, 30, 70, rockOptions);
stacks[1] = Bodies.rectangle(485, HEIGHT - 88, 80, 20, rockOptions);
stacks[2] = Bodies.rectangle(520, HEIGHT - 42, 30, 70, rockOptions);
//石头2
stacks[3] = Bodies.rectangle(620, HEIGHT - 58, 28, 100, rockOptions);
stacks[4] = Bodies.rectangle(650, HEIGHT - 119, 80, 20, rockOptions);
stacks[5] = Bodies.rectangle(680, HEIGHT - 58, 28, 100, rockOptions);
//石头3
stacks[6] = Bodies.rectangle(780, HEIGHT - 82, 20, 150, rockOptions);
stacks[7] = Bodies.rectangle(800, HEIGHT - 82, 20, 150, rockOptions);
stacks[8] = Bodies.rectangle(850, HEIGHT - 168, 150, 20, rockOptions);
stacks[9] = Bodies.rectangle(900, HEIGHT - 82, 20, 150, rockOptions);
stacks[10] = Bodies.rectangle(920, HEIGHT - 82, 20, 150, rockOptions);
//木头1
stacks[11] = Bodies.rectangle(570, HEIGHT - 28, 20, 40, woodOptions);
stacks[12] = Bodies.rectangle(570, HEIGHT - 58, 60, 20, woodOptions);
//木头2
stacks[13] = Bodies.rectangle(730, HEIGHT - 28, 20, 40, woodOptions);
stacks[14] = Bodies.rectangle(730, HEIGHT - 58, 60, 20, woodOptions);
//木头3
stacks[15] = Bodies.rectangle(900, HEIGHT - 194, 30, 30, woodOptions);
stacks[16] = Bodies.rectangle(840, HEIGHT - 220, 120, 10, woodOptions);
//铁块1
stacks[17] = Bodies.rectangle(485, HEIGHT - 138, 30, 80, ironOptions);
stacks[18] = Bodies.rectangle(485, HEIGHT - 194, 30, 30, ironOptions);
//铁块2
stacks[19] = Bodies.rectangle(650, HEIGHT - 170, 30, 80, ironOptions);
stacks[20] = Bodies.rectangle(570, HEIGHT - 220, 220, 20, ironOptions);
//猪头1
stacks[21] = Bodies.circle(570, 358, 20, ironOptions)
//猪头2
stacks[22] = Bodies.circle(730, 362, 16, ironOptions)
//猪头3
stacks[23] = Bodies.circle(570, 196, 20, ironOptions)
World.add(engine.world, [ground, bird, ...stacks, elastic]);
// 每帧更新后
Events.on(engine, 'afterUpdate', function () {
if (mouseConstraint.mouse.button === -1 && (bird.position.x > (200 + ejectDistance) || bird.position.y < (350 - ejectDistance))) {
bird = Bodies.circle(200, 350, 16, birdOptions);
World.add(engine.world, bird);
elastic.bodyB = bird;
}
});
//鼠标约束
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 1022, y: 446 }
});
// context for MatterTools.Demo
return {
engine: engine,
runner: runner,
render: render,
canvas: render.canvas,
stop: function () {
Matter.Render.stop(render);
Matter.Runner.stop(runner);
}
};
};
\ No newline at end of file
config/webpack.common.config.js
View file @ 6f8fcd31
...@@ -192,6 +192,9 @@ module.exports = function (isProd) { ...@@ -192,6 +192,9 @@ module.exports = function (isProd) {
name: (entrypoint) => `runtime-${entrypoint.name}`, name: (entrypoint) => `runtime-${entrypoint.name}`,
}, },
}, },
externals: {
matter: 'Matter'
}
}; };
......
public/index.html
View file @ 6f8fcd31
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2043.min.js" crossorigin="anonymous"></script> <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2043.min.js" crossorigin="anonymous"></script>
<script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script> <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/matter-js/0.18.0/matter.js"></script>
<script> <script>
function getApp() { function getApp() {
return { return {
...@@ -32,9 +33,9 @@ ...@@ -32,9 +33,9 @@
} }
CFG.appID = '${APPID}'; CFG.appID = '${APPID}';
if (!getUrlParam("appID")) { // if (!getUrlParam("appID")) {
alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。") // alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
} // }
</script> </script>
</head> </head>
......
src/pages/canvasScene/canvasScene.jsx
View file @ 6f8fcd31
...@@ -8,6 +8,8 @@ import './canvasScene.less'; ...@@ -8,6 +8,8 @@ import './canvasScene.less';
import { GDiapatcher } from './GDiapatcher.js'; import { GDiapatcher } from './GDiapatcher.js';
import matter,{ Engine,Runner,Render,Events,Mouse,World,Composite } from 'matter'
import { RES_PATH } from '../../../sparkrc'; import { RES_PATH } from '../../../sparkrc';
//引擎sdk <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2014.min2d.js" crossorigin="anonymous"></script> //引擎sdk <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2014.min2d.js" crossorigin="anonymous"></script>
export default class CanvasScene extends Component { export default class CanvasScene extends Component {
...@@ -18,12 +20,25 @@ export default class CanvasScene extends Component { ...@@ -18,12 +20,25 @@ export default class CanvasScene extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.canvasRef = React.createRef(); this.canvasRef = React.createRef();
this.state = {
}
} }
componentDidMount() { componentDidMount() {
// this.props.onRef(this); // 初始化fyge
this.initFyge()
// 初始化物理引擎
this.initMatter()
//循环 更新帧
const self = this;
(function loop() {
FYGE.Tween.flush()
self.stage.flush();
self.requestID = window.requestAnimationFrame(loop);
})()
}
/**
* 初始化fyge
*/
initFyge() {
var canvas = this.canvasRef.current; var canvas = this.canvasRef.current;
//canvas画布实际尺寸， //canvas画布实际尺寸，
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1) canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
...@@ -47,14 +62,39 @@ export default class CanvasScene extends Component { ...@@ -47,14 +62,39 @@ export default class CanvasScene extends Component {
stage.addEventListener(FYGE.Event.INIT_STAGE, this.initScene, this) stage.addEventListener(FYGE.Event.INIT_STAGE, this.initScene, this)
//挂舞台指向 //挂舞台指向
this.stage = stage; this.stage = stage;
//循环
const self = this;
(function loop() {
FYGE.Tween.flush()
stage.flush();
self.requestID = window.requestAnimationFrame(loop);
})()
} }
/**
* 初始化物理引擎
*/
initMatter() {
console.log('matter-js',matter)
// 创建引擎
var engine = this.engine = Engine.create()
// 设置重力
this.engine.gravity.y = 2
this.engine.gravity.x = 0.0
// 引擎内通过物理合成器已经创建了 世界
this.world = engine.world;
// 拿到物理合成器
this.composite = Composite
// 将引擎创建的世界加入合成器内
this.composite.add(this.world, [])
// 每帧更新后
Events.on(engine, 'afterUpdate', function () {
console.log('每帧更新后')
});
}
update() {
Engine.update(this.engine, 1000 / 60)
super.update()
}
async initScene() { async initScene() {
var stage = this.stage; var stage = this.stage;
//添加个背景矢量图 //添加个背景矢量图
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment