-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
168 lines (131 loc) · 3.78 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
// REACT NATIVE
import { GameEngine } from "react-native-game-engine";
import React, { useRef, useState } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from "react-native";
// CUSTOM COMPONENTS
import Constants from "./Constants";
import Head from "./components/Head";
import Food from "./components/Food";
import Tail from "./components/Tail";
import GameLoop from "./systems/GameLoop";
export default function App() {
// INIT CONSTANTS
const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE;
const engine = useRef(null);
// RANDOM NUMBER GENERATION
const randomPositions = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// GAME STATE
const [isGameRunning, setIsGameRunning] = useState(true);
return (
<View style={styles.canvas}>
{/* GAME ENGINE COMPONENT */}
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: false,
backgroundColor: "white",
}}
// GAME OBJECTS
entities={{
head: {
position: [ Constants.GRID_SIZE/2 , Constants.GRID_SIZE/2],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: Constants.SNAKE_SPEED,
yspeed: 0,
renderer: <Head />,
},
food: {
position: [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
],
size: Constants.CELL_SIZE,
renderer: <Food />,
},
tail: {
size: Constants.CELL_SIZE,
elements: [],
position: [Constants.GRID_SIZE, Constants.GRID_SIZE],
renderer: <Tail />,
}
}}
// main loop
systems={[GameLoop]}
running={isGameRunning}
onEvent={(e) => {
switch (e) {
case "game-over":
alert("Game over!");
setIsGameRunning(false);
return;
}
}}
/>
{/* CONTROLLER VIEW (placed into three rows as <views>) */}
<View style={styles.controlContainer}>
<View style={styles.controllerRow}> {/* row 1 */}
{/* UP BUTTON */}
<TouchableOpacity onPress={() => engine.current.dispatch("move-up")}>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
<View style={styles.controllerRow}> {/* row 2 */}
{/* LEFT BUTTON */}
<TouchableOpacity
onPress={() => engine.current.dispatch("move-left")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
{/* CENTER DEAD SPACE */}
<View style={[styles.controlBtn, { backgroundColor: null }]} />
{/* RIGHT BUTTON */}
<TouchableOpacity
onPress={() => engine.current.dispatch("move-right")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
<View style={styles.controllerRow}> {/* row 3 */}
{/* DOWN BUTTON */}
<TouchableOpacity
onPress={() => engine.current.dispatch("move-down")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
canvas: {
flex: 1,
backgroundColor: "#000000",
alignItems: "center",
justifyContent: "center",
},
controlContainer: {
marginTop: 10,
},
controllerRow: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
controlBtn: {
backgroundColor: "yellow",
width: 100,
height: 100,
},
});