first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

.flowconfig

@@ -0,0 +1,10 @@
+[ignore]
+.*/node_modules/.*
+
+[include]
+
+[libs]
+
+[options]
+emoji=true
+module.system=haste

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+*~
+*.log
+*.js.meta
+node_modules/
+build/

README.md

@@ -0,0 +1 @@
+# VR_Avoid_Game

__tests__/index-test.js

@@ -0,0 +1,13 @@
+import 'react-native';
+import 'react-vr';
+import React from 'react';
+import Index from '../index.vr.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

components/BoxObject.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { asset, Box, View, Animated, Sound, Text } from 'react-vr';
+
+export default class BoxObject extends React.Component {
+
+  render() {
+    return (
+      <Animated.View
+        style={{
+          layoutOrigin: [2.5, 2.5],
+          transform: [
+            { translate: [this.props.boxX, 1, 0] },
+            { translateZ: this.props.boxZ }
+          ]
+        }}
+      >
+        <Box
+          texture={asset('box_texture.jpg')}
+          dimWidth={5}
+          dimDepth={5}
+          dimHeight={5}
+        >
+          {
+            this.props.collisionSound ?
+              <Sound
+                source={asset('collision.mp3')}
+                volume={3}
+              />
+              :
+              <View></View>
+          }
+        </Box>
+      </Animated.View>
+    );
+  }
+}
+

components/CountDownObject.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text } from 'react-vr';
+
+export default class CountDownObject extends React.Component {
+  render() {
+    return (
+      <View>
+        {
+          this.props.startCount <= 0 ?
+            <View></View>
+            :
+            <Text
+              style={{
+                position: 'absolute',
+                color: '#FD9727',
+                fontSize: 0.8,
+                fontWeight: 300,
+                layoutOrigin: [0.5, 0.5],
+                paddingLeft: 0.2,
+                paddingRight: 0.2,
+                textAlign: 'center',
+                textAlignVertical: 'center',
+                transform: [{ translate: [0, 0, -3] }],
+              }}>
+              {this.props.startCount}
+            </Text>
+        }
+      </View>
+    )
+  }
+}

components/GameOverObject.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, VrButton, StyleSheet, Animated } from 'react-vr';
+
+export default class GameOverObject extends React.Component {
+  render() {
+    return (
+      this.props.gameOverTextDisplay ?
+        <Animated.View>
+          <Text style={styles.GameOverText}>
+            GameOver
+        </Text>
+          <VrButton
+            style={styles.RetryButton}
+            onClick={() => this.props.gameStart()}
+          >
+            <Text
+              style={styles.ButtonText}
+            >
+              Retry
+            </Text>
+          </VrButton>
+        </Animated.View>
+        :
+        <View></View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  GameOverText: {
+    color: '#E70B19',
+    fontSize: 0.15,
+    layoutOrigin: [0.5, 0.5],
+    paddingLeft: 0.08,
+    paddingRight: 0.08,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    transform: [
+      { translate: [0, 0.05, -0.5] },
+      { rotateX: 5 }
+    ]
+  },
+  RetryButton: {
+    width: 0.25,
+    paddingLeft: 0.05,
+    paddingRight: 0.05,
+    backgroundColor: '#0A5267',
+    borderRadius: 0.02,
+    layoutOrigin: [0.5, 0.5],
+    transform: [
+      { translate: [0, 0, -0.5] }
+    ]
+  },
+  ButtonText: {
+    fontSize: 0.05,
+    textAlign: 'center',
+    textAlignVertical: 'center'
+  }
+});

components/PlaneObject.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { asset, Plane, View, Animated } from 'react-vr';
+
+export default class PlaneObject extends React.Component {
+
+  render() {
+    return (
+      <Animated.View
+        style={{
+          position: 'absolute',
+          transform: [
+            { translate: [0, -2, 0] },
+            { rotateX: -90 },
+            { rotateZ: 90 },
+            { translateX: this.props.planeX }
+          ]
+        }}
+      >
+        <Plane
+          texture={asset('road.jpg')}
+          dimWidth={500}
+          dimHeight={70}
+        />
+      </Animated.View>
+    );
+  }
+}

components/RoadObject.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { asset, Animated, View } from 'react-vr';
+
+import BoxObject from './BoxObject';
+import PlaneObject from './PlaneObject';
+
+export default class RoadObject extends React.Component {
+
+  render() {
+    return (
+      <View
+        style={{
+          transform: [
+            { translateX: this.props.headPosition / 2 }
+          ]
+        }}
+      >
+        <PlaneObject planeX={this.props.planeX} />
+        {
+          this.props.boxX.map((e, i) => (
+            <BoxObject
+              key={i}
+              boxX={e}
+              boxZ={this.props.boxZ}
+              front={this.props.front}
+              judgeCollision={this.props.judgeCollision}
+              collisionSound={this.props.collisionSound}
+            />
+          ))
+        }
+      </View>
+    );
+  }
+}

components/ScoreObject.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View, Text } from 'react-vr';
+
+export default class ScoreObject extends React.Component {
+  render() {
+    return (
+      <View>
+        <Text
+          style={{
+            position: 'absolute',
+            fontSize: 0.1,
+            layoutOrigin: [0.5, 0.5],
+            textAlign: 'center',
+            textAlignVertical: 'center',
+            transform: [
+              { translate: this.props.scoreTextPosition ? [0, 0.19, -0.5] : [-0.5, 0.4, -1] },
+              { rotateX: this.props.scoreTextPosition ? 0 : 10 },
+              { rotateY: this.props.scoreTextPosition ? 0 : 10 }
+            ]
+          }}>
+          score: {this.props.score} m
+        </Text>
+      </View>
+    );
+  }
+}

components/Start.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  AppRegistry,
+  View,
+  Pano,
+  asset,
+  Text,
+  VrButton,
+  VrHeadModel
+} from 'react-vr';
+
+
+export default class Start extends React.Component {
+  render() {
+    return (
+      <View>
+        <Pano
+          source={asset("Pano.jpg")}
+        />
+        <Text
+          style={{
+            position: 'absolute',
+            fontSize: 0.5,
+            padding: 0.1,
+            borderRadius: 0.2,
+            textAlign: 'center',
+            textAlignVertical: 'center',
+            backgroundColor: '#607D8B',
+            layoutOrigin: [0.5, 0.5],
+            transform: [{ translate: [0, 1, -3] }]
+          }}
+        >
+          Avoid Game
+        </Text>
+        <Text
+          style={{
+            position: 'absolute',
+            fontSize: 0.2,
+            textAlign: 'center',
+            layoutOrigin: [0.5, 0.5],
+            transform: [{ translate: [0, 0, -3] }]
+          }}
+        >
+          ゲーム内では
+          {"\n"}
+          {VrHeadModel.inVR() ?
+            "首を左右に傾けることで\n移動することができます"
+            :
+            "視点を左右に動かすことで\n移動することができます"
+          }
+        </Text>
+        <VrButton
+          onClick={() => this.props.gameStart()}
+          style={{
+            position: 'absolute',
+            width: 1.5,
+            borderRadius: 0.2,
+            backgroundColor: '#009688',
+            layoutOrigin: [0.5, 0.5],
+            transform: [{ translate: [0, -1, -3] }]
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 0.5,
+              textAlign: 'center',
+              textAlignVertical: 'center'
+            }}
+          >
+            Start
+          </Text>
+        </VrButton>
+      </View>
+    );
+  }
+}