React + Construct2
JavaScript HTML CSS
Latest commit ad8c504 Nov 10, 2016 @MarcoWorms committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
build Lint Nov 4, 2016
public Add files via upload Nov 3, 2016
src Lint Nov 4, 2016
.gitignore initial commit Nov 2, 2016
.tern-port initial commit Nov 2, 2016
README.md Update README.md Nov 10, 2016
package.json Add gh-pages Nov 4, 2016
yarn.lock Add gh-pages Nov 4, 2016

README.md

This lib is going to be split among other react libs.

The first one aims to handle global events https://github.com/pagarme/react-event-components

the second one will probably cover behaviours or gameObjects. I want react-construct to be the integration of all those libs, it will aim to be a sane way to develop games and other interactive content using react building blocks.

http://worms.io/react-construct/

app.js

import React, { Component } from 'react';
import './App.css';

import Construct, {
  GameObject, KeyDown,
  bullet, boundToWindow, fade, rotate,
} from './react-construct'

class App extends Component {
  constructor() {
    super()
    this.state = {
      playerAngle: 0
    }
  }
  render() {
    return (
      <Construct>
        <p>Try WASD</p>
        <KeyDown when="w" do={ () => this.setState({ playerAngle: 270 }) } />
        <KeyDown when="a" do={ () => this.setState({ playerAngle: 180 }) } />
        <KeyDown when="s" do={ () => this.setState({ playerAngle: 90 }) } />
        <KeyDown when="d" do={ () => this.setState({ playerAngle: 0 }) } />
        <GameObject
          initial={{ x: 100, y: 100, width: 200, height: 30 }}
          behaviours={[
            bullet({
              speed: 200,
              motionAngle: this.state.playerAngle,
              setAngle: false
            }),
            boundToWindow(),
            fade({ delay: 0, enter:1, stay: 0, leave: 1, loop: true}),
            rotate({ speed: 90 })
          ]}
          style={{ backgroundColor: 'blue', borderRadius: '8px' }}
        />
      </Construct>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

index.html

<body>
  <div id="root"></div>
</body>