Skip to content
This repository was archived by the owner on Feb 7, 2024. It is now read-only.

Commit 68b1860

Browse files
kenwheelerkenwheeler
committed
preso
1 parent 151cdfe commit 68b1860

25 files changed

+339
-142
lines changed

‎demo/character.js‎ renamed to ‎demo/game/character.js‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Matter from 'matter-js';
66
import {
77
Body,
88
Sprite,
9-
} from '../src';
9+
} from '../../src';
1010

1111
const gamepad = new Gamepad();
1212

@@ -15,6 +15,7 @@ export default class Character extends Component {
1515

1616
static propTypes = {
1717
keys: PropTypes.object,
18+
onEnterBuilding: PropTypes.func,
1819
store: PropTypes.object,
1920
};
2021

@@ -35,7 +36,26 @@ export default class Character extends Component {
3536
{ x: 0, y: -0.15 },
3637
);
3738
Matter.Body.set(body, 'friction', 0);
38-
}
39+
};
40+
41+
enterBuilding = (body) => {
42+
let doorIndex = null;
43+
44+
const doorPositions = [...Array(6).keys()].map((a) => {
45+
return [(512 * a) + 224, (512 * a) + 288];
46+
});
47+
48+
doorPositions.forEach((dp, di) => {
49+
if (body.position.x + 64 > dp[0] && body.position.x + 64 < dp[1]) {
50+
doorIndex = di;
51+
}
52+
});
53+
54+
if (doorIndex !== null) {
55+
Matter.Events.off(this.context.engine, 'afterUpdate', this.update);
56+
this.props.onEnterBuilding(doorIndex);
57+
}
58+
};
3959

4060
update = () => {
4161
const { keys, store } = this.props;
@@ -44,14 +64,14 @@ export default class Character extends Component {
4464
const midPoint = Math.abs(store.stageX) + 448;
4565

4666
const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
47-
const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -1024;
67+
const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -2048;
4868

49-
if (body.velocity.y === 0) {
69+
if (body.velocity.y === 0 || body.velocity.y < -100) {
5070
this.isJumping = false;
5171
Matter.Body.set(body, 'friction', 1);
5272
}
5373

54-
if (keys && !this.isJumping) {
74+
if (!this.isJumping) {
5575

5676
let characterState = 2;
5777

@@ -61,6 +81,10 @@ export default class Character extends Component {
6181
this.jump(body);
6282
}
6383

84+
if (keys.isDown(keys.UP) || gamepad.button(0, 'button 12')) {
85+
this.enterBuilding(body);
86+
}
87+
6488
if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
6589
if (shouldMoveStageLeft) {
6690
store.setStageX(store.stageX + 5);
@@ -128,10 +152,12 @@ export default class Character extends Component {
128152
}
129153

130154
render() {
155+
const x = this.props.store.characterPosition.x;
156+
131157
return (
132158
<div style={this.getWrapperStyles()}>
133159
<Body args={[
134-
0, 384, 64, 64, { inertia: Infinity, restitution: 0, friction: 1, frictionStatic: 0 }]
160+
x, 384, 64, 64, { inertia: Infinity, restitution: 0, friction: 1, frictionStatic: 0 }]
135161
}
136162
ref={(b) => { this.body = b; }}
137163
>

‎demo/game/fade.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { PropTypes } from 'react';
2+
3+
const Fade = (props) => (
4+
<div
5+
className={`fade ${props.visible && 'active'}`}
6+
/>
7+
);
8+
9+
Fade.propTypes = {
10+
visible: PropTypes.bool,
11+
};
12+
13+
Fade.defaultProps = {
14+
visible: true,
15+
};
16+
17+
export default Fade;

‎demo/demo.js‎ renamed to ‎demo/game/index.js‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
import React, { Component } from 'react';
2+
import Matter from 'matter-js';
23

34
import {
45
Loop,
56
Stage,
67
KeyListener,
78
World,
8-
} from '../src';
9+
} from '../../src';
910

1011
import Character from './character';
1112
import Level from './level';
12-
import GameStore from './stores/game-store';
13-
14-
import './index.css';
13+
import Fade from './fade';
1514

16-
import Matter from 'matter-js';
15+
import GameStore from './stores/game-store';
1716

18-
export default class Demo extends Component {
17+
export default class Game extends Component {
1918

2019
physicsInit = (engine) => {
2120
const ground = Matter.Bodies.rectangle(
22-
448 * 2, 448,
23-
1024 * 2, 64,
21+
512 * 3, 448,
22+
1024 * 3, 64,
2423
{
2524
isStatic: true,
2625
},
@@ -35,7 +34,7 @@ export default class Demo extends Component {
3534
);
3635

3736
const rightWall = Matter.Bodies.rectangle(
38-
1984, 288,
37+
3008, 288,
3938
64, 576,
4039
{
4140
isStatic: true,
@@ -46,37 +45,57 @@ export default class Demo extends Component {
4645
Matter.World.addBody(engine.world, leftWall);
4746
Matter.World.addBody(engine.world, rightWall);
4847
}
48+
49+
handleEnterBuilding = () => {
50+
this.setState({
51+
fade: true,
52+
});
53+
}
54+
4955
constructor(props) {
5056
super(props);
5157

58+
this.state = {
59+
fade: true,
60+
};
5261
this.keyListener = new KeyListener();
5362
}
63+
5464
componentDidMount() {
65+
this.setState({
66+
fade: false,
67+
});
68+
5569
this.keyListener.subscribe([
5670
this.keyListener.LEFT,
5771
this.keyListener.RIGHT,
72+
this.keyListener.UP,
5873
this.keyListener.SPACE,
5974
]);
6075
}
76+
6177
componentWillUnmount() {
6278
this.keyListener.unsubscribe();
6379
}
80+
6481
render() {
6582
return (
6683
<Loop>
67-
<Stage>
84+
<Stage style={{ background: '#3a9bdc' }}>
6885
<World
6986
onInit={this.physicsInit}
7087
>
7188
<Level
7289
store={GameStore}
7390
/>
7491
<Character
92+
onEnterBuilding={this.handleEnterBuilding}
7593
store={GameStore}
7694
keys={this.keyListener}
7795
/>
7896
</World>
7997
</Stage>
98+
<Fade visible={this.state.fade} />
8099
</Loop>
81100
);
82101
}

‎demo/game/level.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { autorun } from 'mobx';
3+
4+
import {
5+
TileMap,
6+
} from '../../src';
7+
8+
import GameStore from './stores/game-store';
9+
10+
export default class Level extends Component {
11+
12+
static contextTypes = {
13+
scale: PropTypes.number,
14+
};
15+
16+
constructor(props) {
17+
super(props);
18+
19+
this.state = {
20+
stageX: 0,
21+
};
22+
}
23+
24+
componentDidMount() {
25+
this.cameraWatcher = autorun(() => {
26+
const targetX = Math.round(GameStore.stageX * this.context.scale);
27+
this.setState({
28+
stageX: targetX,
29+
});
30+
});
31+
}
32+
33+
componentWillReceiveProps(nextProps, nextContext) {
34+
const targetX = Math.round(GameStore.stageX * nextContext.scale);
35+
this.setState({
36+
stageX: targetX,
37+
});
38+
}
39+
40+
componentWillUnmount() {
41+
this.cameraWatcher();
42+
}
43+
44+
getWrapperStyles() {
45+
return {
46+
position: 'absolute',
47+
transform: `translate(${this.state.stageX}px, 0px) translateZ(0)`,
48+
transformOrigin: 'top left',
49+
};
50+
}
51+
52+
render() {
53+
return (
54+
<div style={this.getWrapperStyles()}>
55+
<TileMap
56+
style={{ top: Math.floor(64 * this.context.scale) }}
57+
src="assets/boardwalktile.png"
58+
tileSize={128}
59+
columns={24}
60+
rows={4}
61+
layers={[
62+
[
63+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
64+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
65+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
66+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
67+
],
68+
]}
69+
/>
70+
<TileMap
71+
style={{ top: Math.floor(-63 * this.context.scale) }}
72+
src="assets/buildings.png"
73+
rows={1}
74+
columns={6}
75+
tileSize={512}
76+
layers={[
77+
[1, 2, 3, 4, 5, 6],
78+
]}
79+
/>
80+
</div>
81+
);
82+
}
83+
}

‎demo/stores/game-store.js‎ renamed to ‎demo/game/stores/game-store.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ class GameStore {
1212
setStageX(x) {
1313
if (x > 0) {
1414
this.stageX = 0;
15-
} else if (x < -1024) {
16-
this.stageX = -1024;
15+
} else if (x < -2048) {
16+
this.stageX = -2048;
1717
} else {
1818
this.stageX = x;
1919
}

‎demo/index.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎demo/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import Demo from './demo';
3+
import Presentation from './presentation';
44

55
ReactDOM.render(
6-
<Demo />,
6+
<Presentation />,
77
document.getElementById('root')
88
);

‎demo/intro.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
import Gamepad from 'html5-gamepad';
4+
5+
const gamepad = new Gamepad();
6+
7+
export default class Intro extends Component {
8+
static propTypes = {
9+
onStart: PropTypes.func,
10+
};
11+
12+
startUpdate = () => {
13+
gamepad.update();
14+
if (gamepad.button(0, 'left stick')) {
15+
this.props.onStart();
16+
return;
17+
}
18+
this.animationFrame = requestAnimationFrame(this.startUpdate);
19+
}
20+
21+
handleKeyPress = (e) => {
22+
if (e.keyCode === 13) {
23+
this.props.onStart();
24+
}
25+
}
26+
27+
constructor(props) {
28+
super(props);
29+
30+
this.state = {
31+
blink: false,
32+
};
33+
}
34+
35+
componentDidMount() {
36+
window.addEventListener('keypress', this.handleKeyPress);
37+
this.animationFrame = requestAnimationFrame(this.startUpdate);
38+
this.interval = setInterval(() => {
39+
this.setState({
40+
blink: !this.state.blink,
41+
});
42+
}, 500);
43+
}
44+
45+
componentWillUnmount() {
46+
window.removeEventListener('keypress', this.handleKeyPress);
47+
cancelAnimationFrame(this.animationFrame);
48+
clearInterval(this.interval);
49+
}
50+
51+
render() {
52+
return (
53+
<div>
54+
<img className="intro" src="assets/intro.png"/>
55+
<p
56+
className="start"
57+
style={{ display: this.state.blink ? 'block' : 'none' }}
58+
>
59+
Press Start
60+
</p>
61+
</div>
62+
);
63+
}
64+
}

0 commit comments

Comments
 (0)