这篇文章将为大家详细讲解有关如何使用React Native制作一个简单的游戏引擎，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。开始吧要制作任何游戏，我们需要一个循环，在我们玩的时候更新我们的游戏。这个循
这篇文章将为大家详细讲解有关如何使用React Native制作一个简单的游戏引擎，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
要制作任何游戏，我们需要一个循环，在我们玩的时候更新我们的游戏。这个循环被优化以顺利运行游戏，为此我们将使用 React Native游戏引擎 。
首先让我们用以下命令创建一个新的React Native应用。
npx react-native init ReactNativeGame创建项目后，我们需要添加一个依赖项，以便添加游戏引擎。
npm i -S react-native-game-engine这个命令将把React Native游戏引擎添加到我们的项目中。
那么，我们要做一个什么样的游戏呢？为了简单起见，让我们做一个蛇的游戏，它可以吃食物的碎片并增长身长。
React Native Game Engine是一个轻量级的游戏引擎。它包括一个组件，允许我们将对象的数组添加为实体，这样我们就可以对它们进行操作。为了编写我们的游戏逻辑，我们使用了一个系统道具阵列，它允许我们操纵实体（游戏对象），检测触摸，以及许多其他令人敬畏的细节，帮助我们制作一个简单的、功能性的游戏。
要制作一个游戏，我们需要一个画布或容器，我们将在其中添加游戏对象。要制作一个画布，我们只需添加一个带有风格的视图组件，像这样。
// App.js <View style={styles.canvas}></View>我们可以像这样添加我们的样式。
const styles = StyleSheet.create({ canvas: { flex: 1, backgroundColor: "#000000", alignItems: "center", justifyContent: "center", }});在画布中，我们将使用 GameEngine 组件和一些来自React Native Game Engine的样式。
import { GameEngine } from "react-native-game-engine";import React, { useRef } from "react";import Constants from "./Constants";export default function App() { const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE; const engine = useRef(null); return ( <View style={styles.canvas}> <GameEngine ref={engine} style={{ width: BoardSize, height: BoardSize, flex: null, backgroundColor: "white", }} /> </View>);我们还使用 useRef() React Hook为游戏引擎添加了一个ref，以便日后使用。
我们还在项目的根部创建了一个 Constants.js 文件来存储我们的常量值。
// Constants.jsimport { Dimensions } from "react-native";export default { MAX_WIDTH: Dimensions.get("screen").width, MAX_HEIGHT: Dimensions.get("screen").height, GRID_SIZE: 15, CELL_SIZE: 20};你会注意到我们正在做一个15乘15的网格，我们的蛇将在那里移动。
这时我们的游戏引擎已经设置好了，以显示蛇和它的食物。我们需要将实体和道具添加到 GameEngine ，但在此之前，我们需要创建一个蛇和食物的组件，在设备上渲染。
让我们首先制作蛇。蛇分为两部分，头部和身体（或尾巴）。现在我们将制作蛇的头部，我们将在本教程的后面添加蛇的尾巴。
为了制作蛇的头部，我们将在组件文件夹中制作一个 Head 组件。
正如你所看到的，我们有三个组件： Head ， Food ，和 Tail 。我们将在本教程中逐一查看这些文件的内容。
在 Head 组件中，我们将创建一个带有一些样式的视图。
import React from "react";import { View } from "react-native";export default function Head({ position, size }) { return ( <View style={{ width: size, height: size, backgroundColor: "red", position: "absolute", left: position[0] * size, top: position[1] * size, }} ></View> );}我们将传递一些道具来设置头部的大小和位置。
我们使用 position: "absolute" 属性来轻松移动头部。
这将呈现一个正方形，我们不打算使用更复杂的东西；一个正方形或长方形的形状代表蛇的身体，一个圆形的形状代表食物。
现在让我们将这条蛇的头部添加到 GameEngine 。
要添加任何实体，我们需要在 GameEngine 中的 entities 道具中传递一个对象。
//App.jsimport Head from "./components/Head"; <GameEngine ref={engine} style={{ width: BoardSize, height: BoardSize, flex: null, backgroundColor: "white", }} entities={{ head: { position: [0, 0], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, yspeed: 0, renderer: <Head />, } }} />我们在 entities 道具中传递了一个对象，其关键是头。这些是它定义的属性。
position 是一组坐标，用于放置蛇头。
size 是设置蛇头大小的值。
xspeed 和 yspeed 是决定蛇的运动和方向的值，可以是1、0或-1。注意，当 xspeed 被设置为1或-1时，那么 yspeed 的值必须为0，反之亦然
最后， renderer ，负责渲染该组件
updateFrequency 和 nextMove 将在后面讨论。
在添加完 Head 组件后，我们也来添加其他组件。
// commponets/Food/index.jsimport React from "react";import { View } from "react-native";export default function Food({ position, size }) { return ( <View style={{ width: size, height: size, backgroundColor: "green", position: "absolute", left: position[0] * size, top: position[1] * size, borderRadius: 50 }} ></View> );}Food 组件与 Head 组件类似，但我们改变了背景颜色和边框半径，使其成为一个圆形。
现在创建一个 Tail 组件。这个可能很棘手。
// components/Tail/index.jsimport React from "react";import { View } from "react-native";import Constants from "../../Constants";export default function Tail({ elements, position, size }) { const tailList = elements.map((el, idx) => ( <View key={idx} style={{ width: size, height: size, position: "absolute", left: el[0] * size, top: el[1] * size, backgroundColor: "red", }} /> )); return ( <View style={{ width: Constants.GRID_SIZE * size, height: Constants.GRID_SIZE * size, }} > {tailList} </View> );}当蛇吃了食物后，我们将在蛇身中添加一个元素，这样我们的蛇就会成长。这些元素将传入 Tail 组件，这将表明它必须变大。
我们将循环浏览所有的元素来创建整个蛇身，附加上它，然后渲染。
在制作完所有需要的组件后，让我们把这两个组件作为 GameEngine 。
// App.jsimport Food from "./components/Food";import Tail from "./components/Tail";// App.jsconst randomPositions = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min); };// App.js<GameEngine ref={engine} style={{ width: BoardSize, height: BoardSize, flex: null, backgroundColor: "white", }} entities={{ head: { position: [0, 0], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, 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: [], renderer: <Tail />, }, }} />为了保证食物位置的随机性，我们做了一个带有最小和最大参数的 randomPositions 函数。
在 tail ，我们在初始状态下添加了一个空数组，所以当蛇吃到食物时，它将在 elements: 空间中存储每个尾巴的长度。
在这一点上，我们已经成功创建了我们的游戏组件。现在是在游戏循环中添加游戏逻辑的时候了。
为了使游戏循环， GameEngine 组件有一个叫 systems 的道具，它接受一个数组的函数。
为了保持一切结构化，我正在创建一个名为 systems 的文件夹，并插入一个名为 GameLoop.js 的文件。
在这个文件中，我们正在导出一个带有某些参数的函数。
// GameLoop.jsexport default function (entities, { events, dispatch }) { ... return entities;}第一个参数是 entities ，它包含了我们传递给 GameEngine 组件的所有实体，所以我们可以操作它们。另一个参数是一个带有属性的对象，即 events 和 dispatch 。
让我们编写代码，将蛇头向正确的方向移动。
在 GameLoop.js 函数中，我们将更新头部的位置，因为这个函数在每一帧都会被调用。
// GameLoop.jsexport default function (entities, { events, dispatch }) { const head = entities.head; head.position[0] += head.xspeed; head.position[1] += head.yspeed;}我们使用 entities 参数访问头部，在每一帧中我们都要更新蛇头的位置。
如果你现在玩游戏，什么也不会发生，因为我们把 xspeed 和 yspeed 设置为0。如果你把 xspeed 或 yspeed 设置为1，蛇的头部会移动得很快。
为了减慢蛇的速度，我们将像这样使用 nextMove 和 updateFrequency 的值。
const head = entities.head;head.nextMove -= 1;if (head.nextMove === 0) { head.nextMove = head.updateFrequency; head.position[0] += head.xspeed; head.position[1] += head.yspeed;}我们通过在每一帧中减去1来更新 nextMove 的值为0。当值为0时， if 条件被设置为 true ， nextMove 值被更新回初始值，从而移动蛇的头部。
现在，蛇的速度应该比以前慢了。
在这一点上，我们还没有添加 "游戏结束！"条件。第一个 "游戏结束！"条件是当蛇碰到墙时，游戏停止运行，并向用户显示一条信息，表明游戏已经结束。
为了添加这个条件，我们使用这段代码。
if (head.nextMove === 0) { head.nextMove = head.updateFrequency; if ( head.position[0] + head.xspeed < 0 || head.position[0] + head.xspeed >= Constants.GRID_SIZE || head.position[1] + head.yspeed < 0 || head.position[1] + head.yspeed >= Constants.GRID_SIZE ) { dispatch("game-over"); } else { head.position[0] += head.xspeed; head.position[1] += head.yspeed; }第二个 if 条件是检查蛇头是否触及墙壁。如果该条件为真，那么我们将使用 dispatch 函数来发送一个 "game-over" 事件。
通过 else ，我们正在更新蛇的头部位置。
现在让我们添加 "游戏结束！"的功能。
每当我们派发一个 "game-over" 事件时，我们将停止游戏，并显示一个警告："游戏结束！"让我们来实现它。
为了监听 "game-over" 事件，我们需要将 onEvent 道具传递给 GameEngine 组件。为了停止游戏，我们需要添加一个 running 道具并传入 useState 。
我们的 GameEngine 应该看起来像这样。
// App.jsimport React, { useRef, useState } from "react";import GameLoop from "./systems/GameLoop";........const [isGameRunning, setIsGameRunning] = useState(true);........ <GameEngine ref={engine} style={{ width: BoardSize, height: BoardSize, flex: null, backgroundColor: "white", }} entities={{ head: { position: [0, 0], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, 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: [], renderer: <Tail />, }, }} systems={[GameLoop]} running={isGameRunning} onEvent={(e) => { switch (e) { case "game-over": alert("Game over!"); setIsGameRunning(false); return; } }} />在 GameEngine 中，我们已经添加了 systems 道具，并通过我们的 GameLoop 函数传入了一个数组，同时还有一个 running 道具和一个 isGameRunning 状态。最后，我们添加了 onEvent 道具，它接受一个带有事件参数的函数，这样我们就可以监听我们的事件。
在这种情况下，我们在switch语句中监听 "game-over" 事件，所以当我们收到该事件时，我们显示 "Game over!" 警报，并将 isGameRunning 状态设置为 false ，以停止游戏。
我们已经写好了 "游戏结束！"的逻辑，现在让我们来写一下让蛇吃食物的逻辑。
当蛇吃了食物后，食物的位置应该随机变化。
打开 GameLoop.js ，写下以下代码。
// GameLoop.jsconst randomPositions = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min);};export default function (entities, { events, dispatch }) { const head = entities.head; const food = entities.food; .... .... .... if ( head.position[0] + head.xspeed < 0 || head.position[0] + head.xspeed >= Constants.GRID_SIZE || head.position[1] + head.yspeed < 0 || head.position[1] + head.yspeed >= Constants.GRID_SIZE ) { dispatch("game-over"); } else { head.position[0] += head.xspeed; head.position[1] += head.yspeed; if ( head.position[0] == food.position[0] && head.position[1] == food.position[1] ) { food.position = [ randomPositions(0, Constants.GRID_SIZE - 1), randomPositions(0, Constants.GRID_SIZE - 1), ]; } }我们添加了一个 if ，以检查蛇头和食物的位置是否相同（这将表明蛇已经 "吃 "了食物）。然后，我们使用 randomPositions 函数更新食物的位置，正如我们在上面的 App.js 。请注意，我们是通过 entities 参数来访问食物的。
现在让我们来添加蛇的控制。我们将使用按钮来控制蛇的移动位置。
要做到这一点，我们需要在画布下面的屏幕上添加按钮。
// App.jsimport React, { useRef, useState } from "react";import { StyleSheet, Text, View } from "react-native";import { GameEngine } from "react-native-game-engine";import { TouchableOpacity } from "react-native-gesture-handler";import Food from "./components/Food";import Head from "./components/Head";import Tail from "./components/Tail";import Constants from "./Constants";import GameLoop from "./systems/GameLoop";export default function App() { const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE; const engine = useRef(null); const [isGameRunning, setIsGameRunning] = useState(true); const randomPositions = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min); }; const resetGame = () => { engine.current.swap({ head: { position: [0, 0], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, yspeed: 0, renderer: <Head />, }, food: { position: [ randomPositions(0, Constants.GRID_SIZE - 1), randomPositions(0, Constants.GRID_SIZE - 1), ], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, yspeed: 0, renderer: <Food />, }, tail: { size: Constants.CELL_SIZE, elements: [], renderer: <Tail />, }, }); setIsGameRunning(true); }; return ( <View style={styles.canvas}> <GameEngine ref={engine} style={{ width: BoardSize, height: BoardSize, flex: null, backgroundColor: "white", }} entities={{ head: { position: [0, 0], size: Constants.CELL_SIZE, updateFrequency: 10, nextMove: 10, xspeed: 0, 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: [], renderer: <Tail />, }, }} systems={[GameLoop]} running={isGameRunning} onEvent={(e) => { switch (e) { case "game-over": alert("Game over!"); setIsGameRunning(false); return; } }} /> <View style={styles.controlContainer}> <View style={styles.controllerRow}> <TouchableOpacity onPress={() => engine.current.dispatch("move-up")}> <View style={styles.controlBtn} /> </TouchableOpacity> </View> <View style={styles.controllerRow}> <TouchableOpacity onPress={() => engine.current.dispatch("move-left")} > <View style={styles.controlBtn} /> </TouchableOpacity> <View style={[styles.controlBtn, { backgroundColor: null }]} /> <TouchableOpacity onPress={() => engine.current.dispatch("move-right")} > <View style={styles.controlBtn} /> </TouchableOpacity> </View> <View style={styles.controllerRow}> <TouchableOpacity onPress={() => engine.current.dispatch("move-down")} > <View style={styles.controlBtn} /> </TouchableOpacity> </View> </View> {!isGameRunning && ( <TouchableOpacity onPress={resetGame}> <Text style={{ color: "white", marginTop: 15, fontSize: 22, padding: 10, backgroundColor: "grey", borderRadius: 10 }} > Start New Game </Text> </TouchableOpacity> )} </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, },});除了控制之外，我们还添加了一个按钮，以便在前一个游戏结束时开始一个新的游戏。这个按钮只在游戏没有运行时出现。在点击该按钮时，我们通过使用游戏引擎的 swap 函数来重置游戏，传入实体的初始对象，并更新游戏的运行状态。
现在说说控制。我们已经添加了可触摸物体，当按下这些物体时，就会派发将在游戏循环中处理的事件。
// GameLoop.js........ export default function (entities, { events, dispatch }) { const head = entities.head; const food = entities.food; if (events.length) { events.forEach((e) => { switch (e) { case "move-up": if (head.yspeed === 1) return; head.yspeed = -1; head.xspeed = 0; return; case "move-right": if (head.xspeed === -1) return; head.xspeed = 1; head.yspeed = 0; return; case "move-down": if (head.yspeed === -1) return; head.yspeed = 1; head.xspeed = 0; return; case "move-left": if (head.xspeed === 1) return; head.xspeed = -1; head.yspeed = 0; return; } }); }........});在上面的代码中，我们添加了一个 switch 语句来识别事件并更新蛇的方向。
还在听我说吗？很好!唯一剩下的就是尾巴了。
当蛇吃了食物后，我们希望它的尾巴能长出来。我们还想在蛇咬到自己的尾巴或身体时发出一个 "游戏结束！"的事件。
让我们来添加尾巴逻辑。
// GameLoop.jsconst tail = entities.tail;............ else { tail.elements = [[head.position[0], head.position[1]], ...tail.elements]; tail.elements.pop(); head.position[0] += head.xspeed; head.position[1] += head.yspeed; tail.elements.forEach((el, idx) => { if ( head.position[0] === el[0] && head.position[1] === el[1] ) dispatch("game-over"); }); if ( head.position[0] == food.position[0] && head.position[1] == food.position[1] ) { tail.elements = [ [head.position[0], head.position[1]], ...tail.elements, ]; food.position = [ randomPositions(0, Constants.GRID_SIZE - 1), randomPositions(0, Constants.GRID_SIZE - 1), ]; } }为了使尾巴跟随蛇的头部，我们要更新尾巴的元素。我们通过将头部的位置添加到元素数组的开头，然后删除尾巴元素数组上的最后一个元素来实现这一目的。
在这之后，我们写一个条件，如果蛇咬了自己的身体，我们就分派 "game-over" 事件。
最后，每当蛇吃了食物，我们就用蛇头的当前位置来追加蛇尾的元素，以增加蛇尾的长度。
下面是 GameLoop.js 的完整代码。
// GameLoop.jsimport Constants from "../Constants";const randomPositions = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min);}; export default function (entities, { events, dispatch }) { const head = entities.head; const food = entities.food; const tail = entities.tail; if (events.length) { events.forEach((e) => { switch (e) { case "move-up": if (head.yspeed === 1) return; head.yspeed = -1; head.xspeed = 0; return; case "move-right": if (head.xspeed === -1) return; head.xspeed = 1; head.yspeed = 0; // ToastAndroid.show("move right", ToastAndroid.SHORT); return; case "move-down": if (head.yspeed === -1) return; // ToastAndroid.show("move down", ToastAndroid.SHORT); head.yspeed = 1; head.xspeed = 0; return; case "move-left": if (head.xspeed === 1) return; head.xspeed = -1; head.yspeed = 0; // ToastAndroid.show("move left", ToastAndroid.SHORT); return; } }); } head.nextMove -= 1; if (head.nextMove === 0) { head.nextMove = head.updateFrequency; if ( head.position[0] + head.xspeed < 0 || head.position[0] + head.xspeed >= Constants.GRID_SIZE || head.position[1] + head.yspeed < 0 || head.position[1] + head.yspeed >= Constants.GRID_SIZE ) { dispatch("game-over"); } else { tail.elements = [[head.position[0], head.position[1]], ...tail.elements]; tail.elements.pop(); head.position[0] += head.xspeed; head.position[1] += head.yspeed; tail.elements.forEach((el, idx) => { console.log({ el, idx }); if ( head.position[0] === el[0] && head.position[1] === el[1] ) dispatch("game-over"); }); if ( head.position[0] == food.position[0] && head.position[1] == food.position[1] ) { tail.elements = [ [head.position[0], head.position[1]], ...tail.elements, ]; food.position = [ randomPositions(0, Constants.GRID_SIZE - 1), randomPositions(0, Constants.GRID_SIZE - 1), ]; } } } return entities;}关于“如何使用React Native制作一个简单的游戏引擎”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: 如何使用React Native制作一个简单的游戏引擎
本文链接: https://www.lsjlt.com/news/278269.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0