Wern Ancheta anchetaWern

🏠

Working from home

anchetaWern / Set up goal in App.js

Last active May 27, 2019 05:20

React Native Accelerometer Maze: Set up goal

	// App.js
	const GOAL_SIZE = Math.floor(width * .04);
	const goalPoint = GetRandomPoint(GRID_X, GRID_Y);
	const goal = Matter.Bodies.rectangle(goalPoint.x, goalPoint.y, GOAL_SIZE, GOAL_SIZE, {
	isStatic: true,
	isSensor: true,
	label: 'goal'
	});

anchetaWern / Set accelerometer update interval in App.js

Last active May 27, 2019 05:20

React Native Accelerometer Maze: Set accelerometer update interval

	// App.js
	setUpdateIntervalForType(SensorTypes.accelerometer, 100);

anchetaWern / Create main component and initialize state in App.js

Last active May 27, 2019 05:23

React Native Accelerometer Maze: Create main component and initialize state

	// App.js
	export default class App extends Component {

	state = {
	ballX: theBall.position.x,
	ballY: theBall.position.y,
	}

	// next: add componentDidMount

anchetaWern / Set up world and detect collisions in App.js

Last active May 27, 2019 05:23

React Native Accelerometer Maze: Set up world and detect collisions

	// App.js
	componentDidMount() {

	const { engine, world } = this._addObjectsToWorld(maze, theBall, goal);
	this.entities = this._getEntities(engine, world, maze, theBall, goal);

	this._setupCollisionHandler(engine);

	// next: subscribe to accelerometer

anchetaWern / Subscribe to accelerometer data in App.js

Last active May 27, 2019 05:24

React Native Accelerometer Maze: Subscribe to accelerometer data

anchetaWern / Add objects to world in App.js

Last active May 27, 2019 05:27

React Native Accelerometer Maze: Add objects to world

	// App.js
	_addObjectsToWorld = (maze, ball, goal) => {
	const engine = Matter.Engine.create({ enableSleeping: false });
	const world = engine.world;

	Matter.World.add(world, [
	maze,
	ball,
	goal
	]);

anchetaWern / get entities in App.js

Last active May 27, 2019 05:26

React Native Accelerometer Maze: Get entities

	// App.js
	_getEntities = (engine, world, maze, ball, goal) => {
	const entities = {
	physics: {
	engine,
	world
	},
	playerBall: {
	body: ball,
	bgColor: '#FF5877',

anchetaWern / render component in App.js

Last active May 27, 2019 05:25

React Native Accelerometer Maze: render component

anchetaWern / physics in App.js

Last active May 27, 2019 05:25

React Native Accelerometer Maze: Add physics

	// App.js
	physics = (entities, { time }) => {
	let engine = entities["physics"].engine;
	engine.world.gravity = {
	x: 0,
	y: 0
	};
	Matter.Engine.update(engine, time.delta);
	return entities;
	}

anchetaWern / Circle.js

Last active May 27, 2019 05:15

React Native Accelerometer Maze: Circle component

	// src/components/Circle.js
	import React, { Component } from "react";
	import { View, Dimensions } from "react-native";

	const { height, width } = Dimensions.get('window');

	const BODY_DIAMETER = Math.trunc(Math.max(width, height) * 0.02);
	const BORDER_WIDTH = Math.trunc(BODY_DIAMETER * 0.1);

	const Circle = ({ body, bgColor, borderColor }) => {

	// App.js
	accelerometer.subscribe(({ x, y }) => {

	Matter.Body.setPosition(theBall, {
	x: this.state.ballX + x,
	y: this.state.ballY + y
	});

	this.setState({
	ballX: x + this.state.ballX,