用React Native制作一個(gè)簡(jiǎn)單的游戲引擎

更新時(shí)間：2021年05月27日 11:54:45 作者：后端之巔

今天給大家分享的是使用React Native制作一個(gè)簡(jiǎn)單的游戲，這個(gè)游戲可以跨平臺(tái)操作，本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)React Native游戲相關(guān)知識(shí)感興趣的朋友一起看看吧

簡(jiǎn)介

今天我們將學(xué)習(xí)如何使用React Native制作一個(gè)游戲。因?yàn)槲覀兪褂玫氖荝eact Native，這個(gè)游戲?qū)⑹强缙脚_(tái)的，這意味著你可以在Android、iOS和網(wǎng)絡(luò)上玩同一個(gè)游戲。然而，今天我們將只關(guān)注移動(dòng)設(shè)備。所以我們開始吧。

開始吧

要制作任何游戲，我們需要一個(gè)循環(huán)，在我們玩的時(shí)候更新我們的游戲。這個(gè)循環(huán)被優(yōu)化以順利運(yùn)行游戲，為此我們將使用 React Native游戲引擎。

首先讓我們用以下命令創(chuàng)建一個(gè)新的React Native應(yīng)用。

npx react-native init ReactNativeGame

創(chuàng)建項(xiàng)目后，我們需要添加一個(gè)依賴項(xiàng)，以便添加游戲引擎。

npm i -S react-native-game-engine

這個(gè)命令將把React Native游戲引擎添加到我們的項(xiàng)目中。

那么，我們要做一個(gè)什么樣的游戲呢？為了簡(jiǎn)單起見，讓我們做一個(gè)蛇的游戲，它可以吃食物的碎片并增長(zhǎng)身長(zhǎng)。

對(duì)React Native游戲引擎的簡(jiǎn)單介紹

React Native Game Engine是一個(gè)輕量級(jí)的游戲引擎。它包括一個(gè)組件，允許我們將對(duì)象的數(shù)組添加為實(shí)體，這樣我們就可以對(duì)它們進(jìn)行操作。為了編寫我們的游戲邏輯，我們使用了一個(gè)系統(tǒng)道具陣列，它允許我們操縱實(shí)體（游戲?qū)ο螅?，檢測(cè)觸摸，以及許多其他令人敬畏的細(xì)節(jié)，幫助我們制作一個(gè)簡(jiǎn)單的、功能性的游戲。

讓我們?cè)赗eact Native中建立一個(gè)蛇形游戲

要制作一個(gè)游戲，我們需要一個(gè)畫布或容器，我們將在其中添加游戲?qū)ο?。要制作一個(gè)畫布，我們只需添加一個(gè)帶有風(fēng)格的視圖組件，像這樣。

// 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為游戲引擎添加了一個(gè)ref，以便日后使用。

我們還在項(xiàng)目的根部創(chuàng)建了一個(gè) Constants.js 文件來存儲(chǔ)我們的常量值。

// Constants.js
import { Dimensions } from "react-native";
export default {
  MAX_WIDTH: Dimensions.get("screen").width,
  MAX_HEIGHT: Dimensions.get("screen").height,
  GRID_SIZE: 15,
  CELL_SIZE: 20
};

你會(huì)注意到我們正在做一個(gè)15乘15的網(wǎng)格，我們的蛇將在那里移動(dòng)。

這時(shí)我們的游戲引擎已經(jīng)設(shè)置好了，以顯示蛇和它的食物。我們需要將實(shí)體和道具添加到 GameEngine ，但在此之前，我們需要?jiǎng)?chuàng)建一個(gè)蛇和食物的組件，在設(shè)備上渲染。

創(chuàng)建游戲?qū)嶓w

讓我們首先制作蛇。蛇分為兩部分，頭部和身體（或尾巴）?，F(xiàn)在我們將制作蛇的頭部，我們將在本教程的后面添加蛇的尾巴。

為了制作蛇的頭部，我們將在組件文件夾中制作一個(gè) Head 組件。

正如你所看到的，我們有三個(gè)組件： Head ， Food ，和 Tail 。我們將在本教程中逐一查看這些文件的內(nèi)容。

在 Head 組件中，我們將創(chuàng)建一個(gè)帶有一些樣式的視圖。

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>
  );
}

我們將傳遞一些道具來設(shè)置頭部的大小和位置。

我們使用 position: "absolute" 屬性來輕松移動(dòng)頭部。

這將呈現(xiàn)一個(gè)正方形，我們不打算使用更復(fù)雜的東西；一個(gè)正方形或長(zhǎng)方形的形狀代表蛇的身體，一個(gè)圓形的形狀代表食物。

現(xiàn)在讓我們將這條蛇的頭部添加到 GameEngine 。

要添加任何實(shí)體，我們需要在 GameEngine 中的 entities 道具中傳遞一個(gè)對(duì)象。

//App.js
import 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 />,
          }
        }} 
/>

我們?cè)?entities 道具中傳遞了一個(gè)對(duì)象，其關(guān)鍵是頭。這些是它定義的屬性。

position 是一組坐標(biāo)，用于放置蛇頭。
size 是設(shè)置蛇頭大小的值。
xspeed 和 yspeed 是決定蛇的運(yùn)動(dòng)和方向的值，可以是1、0或-1。注意，當(dāng) xspeed 被設(shè)置為1或-1時(shí)，那么 yspeed 的值必須為0，反之亦然
最后， renderer ，負(fù)責(zé)渲染該組件
updateFrequency 和 nextMove 將在后面討論。

在添加完 Head 組件后，我們也來添加其他組件。

// commponets/Food/index.js
import 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 組件類似，但我們改變了背景顏色和邊框半徑，使其成為一個(gè)圓形。

現(xiàn)在創(chuàng)建一個(gè) Tail 組件。這個(gè)可能很棘手。

// components/Tail/index.js

import 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>
  );
}

當(dāng)蛇吃了食物后，我們將在蛇身中添加一個(gè)元素，這樣我們的蛇就會(huì)成長(zhǎng)。這些元素將傳入 Tail 組件，這將表明它必須變大。

我們將循環(huán)瀏覽所有的元素來創(chuàng)建整個(gè)蛇身，附加上它，然后渲染。

在制作完所有需要的組件后，讓我們把這兩個(gè)組件作為 GameEngine 。

// App.js

import Food from "./components/Food";
import Tail from "./components/Tail";


// App.js
const 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 />,
          },
        }}

      />

為了保證食物位置的隨機(jī)性，我們做了一個(gè)帶有最小和最大參數(shù)的 randomPositions 函數(shù)。

在 tail ，我們?cè)诔跏紶顟B(tài)下添加了一個(gè)空數(shù)組，所以當(dāng)蛇吃到食物時(shí)，它將在 elements: 空間中存儲(chǔ)每個(gè)尾巴的長(zhǎng)度。

在這一點(diǎn)上，我們已經(jīng)成功創(chuàng)建了我們的游戲組件?，F(xiàn)在是在游戲循環(huán)中添加游戲邏輯的時(shí)候了。

游戲邏輯

為了使游戲循環(huán)， GameEngine 組件有一個(gè)叫 systems 的道具，它接受一個(gè)數(shù)組的函數(shù)。

為了保持一切結(jié)構(gòu)化，我正在創(chuàng)建一個(gè)名為 systems 的文件夾，并插入一個(gè)名為 GameLoop.js 的文件。

在這個(gè)文件中，我們正在導(dǎo)出一個(gè)帶有某些參數(shù)的函數(shù)。

// GameLoop.js

export default function (entities, { events, dispatch }) {
  ...

  return entities;
}

第一個(gè)參數(shù)是 entities ，它包含了我們傳遞給 GameEngine 組件的所有實(shí)體，所以我們可以操作它們。另一個(gè)參數(shù)是一個(gè)帶有屬性的對(duì)象，即 events 和 dispatch 。

移動(dòng)蛇頭

讓我們編寫代碼，將蛇頭向正確的方向移動(dòng)。

在 GameLoop.js 函數(shù)中，我們將更新頭部的位置，因?yàn)檫@個(gè)函數(shù)在每一幀都會(huì)被調(diào)用。

// GameLoop.js
export default function (entities, { events, dispatch }) {
  const head = entities.head;
  head.position[0] += head.xspeed;
  head.position[1] += head.yspeed;
}

我們使用 entities 參數(shù)訪問頭部，在每一幀中我們都要更新蛇頭的位置。

如果你現(xiàn)在玩游戲，什么也不會(huì)發(fā)生，因?yàn)槲覀儼?xspeed 和 yspeed 設(shè)置為0。如果你把 xspeed 或 yspeed 設(shè)置為1，蛇的頭部會(huì)移動(dòng)得很快。

為了減慢蛇的速度，我們將像這樣使用 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。當(dāng)值為0時(shí)， if 條件被設(shè)置為 true ， nextMove 值被更新回初始值，從而移動(dòng)蛇的頭部。

現(xiàn)在，蛇的速度應(yīng)該比以前慢了。

"游戲結(jié)束！"條件

在這一點(diǎn)上，我們還沒有添加 "游戲結(jié)束！"條件。第一個(gè) "游戲結(jié)束！"條件是當(dāng)蛇碰到墻時(shí)，游戲停止運(yùn)行，并向用戶顯示一條信息，表明游戲已經(jīng)結(jié)束。

為了添加這個(gè)條件，我們使用這段代碼。

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;
    }

第二個(gè) if 條件是檢查蛇頭是否觸及墻壁。如果該條件為真，那么我們將使用 dispatch 函數(shù)來發(fā)送一個(gè) "game-over" 事件。

通過 else ，我們正在更新蛇的頭部位置。

現(xiàn)在讓我們添加 "游戲結(jié)束！"的功能。

每當(dāng)我們派發(fā)一個(gè) "game-over" 事件時(shí)，我們將停止游戲，并顯示一個(gè)警告："游戲結(jié)束！"讓我們來實(shí)現(xiàn)它。

為了監(jiān)聽 "game-over" 事件，我們需要將 onEvent 道具傳遞給 GameEngine 組件。為了停止游戲，我們需要添加一個(gè) running 道具并傳入 useState 。

我們的 GameEngine 應(yīng)該看起來像這樣。

// App.js
import 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 中，我們已經(jīng)添加了 systems 道具，并通過我們的 GameLoop 函數(shù)傳入了一個(gè)數(shù)組，同時(shí)還有一個(gè) running 道具和一個(gè) isGameRunning 狀態(tài)。最后，我們添加了 onEvent 道具，它接受一個(gè)帶有事件參數(shù)的函數(shù)，這樣我們就可以監(jiān)聽我們的事件。

在這種情況下，我們?cè)趕witch語句中監(jiān)聽 "game-over" 事件，所以當(dāng)我們收到該事件時(shí)，我們顯示 "Game over!" 警報(bào)，并將 isGameRunning 狀態(tài)設(shè)置為 false ，以停止游戲。

食用食物

我們已經(jīng)寫好了 "游戲結(jié)束！"的邏輯，現(xiàn)在讓我們來寫一下讓蛇吃食物的邏輯。

當(dāng)蛇吃了食物后，食物的位置應(yīng)該隨機(jī)變化。

打開 GameLoop.js ，寫下以下代碼。

// GameLoop.js

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;

  ....
  ....
  ....
  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),
          ];
        }
  }

我們添加了一個(gè) if ，以檢查蛇頭和食物的位置是否相同（這將表明蛇已經(jīng) "吃 "了食物）。然后，我們使用 randomPositions 函數(shù)更新食物的位置，正如我們?cè)谏厦娴?App.js 。請(qǐng)注意，我們是通過 entities 參數(shù)來訪問食物的。

控制蛇

現(xiàn)在讓我們來添加蛇的控制。我們將使用按鈕來控制蛇的移動(dòng)位置。

要做到這一點(diǎn)，我們需要在畫布下面的屏幕上添加按鈕。

// App.js

import 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,
  },
});

除了控制之外，我們還添加了一個(gè)按鈕，以便在前一個(gè)游戲結(jié)束時(shí)開始一個(gè)新的游戲。這個(gè)按鈕只在游戲沒有運(yùn)行時(shí)出現(xiàn)。在點(diǎn)擊該按鈕時(shí)，我們通過使用游戲引擎的 swap 函數(shù)來重置游戲，傳入實(shí)體的初始對(duì)象，并更新游戲的運(yùn)行狀態(tài)。

現(xiàn)在說說控制。我們已經(jīng)添加了可觸摸物體，當(dāng)按下這些物體時(shí)，就會(huì)派發(fā)將在游戲循環(huán)中處理的事件。

// 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;
      }
    });
  }

....
....
});

在上面的代碼中，我們添加了一個(gè) switch 語句來識(shí)別事件并更新蛇的方向。

還在聽我說嗎？很好!唯一剩下的就是尾巴了。

尾巴功能

當(dāng)蛇吃了食物后，我們希望它的尾巴能長(zhǎng)出來。我們還想在蛇咬到自己的尾巴或身體時(shí)發(fā)出一個(gè) "游戲結(jié)束！"的事件。

讓我們來添加尾巴邏輯。

// GameLoop.js

const 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),
        ];
      }
    }

為了使尾巴跟隨蛇的頭部，我們要更新尾巴的元素。我們通過將頭部的位置添加到元素?cái)?shù)組的開頭，然后刪除尾巴元素?cái)?shù)組上的最后一個(gè)元素來實(shí)現(xiàn)這一目的。

在這之后，我們寫一個(gè)條件，如果蛇咬了自己的身體，我們就分派 "game-over" 事件。

最后，每當(dāng)蛇吃了食物，我們就用蛇頭的當(dāng)前位置來追加蛇尾的元素，以增加蛇尾的長(zhǎng)度。

下面是 GameLoop.js 的完整代碼。

// GameLoop.js

import 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;
}