{"id":350,"date":"2024-03-15T14:40:20","date_gmt":"2024-03-15T14:40:20","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=350"},"modified":"2024-03-15T14:40:20","modified_gmt":"2024-03-15T14:40:20","slug":"turbocharged-tutorials-building-a-react-native-car-riding-game-from-scratch","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/turbocharged-tutorials-building-a-react-native-car-riding-game-from-scratch\/","title":{"rendered":"Turbocharged Tutorials: Building a React Native Car Riding Game from Scratch"},"content":{"rendered":"\n<p>Creating a car riding game in React Native can be an exciting project, blending the realms of app development and game design. In this article, we&#8217;ll walk through the process of building a basic car riding app using React Native and the React Native Game Engine, illustrating the process with a functional example code that runs both on iOS and Android platforms.\n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-15-at-19.50.20-576x1024.png\" alt=\"\" class=\"wp-image-352\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-15-at-19.50.20-576x1024.png 576w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-15-at-19.50.20-169x300.png 169w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/Simulator-Screenshot-iPhone-SE-3rd-generation-2024-03-15-at-19.50.20.png 750w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before diving into the development, ensure you have the following:\n\n\n\n<ul class=\"wp-block-list\">\n<li>A basic understanding of React Native and its components.<\/li>\n\n\n\n<li>Node.js and npm installed on your machine.<\/li>\n\n\n\n<li>React Native CLI installed, or use Expo if you prefer.<\/li>\n\n\n\n<li>An IDE or code editor of your choice (e.g., Visual Studio Code).<\/li>\n<\/ul>\n\n\n\n<p>Check below mentioned Article for tools and environments required to configure:\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"jqJTJb15oU\"><a href=\"https:\/\/zahiralam.com\/blog\/building-your-first-react-native-app-with-nodejs-backend-on-macos\/\">Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Developing a Cross-Platform Mobile App on macOS: A Guide to Using React Native and Node.js Without Expo&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/building-your-first-react-native-app-with-nodejs-backend-on-macos\/embed\/#?secret=3LMv9KPW0h#?secret=jqJTJb15oU\" data-secret=\"jqJTJb15oU\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the Project<\/h2>\n\n\n\n<p>Start by creating a new React Native project. You can do this by running the following command in your terminal:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">npx react-native init CarRidingApp<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20init%20CarRidingApp\">\n                            <button class=\"copy-button\" data-label=\"npx react-native init CarRidingApp\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Navigate into your project directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">cd CarRidingApp<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20CarRidingApp\">\n                            <button class=\"copy-button\" data-label=\"cd CarRidingApp\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Install the required dependencies, including the <code>react-native-game-engine<\/code> for the game logic, and other libraries for gesture handling and animations:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">npm install react-native-game-engine react-native-gesture-handler react-native-reanimated<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20react-native-game-engine%20react-native-gesture-handler%20react-native-reanimated\">\n                            <button class=\"copy-button\" data-label=\"npm install react-native-game-engine react-native-gesture-handler react-native-reanimated\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Structuring the App<\/h2>\n\n\n\n<p>The app&#8217;s structure is crucial for maintainability and scalability. The provided code is organized as follows:\n\n\n\n<p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>App.tsx<\/code>: The root component that sets up the game environment.<\/li>\n\n\n\n<li><code>components\/<\/code>: Contains the game engine and the road background components.<\/li>\n\n\n\n<li><code>entities\/<\/code>: Includes the car and obstacles components.<\/li>\n\n\n\n<li><code>styles\/<\/code>: Holds the styling for the game, road, lanes, and car.<\/li>\n\n\n\n<li><code>systems\/<\/code>: Contains the game logic systems like movement, collision, and touch controls.<\/li>\n\n\n\n<li><code>utils\/<\/code>: Includes constants and utility functions for the game.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Building the Game Engine Component<\/h2>\n\n\n\n<p>The <code>GameEngineApp<\/code> component in <code>components\/GameEngine.tsx<\/code> utilizes the <code>GameEngine<\/code> from <code>react-native-game-engine<\/code>. It manages the game&#8217;s state, including the car entity, obstacles, and the time elapsed. The game&#8217;s logic is handled by systems passed to the <code>GameEngine<\/code> component, including movement, touch control, and collision detection.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Handling Movements and Collisions<\/h2>\n\n\n\n<p>The movement and collision systems in the <code>systems\/<\/code> directory define how entities interact within the game. The <code>MoveSystem<\/code> updates the position of the car and obstacles based on their velocity, while the <code>CollisionSystem<\/code> checks for collisions between the car and obstacles, updating the game state accordingly.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling the Game<\/h2>\n\n\n\n<p>The <code>styles\/GameStyles.ts<\/code> file defines the visual aspects of the game, including the road, lanes, and car. Using <code>StyleSheet.create<\/code>, it ensures a consistent and performant styling approach.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Running the App<\/h2>\n\n\n\n<p>With the code in place, you can run the app on iOS or Android simulators (or actual devices) using the React Native CLI commands:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">npx react-native run-ios<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-ios\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>or\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">npx react-native run-android<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-android\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-android\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Ensure you have the appropriate development environment set up for iOS or Android development.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Coding of the App<\/h2>\n\n\n\n<p>We will delve into the specifics of each file in the car riding app created with React Native, breaking down the purpose and functionality of the code within.\n\n\n\n<h4 class=\"wp-block-heading\">App.tsx:<\/h4>\n\n\n\n<p>This is the entry point of the app, where the main component is defined. It sets up a basic React Native layout with a <code>StatusBar<\/code> and a <code>SafeAreaView<\/code>, ensuring the app content is displayed correctly across different devices. The <code>GameEngineApp<\/code> component, which contains the game&#8217;s logic and UI, is rendered inside the <code>SafeAreaView<\/code>.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">import React from &#039;react&#039;;\nimport { SafeAreaView, StatusBar } from &#039;react-native&#039;;\nimport GameEngineApp from &#039;.\/components\/GameEngine&#039;;\n\nconst App: React.FC = () =&gt; {\n  return (\n    &lt;&gt;\n      &lt;StatusBar barStyle=&quot;dark-content&quot; \/&gt;\n      &lt;SafeAreaView style={{ flex: 1 }}&gt;\n        &lt;GameEngineApp \/&gt;\n      &lt;\/SafeAreaView&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default App;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%20from%20%27react%27%3B%0Aimport%20%7B%20SafeAreaView%2C%20StatusBar%20%7D%20from%20%27react-native%27%3B%0Aimport%20GameEngineApp%20from%20%27.%2Fcomponents%2FGameEngine%27%3B%0A%0Aconst%20App%3A%20React.FC%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20return%20%28%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CStatusBar%20barStyle%3D%22dark-content%22%20%2F%3E%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7B%7B%20flex%3A%201%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGameEngineApp%20%2F%3E%0A%20%20%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B\">\n                            <button class=\"copy-button\" data-label=\"import React from &#039;react&#039;;\nimport { SafeAreaView, StatusBar } from &#039;react-native&#039;;\nimport GameEngineApp from &#039;.\/components\/GameEngine&#039;;\n\nconst App: React.FC = () =&gt; {\n  return (\n    &lt;&gt;\n      &lt;StatusBar barStyle=&quot;dark-content&quot; \/&gt;\n      &lt;SafeAreaView style={{ flex: 1 }}&gt;\n        &lt;GameEngineApp \/&gt;\n      &lt;\/SafeAreaView&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default App;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">utils\/Constants.ts:<\/h4>\n\n\n\n<p>This file defines several constants used throughout the app, such as screen dimensions, car settings, and game duration. These constants help maintain consistency and make it easier to adjust game settings.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">import { Dimensions } from &#039;react-native&#039;;\n\nexport const SCREEN_WIDTH = Dimensions.get(&#039;window&#039;).width;\nexport const SCREEN_HEIGHT = Dimensions.get(&#039;window&#039;).height;\n\nexport const CAR_START_POSITION = {\n  x: SCREEN_WIDTH \/ 2 - 25,\n  y: SCREEN_HEIGHT - 100,\n};\n\nexport const CAR_VELOCITY = { x: 0, y: -0.1 };\n\nexport const RIDE_DURATION = 7000; \/\/ Duration in milliseconds<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20%7B%20Dimensions%20%7D%20from%20%27react-native%27%3B%0A%0Aexport%20const%20SCREEN_WIDTH%20%3D%20Dimensions.get%28%27window%27%29.width%3B%0Aexport%20const%20SCREEN_HEIGHT%20%3D%20Dimensions.get%28%27window%27%29.height%3B%0A%0Aexport%20const%20CAR_START_POSITION%20%3D%20%7B%0A%20%20x%3A%20SCREEN_WIDTH%20%2F%202%20-%2025%2C%0A%20%20y%3A%20SCREEN_HEIGHT%20-%20100%2C%0A%7D%3B%0A%0Aexport%20const%20CAR_VELOCITY%20%3D%20%7B%20x%3A%200%2C%20y%3A%20-0.1%20%7D%3B%0A%0Aexport%20const%20RIDE_DURATION%20%3D%207000%3B%20%2F%2F%20Duration%20in%20milliseconds\">\n                            <button class=\"copy-button\" data-label=\"import { Dimensions } from &#039;react-native&#039;;\n\nexport const SCREEN_WIDTH = Dimensions.get(&#039;window&#039;).width;\nexport const SCREEN_HEIGHT = Dimensions.get(&#039;window&#039;).height;\n\nexport const CAR_START_POSITION = {\n  x: SCREEN_WIDTH \/ 2 - 25,\n  y: SCREEN_HEIGHT - 100,\n};\n\nexport const CAR_VELOCITY = { x: 0, y: -0.1 };\n\nexport const RIDE_DURATION = 7000; \/\/ Duration in milliseconds\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">utils\/GameUtils.ts:<\/h4>\n\n\n\n<p>This utility file includes a function to generate obstacles at random positions on the screen. Each obstacle is represented as an object with a unique key, position, size, and color.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">import Obstacle from &#039;..\/entities\/Obstacle&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT } from &#039;.\/Constants&#039;;\n\nexport const generateObstacles = (numberOfObstacles: number) =&gt; {\n  let obstacles = {};\n  for (let i = 0; i &lt; numberOfObstacles; i++) {\n    const position = {\n      x: Math.random() * (SCREEN_WIDTH - 50),\n      y: Math.random() * SCREEN_HEIGHT,\n    };\n    obstacles[`obstacle_${i}`] = Obstacle(position, { width: 50, height: 50 }, &#039;red&#039;);\n  }\n  return obstacles;\n};<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20Obstacle%20from%20%27..%2Fentities%2FObstacle%27%3B%0Aimport%20%7B%20SCREEN_WIDTH%2C%20SCREEN_HEIGHT%20%7D%20from%20%27.%2FConstants%27%3B%0A%0Aexport%20const%20generateObstacles%20%3D%20%28numberOfObstacles%3A%20number%29%20%3D%3E%20%7B%0A%20%20let%20obstacles%20%3D%20%7B%7D%3B%0A%20%20for%20%28let%20i%20%3D%200%3B%20i%20%3C%20numberOfObstacles%3B%20i%2B%2B%29%20%7B%0A%20%20%20%20const%20position%20%3D%20%7B%0A%20%20%20%20%20%20x%3A%20Math.random%28%29%20%2A%20%28SCREEN_WIDTH%20-%2050%29%2C%0A%20%20%20%20%20%20y%3A%20Math.random%28%29%20%2A%20SCREEN_HEIGHT%2C%0A%20%20%20%20%7D%3B%0A%20%20%20%20obstacles%5B%60obstacle_%24%7Bi%7D%60%5D%20%3D%20Obstacle%28position%2C%20%7B%20width%3A%2050%2C%20height%3A%2050%20%7D%2C%20%27red%27%29%3B%0A%20%20%7D%0A%20%20return%20obstacles%3B%0A%7D%3B\">\n                            <button class=\"copy-button\" data-label=\"import Obstacle from &#039;..\/entities\/Obstacle&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT } from &#039;.\/Constants&#039;;\n\nexport const generateObstacles = (numberOfObstacles: number) =&gt; {\n  let obstacles = {};\n  for (let i = 0; i &lt; numberOfObstacles; i++) {\n    const position = {\n      x: Math.random() * (SCREEN_WIDTH - 50),\n      y: Math.random() * SCREEN_HEIGHT,\n    };\n    obstacles[`obstacle_${i}`] = Obstacle(position, { width: 50, height: 50 }, &#039;red&#039;);\n  }\n  return obstacles;\n};\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">styles\/GameStyles.ts:<\/h4>\n\n\n\n<p>This file contains the styles for the game components, including the game container, road, lanes, and car design elements. It uses <code>StyleSheet.create<\/code> for better performance and maintainability.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">import { StyleSheet } from &#039;react-native&#039;;\n\nexport const gameStyles = StyleSheet.create({\n  gameContainer: {\n    flex: 1,\n    backgroundColor: &#039;#fff&#039;,\n  },\n  road: {\n    position: &#039;absolute&#039;,\n    width: &#039;100%&#039;,\n    height: &#039;100%&#039;,\n    backgroundColor: &#039;#333&#039;,\n    justifyContent: &#039;center&#039;,\n    alignItems: &#039;center&#039;,\n  },\n  lane: {\n    height: &#039;100%&#039;,\n    width: 5,\n    backgroundColor: &#039;#fff&#039;,\n    opacity: 0.5,\n  },\n});\n\nexport const carStyles = StyleSheet.create({\n  carBody: {\n    width: 50,\n    height: 100,\n    backgroundColor: &#039;blue&#039;,\n    alignItems: &#039;center&#039;,\n    justifyContent: &#039;space-between&#039;,\n  },\n  carTop: {\n    width: 35,\n    height: 25,\n    backgroundColor: &#039;darkblue&#039;,\n    borderTopLeftRadius: 5,\n    borderTopRightRadius: 5,\n  },\n  carBottom: {\n    width: 50,\n    height: 50,\n    backgroundColor: &#039;blue&#039;,\n  },\n  wheel: {\n    width: 15,\n    height: 15,\n    borderRadius: 7.5,\n    backgroundColor: &#039;black&#039;,\n  },\n  wheelContainer: {\n    flexDirection: &#039;row&#039;,\n    justifyContent: &#039;space-between&#039;,\n    width: &#039;100%&#039;,\n    paddingHorizontal: 5,\n  },\n});<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20%7B%20StyleSheet%20%7D%20from%20%27react-native%27%3B%0A%0Aexport%20const%20gameStyles%20%3D%20StyleSheet.create%28%7B%0A%20%20gameContainer%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20backgroundColor%3A%20%27%23fff%27%2C%0A%20%20%7D%2C%0A%20%20road%3A%20%7B%0A%20%20%20%20position%3A%20%27absolute%27%2C%0A%20%20%20%20width%3A%20%27100%25%27%2C%0A%20%20%20%20height%3A%20%27100%25%27%2C%0A%20%20%20%20backgroundColor%3A%20%27%23333%27%2C%0A%20%20%20%20justifyContent%3A%20%27center%27%2C%0A%20%20%20%20alignItems%3A%20%27center%27%2C%0A%20%20%7D%2C%0A%20%20lane%3A%20%7B%0A%20%20%20%20height%3A%20%27100%25%27%2C%0A%20%20%20%20width%3A%205%2C%0A%20%20%20%20backgroundColor%3A%20%27%23fff%27%2C%0A%20%20%20%20opacity%3A%200.5%2C%0A%20%20%7D%2C%0A%7D%29%3B%0A%0Aexport%20const%20carStyles%20%3D%20StyleSheet.create%28%7B%0A%20%20carBody%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20backgroundColor%3A%20%27blue%27%2C%0A%20%20%20%20alignItems%3A%20%27center%27%2C%0A%20%20%20%20justifyContent%3A%20%27space-between%27%2C%0A%20%20%7D%2C%0A%20%20carTop%3A%20%7B%0A%20%20%20%20width%3A%2035%2C%0A%20%20%20%20height%3A%2025%2C%0A%20%20%20%20backgroundColor%3A%20%27darkblue%27%2C%0A%20%20%20%20borderTopLeftRadius%3A%205%2C%0A%20%20%20%20borderTopRightRadius%3A%205%2C%0A%20%20%7D%2C%0A%20%20carBottom%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%2050%2C%0A%20%20%20%20backgroundColor%3A%20%27blue%27%2C%0A%20%20%7D%2C%0A%20%20wheel%3A%20%7B%0A%20%20%20%20width%3A%2015%2C%0A%20%20%20%20height%3A%2015%2C%0A%20%20%20%20borderRadius%3A%207.5%2C%0A%20%20%20%20backgroundColor%3A%20%27black%27%2C%0A%20%20%7D%2C%0A%20%20wheelContainer%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%27row%27%2C%0A%20%20%20%20justifyContent%3A%20%27space-between%27%2C%0A%20%20%20%20width%3A%20%27100%25%27%2C%0A%20%20%20%20paddingHorizontal%3A%205%2C%0A%20%20%7D%2C%0A%7D%29%3B\">\n                            <button class=\"copy-button\" data-label=\"import { StyleSheet } from &#039;react-native&#039;;\n\nexport const gameStyles = StyleSheet.create({\n  gameContainer: {\n    flex: 1,\n    backgroundColor: &#039;#fff&#039;,\n  },\n  road: {\n    position: &#039;absolute&#039;,\n    width: &#039;100%&#039;,\n    height: &#039;100%&#039;,\n    backgroundColor: &#039;#333&#039;,\n    justifyContent: &#039;center&#039;,\n    alignItems: &#039;center&#039;,\n  },\n  lane: {\n    height: &#039;100%&#039;,\n    width: 5,\n    backgroundColor: &#039;#fff&#039;,\n    opacity: 0.5,\n  },\n});\n\nexport const carStyles = StyleSheet.create({\n  carBody: {\n    width: 50,\n    height: 100,\n    backgroundColor: &#039;blue&#039;,\n    alignItems: &#039;center&#039;,\n    justifyContent: &#039;space-between&#039;,\n  },\n  carTop: {\n    width: 35,\n    height: 25,\n    backgroundColor: &#039;darkblue&#039;,\n    borderTopLeftRadius: 5,\n    borderTopRightRadius: 5,\n  },\n  carBottom: {\n    width: 50,\n    height: 50,\n    backgroundColor: &#039;blue&#039;,\n  },\n  wheel: {\n    width: 15,\n    height: 15,\n    borderRadius: 7.5,\n    backgroundColor: &#039;black&#039;,\n  },\n  wheelContainer: {\n    flexDirection: &#039;row&#039;,\n    justifyContent: &#039;space-between&#039;,\n    width: &#039;100%&#039;,\n    paddingHorizontal: 5,\n  },\n});\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">components\/GameEngine.tsx:<\/h4>\n\n\n\n<p>This component sets up the React Native Game Engine, defines the initial state of the game, and updates the game state based on time and game events. It also initializes the game entities, such as the car and obstacles.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">import React, { useState, useEffect } from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { GameEngine } from &#039;react-native-game-engine&#039;;\nimport Car from &#039;..\/entities\/Car&#039;;\nimport MoveSystem from &#039;..\/systems\/MoveSystem&#039;;\nimport TouchControlSystem from &#039;..\/systems\/TouchControlSystem&#039;;\nimport CollisionSystem from &#039;..\/systems\/CollisionSystem&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT, RIDE_DURATION, CAR_START_POSITION, CAR_VELOCITY } from &#039;..\/utils\/Constants&#039;;\nimport { generateObstacles } from &#039;..\/utils\/GameUtils&#039;;\nimport RoadBackground from &#039;.\/RoadBackground&#039;;\nimport { gameStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst GameEngineApp: React.FC = () =&gt; {\n  const [timeElapsed, setTimeElapsed] = useState(0);\n  const [entities, setEntities] = useState({\n    car: Car(CAR_START_POSITION, { width: 50, height: 100 }, &#039;blue&#039;),\n    ...generateObstacles(5),\n  });\n\n  useEffect(() =&gt; {\n    const timer = setInterval(() =&gt; {\n      setTimeElapsed(prevTime =&gt; prevTime + 1000);\n    }, 1000);\n\n    if (timeElapsed &gt;= RIDE_DURATION) {\n      setTimeElapsed(0);\n      setEntities(prevEntities =&gt; ({\n        ...prevEntities,\n        car: Car(CAR_START_POSITION, { width: 50, height: 100 }, &#039;blue&#039;),\n      }));\n    }\n\n    return () =&gt; clearInterval(timer);\n  }, [timeElapsed]);\n\n  return (\n    &lt;View style={gameStyles.gameContainer}&gt;\n      &lt;RoadBackground \/&gt;\n      &lt;GameEngine\n        systems={[MoveSystem(generateObstacles), TouchControlSystem, CollisionSystem]}\n        entities={entities}&gt;\n        {\/* Game view goes here *\/}\n      &lt;\/GameEngine&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default GameEngineApp;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%27react%27%3B%0Aimport%20%7B%20View%20%7D%20from%20%27react-native%27%3B%0Aimport%20%7B%20GameEngine%20%7D%20from%20%27react-native-game-engine%27%3B%0Aimport%20Car%20from%20%27..%2Fentities%2FCar%27%3B%0Aimport%20MoveSystem%20from%20%27..%2Fsystems%2FMoveSystem%27%3B%0Aimport%20TouchControlSystem%20from%20%27..%2Fsystems%2FTouchControlSystem%27%3B%0Aimport%20CollisionSystem%20from%20%27..%2Fsystems%2FCollisionSystem%27%3B%0Aimport%20%7B%20SCREEN_WIDTH%2C%20SCREEN_HEIGHT%2C%20RIDE_DURATION%2C%20CAR_START_POSITION%2C%20CAR_VELOCITY%20%7D%20from%20%27..%2Futils%2FConstants%27%3B%0Aimport%20%7B%20generateObstacles%20%7D%20from%20%27..%2Futils%2FGameUtils%27%3B%0Aimport%20RoadBackground%20from%20%27.%2FRoadBackground%27%3B%0Aimport%20%7B%20gameStyles%20%7D%20from%20%27..%2Fstyles%2FGameStyles%27%3B%0A%0Aconst%20GameEngineApp%3A%20React.FC%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20const%20%5BtimeElapsed%2C%20setTimeElapsed%5D%20%3D%20useState%280%29%3B%0A%20%20const%20%5Bentities%2C%20setEntities%5D%20%3D%20useState%28%7B%0A%20%20%20%20car%3A%20Car%28CAR_START_POSITION%2C%20%7B%20width%3A%2050%2C%20height%3A%20100%20%7D%2C%20%27blue%27%29%2C%0A%20%20%20%20...generateObstacles%285%29%2C%0A%20%20%7D%29%3B%0A%0A%20%20useEffect%28%28%29%20%3D%3E%20%7B%0A%20%20%20%20const%20timer%20%3D%20setInterval%28%28%29%20%3D%3E%20%7B%0A%20%20%20%20%20%20setTimeElapsed%28prevTime%20%3D%3E%20prevTime%20%2B%201000%29%3B%0A%20%20%20%20%7D%2C%201000%29%3B%0A%0A%20%20%20%20if%20%28timeElapsed%20%3E%3D%20RIDE_DURATION%29%20%7B%0A%20%20%20%20%20%20setTimeElapsed%280%29%3B%0A%20%20%20%20%20%20setEntities%28prevEntities%20%3D%3E%20%28%7B%0A%20%20%20%20%20%20%20%20...prevEntities%2C%0A%20%20%20%20%20%20%20%20car%3A%20Car%28CAR_START_POSITION%2C%20%7B%20width%3A%2050%2C%20height%3A%20100%20%7D%2C%20%27blue%27%29%2C%0A%20%20%20%20%20%20%7D%29%29%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20%28%29%20%3D%3E%20clearInterval%28timer%29%3B%0A%20%20%7D%2C%20%5BtimeElapsed%5D%29%3B%0A%0A%20%20return%20%28%0A%20%20%20%20%3CView%20style%3D%7BgameStyles.gameContainer%7D%3E%0A%20%20%20%20%20%20%3CRoadBackground%20%2F%3E%0A%20%20%20%20%20%20%3CGameEngine%0A%20%20%20%20%20%20%20%20systems%3D%7B%5BMoveSystem%28generateObstacles%29%2C%20TouchControlSystem%2C%20CollisionSystem%5D%7D%0A%20%20%20%20%20%20%20%20entities%3D%7Bentities%7D%3E%0A%20%20%20%20%20%20%20%20%7B%2F%2A%20Game%20view%20goes%20here%20%2A%2F%7D%0A%20%20%20%20%20%20%3C%2FGameEngine%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20GameEngineApp%3B\">\n                            <button class=\"copy-button\" data-label=\"import React, { useState, useEffect } from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { GameEngine } from &#039;react-native-game-engine&#039;;\nimport Car from &#039;..\/entities\/Car&#039;;\nimport MoveSystem from &#039;..\/systems\/MoveSystem&#039;;\nimport TouchControlSystem from &#039;..\/systems\/TouchControlSystem&#039;;\nimport CollisionSystem from &#039;..\/systems\/CollisionSystem&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT, RIDE_DURATION, CAR_START_POSITION, CAR_VELOCITY } from &#039;..\/utils\/Constants&#039;;\nimport { generateObstacles } from &#039;..\/utils\/GameUtils&#039;;\nimport RoadBackground from &#039;.\/RoadBackground&#039;;\nimport { gameStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst GameEngineApp: React.FC = () =&gt; {\n  const [timeElapsed, setTimeElapsed] = useState(0);\n  const [entities, setEntities] = useState({\n    car: Car(CAR_START_POSITION, { width: 50, height: 100 }, &#039;blue&#039;),\n    ...generateObstacles(5),\n  });\n\n  useEffect(() =&gt; {\n    const timer = setInterval(() =&gt; {\n      setTimeElapsed(prevTime =&gt; prevTime + 1000);\n    }, 1000);\n\n    if (timeElapsed &gt;= RIDE_DURATION) {\n      setTimeElapsed(0);\n      setEntities(prevEntities =&gt; ({\n        ...prevEntities,\n        car: Car(CAR_START_POSITION, { width: 50, height: 100 }, &#039;blue&#039;),\n      }));\n    }\n\n    return () =&gt; clearInterval(timer);\n  }, [timeElapsed]);\n\n  return (\n    &lt;View style={gameStyles.gameContainer}&gt;\n      &lt;RoadBackground \/&gt;\n      &lt;GameEngine\n        systems={[MoveSystem(generateObstacles), TouchControlSystem, CollisionSystem]}\n        entities={entities}&gt;\n        {\/* Game view goes here *\/}\n      &lt;\/GameEngine&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default GameEngineApp;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">components\/RoadBackground.tsx:<\/h4>\n\n\n\n<p>This component renders the road background for the game, including the lanes. It uses styles defined in <code>styles\/GameStyles.ts<\/code>.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { gameStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst RoadBackground: React.FC = () =&gt; {\n  return (\n    &lt;View style={gameStyles.road}&gt;\n      &lt;View style={gameStyles.lane} \/&gt;\n      &lt;View style={[gameStyles.lane, { marginHorizontal: 20 }]} \/&gt;\n      &lt;View style={gameStyles.lane} \/&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default RoadBackground;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%20from%20%27react%27%3B%0Aimport%20%7B%20View%20%7D%20from%20%27react-native%27%3B%0Aimport%20%7B%20gameStyles%20%7D%20from%20%27..%2Fstyles%2FGameStyles%27%3B%0A%0Aconst%20RoadBackground%3A%20React.FC%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20return%20%28%0A%20%20%20%20%3CView%20style%3D%7BgameStyles.road%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7BgameStyles.lane%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5BgameStyles.lane%2C%20%7B%20marginHorizontal%3A%2020%20%7D%5D%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7BgameStyles.lane%7D%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20RoadBackground%3B\">\n                            <button class=\"copy-button\" data-label=\"import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { gameStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst RoadBackground: React.FC = () =&gt; {\n  return (\n    &lt;View style={gameStyles.road}&gt;\n      &lt;View style={gameStyles.lane} \/&gt;\n      &lt;View style={[gameStyles.lane, { marginHorizontal: 20 }]} \/&gt;\n      &lt;View style={gameStyles.lane} \/&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default RoadBackground;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">entities\/Car.tsx:<\/h4>\n\n\n\n<p>This file defines the <code>Car<\/code> component, including its initial position, velocity, and rendering. The <code>CarDesign<\/code> component is responsible for rendering the car&#8217;s visual appearance based on its position and size.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-12\">import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { CAR_START_POSITION, CAR_VELOCITY } from &#039;..\/utils\/Constants&#039;;\nimport { carStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst Car = () =&gt; {\n  const carProps = {\n    position: CAR_START_POSITION,\n    velocity: CAR_VELOCITY,\n    size: { width: 50, height: 100 },\n  };\n\n  return {\n    ...carProps,\n    renderer: &lt;CarDesign {...carProps} \/&gt;,\n  };\n};\n\nconst CarDesign: React.FC = ({ position }) =&gt; {\n  return (\n    &lt;View style={[carStyles.carBody, { left: position.x, top: position.y }]}&gt;\n      &lt;View style={carStyles.carTop} \/&gt;\n      &lt;View style={carStyles.wheelContainer}&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n      &lt;\/View&gt;\n      &lt;View style={carStyles.carBottom} \/&gt;\n      &lt;View style={[carStyles.wheelContainer, { top: 0 }]}&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n      &lt;\/View&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default Car;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%20from%20%27react%27%3B%0Aimport%20%7B%20View%20%7D%20from%20%27react-native%27%3B%0Aimport%20%7B%20CAR_START_POSITION%2C%20CAR_VELOCITY%20%7D%20from%20%27..%2Futils%2FConstants%27%3B%0Aimport%20%7B%20carStyles%20%7D%20from%20%27..%2Fstyles%2FGameStyles%27%3B%0A%0Aconst%20Car%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20const%20carProps%20%3D%20%7B%0A%20%20%20%20position%3A%20CAR_START_POSITION%2C%0A%20%20%20%20velocity%3A%20CAR_VELOCITY%2C%0A%20%20%20%20size%3A%20%7B%20width%3A%2050%2C%20height%3A%20100%20%7D%2C%0A%20%20%7D%3B%0A%0A%20%20return%20%7B%0A%20%20%20%20...carProps%2C%0A%20%20%20%20renderer%3A%20%3CCarDesign%20%7B...carProps%7D%20%2F%3E%2C%0A%20%20%7D%3B%0A%7D%3B%0A%0Aconst%20CarDesign%3A%20React.FC%20%3D%20%28%7B%20position%20%7D%29%20%3D%3E%20%7B%0A%20%20return%20%28%0A%20%20%20%20%3CView%20style%3D%7B%5BcarStyles.carBody%2C%20%7B%20left%3A%20position.x%2C%20top%3A%20position.y%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.carTop%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.wheelContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.wheel%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.wheel%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.carBottom%7D%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5BcarStyles.wheelContainer%2C%20%7B%20top%3A%200%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.wheel%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7BcarStyles.wheel%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20Car%3B\">\n                            <button class=\"copy-button\" data-label=\"import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\nimport { CAR_START_POSITION, CAR_VELOCITY } from &#039;..\/utils\/Constants&#039;;\nimport { carStyles } from &#039;..\/styles\/GameStyles&#039;;\n\nconst Car = () =&gt; {\n  const carProps = {\n    position: CAR_START_POSITION,\n    velocity: CAR_VELOCITY,\n    size: { width: 50, height: 100 },\n  };\n\n  return {\n    ...carProps,\n    renderer: &lt;CarDesign {...carProps} \/&gt;,\n  };\n};\n\nconst CarDesign: React.FC = ({ position }) =&gt; {\n  return (\n    &lt;View style={[carStyles.carBody, { left: position.x, top: position.y }]}&gt;\n      &lt;View style={carStyles.carTop} \/&gt;\n      &lt;View style={carStyles.wheelContainer}&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n      &lt;\/View&gt;\n      &lt;View style={carStyles.carBottom} \/&gt;\n      &lt;View style={[carStyles.wheelContainer, { top: 0 }]}&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n        &lt;View style={carStyles.wheel} \/&gt;\n      &lt;\/View&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default Car;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">entities\/Obstacle.tsx:<\/h4>\n\n\n\n<p>This file defines the <code>Obstacle<\/code> component, including its position, size, and color. The <code>Rectangle<\/code> component is used for rendering each obstacle.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-13\">import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\n\nconst Obstacle = (position, size = { width: 50, height: 50 }, color = &#039;red&#039;) =&gt; {\n  return {\n    position,\n    size,\n    color,\n    renderer: &lt;Rectangle position={position} size={size} color={color} \/&gt;,\n  };\n};\n\nconst Rectangle: React.FC = ({ position, size, color }) =&gt; {\n  return (\n    &lt;View\n      style={{\n        position: &#039;absolute&#039;,\n        left: position.x,\n        top: position.y,\n        width: size.width,\n        height: size.height,\n        backgroundColor: color,\n      }}\n    \/&gt;\n  );\n};\n\nexport default Obstacle;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%20from%20%27react%27%3B%0Aimport%20%7B%20View%20%7D%20from%20%27react-native%27%3B%0A%0Aconst%20Obstacle%20%3D%20%28position%2C%20size%20%3D%20%7B%20width%3A%2050%2C%20height%3A%2050%20%7D%2C%20color%20%3D%20%27red%27%29%20%3D%3E%20%7B%0A%20%20return%20%7B%0A%20%20%20%20position%2C%0A%20%20%20%20size%2C%0A%20%20%20%20color%2C%0A%20%20%20%20renderer%3A%20%3CRectangle%20position%3D%7Bposition%7D%20size%3D%7Bsize%7D%20color%3D%7Bcolor%7D%20%2F%3E%2C%0A%20%20%7D%3B%0A%7D%3B%0A%0Aconst%20Rectangle%3A%20React.FC%20%3D%20%28%7B%20position%2C%20size%2C%20color%20%7D%29%20%3D%3E%20%7B%0A%20%20return%20%28%0A%20%20%20%20%3CView%0A%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20position%3A%20%27absolute%27%2C%0A%20%20%20%20%20%20%20%20left%3A%20position.x%2C%0A%20%20%20%20%20%20%20%20top%3A%20position.y%2C%0A%20%20%20%20%20%20%20%20width%3A%20size.width%2C%0A%20%20%20%20%20%20%20%20height%3A%20size.height%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20color%2C%0A%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%2F%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20Obstacle%3B\">\n                            <button class=\"copy-button\" data-label=\"import React from &#039;react&#039;;\nimport { View } from &#039;react-native&#039;;\n\nconst Obstacle = (position, size = { width: 50, height: 50 }, color = &#039;red&#039;) =&gt; {\n  return {\n    position,\n    size,\n    color,\n    renderer: &lt;Rectangle position={position} size={size} color={color} \/&gt;,\n  };\n};\n\nconst Rectangle: React.FC = ({ position, size, color }) =&gt; {\n  return (\n    &lt;View\n      style={{\n        position: &#039;absolute&#039;,\n        left: position.x,\n        top: position.y,\n        width: size.width,\n        height: size.height,\n        backgroundColor: color,\n      }}\n    \/&gt;\n  );\n};\n\nexport default Obstacle;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">systems\/CollisionSystem.ts:<\/h4>\n\n\n\n<p>This system checks for collisions between the car and obstacles. If a collision is detected, the obstacle&#8217;s color is changed to black, indicating a hit.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-14\">const CollisionSystem = (entities) =&gt; {\n  const { car } = entities;\n\n  Object.keys(entities).forEach(key =&gt; {\n    const entity = entities[key];\n\n    if (key.startsWith(&#039;obstacle_&#039;)) {\n      const carWidth = car.size?.width ?? 0;\n      const carHeight = car.size?.height ?? 0;\n      const entityWidth = entity.size?.width ?? 0;\n      const entityHeight = entity.size?.height ?? 0;\n\n      if (car.position.x &lt; entity.position.x + entityWidth &amp;&amp;\n          car.position.x + carWidth &gt; entity.position.x &amp;&amp;\n          car.position.y &lt; entity.position.y + entityHeight &amp;&amp;\n          car.position.y + carHeight &gt; entity.position.y) {\n        entity.color = &#039;black&#039;;\n      }\n    }\n  });\n\n  return entities;\n};\n\nexport default CollisionSystem;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#const%20CollisionSystem%20%3D%20%28entities%29%20%3D%3E%20%7B%0A%20%20const%20%7B%20car%20%7D%20%3D%20entities%3B%0A%0A%20%20Object.keys%28entities%29.forEach%28key%20%3D%3E%20%7B%0A%20%20%20%20const%20entity%20%3D%20entities%5Bkey%5D%3B%0A%0A%20%20%20%20if%20%28key.startsWith%28%27obstacle_%27%29%29%20%7B%0A%20%20%20%20%20%20const%20carWidth%20%3D%20car.size%3F.width%20%3F%3F%200%3B%0A%20%20%20%20%20%20const%20carHeight%20%3D%20car.size%3F.height%20%3F%3F%200%3B%0A%20%20%20%20%20%20const%20entityWidth%20%3D%20entity.size%3F.width%20%3F%3F%200%3B%0A%20%20%20%20%20%20const%20entityHeight%20%3D%20entity.size%3F.height%20%3F%3F%200%3B%0A%0A%20%20%20%20%20%20if%20%28car.position.x%20%3C%20entity.position.x%20%2B%20entityWidth%20%26%26%0A%20%20%20%20%20%20%20%20%20%20car.position.x%20%2B%20carWidth%20%3E%20entity.position.x%20%26%26%0A%20%20%20%20%20%20%20%20%20%20car.position.y%20%3C%20entity.position.y%20%2B%20entityHeight%20%26%26%0A%20%20%20%20%20%20%20%20%20%20car.position.y%20%2B%20carHeight%20%3E%20entity.position.y%29%20%7B%0A%20%20%20%20%20%20%20%20entity.color%20%3D%20%27black%27%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%29%3B%0A%0A%20%20return%20entities%3B%0A%7D%3B%0A%0Aexport%20default%20CollisionSystem%3B\">\n                            <button class=\"copy-button\" data-label=\"const CollisionSystem = (entities) =&gt; {\n  const { car } = entities;\n\n  Object.keys(entities).forEach(key =&gt; {\n    const entity = entities[key];\n\n    if (key.startsWith(&#039;obstacle_&#039;)) {\n      const carWidth = car.size?.width ?? 0;\n      const carHeight = car.size?.height ?? 0;\n      const entityWidth = entity.size?.width ?? 0;\n      const entityHeight = entity.size?.height ?? 0;\n\n      if (car.position.x &lt; entity.position.x + entityWidth &amp;&amp;\n          car.position.x + carWidth &gt; entity.position.x &amp;&amp;\n          car.position.y &lt; entity.position.y + entityHeight &amp;&amp;\n          car.position.y + carHeight &gt; entity.position.y) {\n        entity.color = &#039;black&#039;;\n      }\n    }\n  });\n\n  return entities;\n};\n\nexport default CollisionSystem;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">systems\/MoveSystem.ts:<\/h4>\n\n\n\n<p>This system updates the position of the car and obstacles based on their velocity. It also handles the logic for regenerating obstacles when the car reaches the top of the screen.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-15\">import { updatePosition } from &#039;.\/Physics&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT } from &#039;..\/utils\/Constants&#039;;\nimport { generateObstacles } from &#039;..\/utils\/GameUtils&#039;;\n\nconst MoveSystem = (generateObstacles) =&gt; (entities, { time }) =&gt; {\n  const { delta } = time;\n\n  Object.keys(entities).forEach(key =&gt; {\n    const entity = entities[key];\n\n    if (entity.position &amp;&amp; entity.velocity) {\n      const newPosition = updatePosition(entity.position, entity.velocity, delta);\n\n      if (key === &#039;car&#039;) {\n        if (newPosition.y &lt;= 0) {\n          entity.position.y = SCREEN_HEIGHT - entity.size.height;\n          const newObstacles = generateObstacles(5);\n          Object.keys(newObstacles).forEach(obstacleKey =&gt; {\n            entities[obstacleKey] = newObstacles[obstacleKey];\n          });\n        } else {\n          entity.position.y = newPosition.y;\n        }\n\n        if (newPosition.x &gt;= 0 &amp;&amp; newPosition.x &lt;= SCREEN_WIDTH - entity.size.width) {\n          entity.position.x = newPosition.x;\n        }\n      }\n    }\n  });\n\n  return entities;\n};\n\nexport default MoveSystem;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20%7B%20updatePosition%20%7D%20from%20%27.%2FPhysics%27%3B%0Aimport%20%7B%20SCREEN_WIDTH%2C%20SCREEN_HEIGHT%20%7D%20from%20%27..%2Futils%2FConstants%27%3B%0Aimport%20%7B%20generateObstacles%20%7D%20from%20%27..%2Futils%2FGameUtils%27%3B%0A%0Aconst%20MoveSystem%20%3D%20%28generateObstacles%29%20%3D%3E%20%28entities%2C%20%7B%20time%20%7D%29%20%3D%3E%20%7B%0A%20%20const%20%7B%20delta%20%7D%20%3D%20time%3B%0A%0A%20%20Object.keys%28entities%29.forEach%28key%20%3D%3E%20%7B%0A%20%20%20%20const%20entity%20%3D%20entities%5Bkey%5D%3B%0A%0A%20%20%20%20if%20%28entity.position%20%26%26%20entity.velocity%29%20%7B%0A%20%20%20%20%20%20const%20newPosition%20%3D%20updatePosition%28entity.position%2C%20entity.velocity%2C%20delta%29%3B%0A%0A%20%20%20%20%20%20if%20%28key%20%3D%3D%3D%20%27car%27%29%20%7B%0A%20%20%20%20%20%20%20%20if%20%28newPosition.y%20%3C%3D%200%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20entity.position.y%20%3D%20SCREEN_HEIGHT%20-%20entity.size.height%3B%0A%20%20%20%20%20%20%20%20%20%20const%20newObstacles%20%3D%20generateObstacles%285%29%3B%0A%20%20%20%20%20%20%20%20%20%20Object.keys%28newObstacles%29.forEach%28obstacleKey%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20entities%5BobstacleKey%5D%20%3D%20newObstacles%5BobstacleKey%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20entity.position.y%20%3D%20newPosition.y%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20if%20%28newPosition.x%20%3E%3D%200%20%26%26%20newPosition.x%20%3C%3D%20SCREEN_WIDTH%20-%20entity.size.width%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20entity.position.x%20%3D%20newPosition.x%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%29%3B%0A%0A%20%20return%20entities%3B%0A%7D%3B%0A%0Aexport%20default%20MoveSystem%3B\">\n                            <button class=\"copy-button\" data-label=\"import { updatePosition } from &#039;.\/Physics&#039;;\nimport { SCREEN_WIDTH, SCREEN_HEIGHT } from &#039;..\/utils\/Constants&#039;;\nimport { generateObstacles } from &#039;..\/utils\/GameUtils&#039;;\n\nconst MoveSystem = (generateObstacles) =&gt; (entities, { time }) =&gt; {\n  const { delta } = time;\n\n  Object.keys(entities).forEach(key =&gt; {\n    const entity = entities[key];\n\n    if (entity.position &amp;&amp; entity.velocity) {\n      const newPosition = updatePosition(entity.position, entity.velocity, delta);\n\n      if (key === &#039;car&#039;) {\n        if (newPosition.y &lt;= 0) {\n          entity.position.y = SCREEN_HEIGHT - entity.size.height;\n          const newObstacles = generateObstacles(5);\n          Object.keys(newObstacles).forEach(obstacleKey =&gt; {\n            entities[obstacleKey] = newObstacles[obstacleKey];\n          });\n        } else {\n          entity.position.y = newPosition.y;\n        }\n\n        if (newPosition.x &gt;= 0 &amp;&amp; newPosition.x &lt;= SCREEN_WIDTH - entity.size.width) {\n          entity.position.x = newPosition.x;\n        }\n      }\n    }\n  });\n\n  return entities;\n};\n\nexport default MoveSystem;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">systems\/Physics.ts:<\/h4>\n\n\n\n<p>This file includes physics-related functions, such as updating an entity&#8217;s position based on its velocity and the time elapsed since the last update.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-16\">interface Position {\n  x: number;\n  y: number;\n}\n\ninterface Velocity {\n  x: number;\n  y: number;\n}\n\nexport const updatePosition = (position: Position, velocity: Velocity, deltaTime: number): Position =&gt; {\n  return {\n    x: position.x + velocity.x * deltaTime,\n    y: position.y + velocity.y * deltaTime,\n  };\n};<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#interface%20Position%20%7B%0A%20%20x%3A%20number%3B%0A%20%20y%3A%20number%3B%0A%7D%0A%0Ainterface%20Velocity%20%7B%0A%20%20x%3A%20number%3B%0A%20%20y%3A%20number%3B%0A%7D%0A%0Aexport%20const%20updatePosition%20%3D%20%28position%3A%20Position%2C%20velocity%3A%20Velocity%2C%20deltaTime%3A%20number%29%3A%20Position%20%3D%3E%20%7B%0A%20%20return%20%7B%0A%20%20%20%20x%3A%20position.x%20%2B%20velocity.x%20%2A%20deltaTime%2C%0A%20%20%20%20y%3A%20position.y%20%2B%20velocity.y%20%2A%20deltaTime%2C%0A%20%20%7D%3B%0A%7D%3B\">\n                            <button class=\"copy-button\" data-label=\"interface Position {\n  x: number;\n  y: number;\n}\n\ninterface Velocity {\n  x: number;\n  y: number;\n}\n\nexport const updatePosition = (position: Position, velocity: Velocity, deltaTime: number): Position =&gt; {\n  return {\n    x: position.x + velocity.x * deltaTime,\n    y: position.y + velocity.y * deltaTime,\n  };\n};\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h4 class=\"wp-block-heading\">systems\/TouchControlSystem.ts<\/h4>\n\n\n\n<p>This system handles touch inputs, allowing the player to control the car&#8217;s horizontal movement. When the player touches the screen, the car&#8217;s velocity is updated based on the touch position relative to the screen&#8217;s center.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-17\">import { SCREEN_WIDTH } from &#039;..\/utils\/Constants&#039;;\n\nconst TouchControlSystem = (entities, { touches }) =&gt; {\n  touches.filter(t =&gt; t.type === &quot;press&quot;).forEach(t =&gt; {\n    const { pageX } = t.event;\n    const center = SCREEN_WIDTH \/ 2;\n    const direction = pageX &lt; center ? -0.05 : 0.05;\n    entities.car.velocity.x = direction;\n  });\n\n  return entities;\n};\n\nexport default TouchControlSystem;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20%7B%20SCREEN_WIDTH%20%7D%20from%20%27..%2Futils%2FConstants%27%3B%0A%0Aconst%20TouchControlSystem%20%3D%20%28entities%2C%20%7B%20touches%20%7D%29%20%3D%3E%20%7B%0A%20%20touches.filter%28t%20%3D%3E%20t.type%20%3D%3D%3D%20%22press%22%29.forEach%28t%20%3D%3E%20%7B%0A%20%20%20%20const%20%7B%20pageX%20%7D%20%3D%20t.event%3B%0A%20%20%20%20const%20center%20%3D%20SCREEN_WIDTH%20%2F%202%3B%0A%20%20%20%20const%20direction%20%3D%20pageX%20%3C%20center%20%3F%20-0.05%20%3A%200.05%3B%0A%20%20%20%20entities.car.velocity.x%20%3D%20direction%3B%0A%20%20%7D%29%3B%0A%0A%20%20return%20entities%3B%0A%7D%3B%0A%0Aexport%20default%20TouchControlSystem%3B\">\n                            <button class=\"copy-button\" data-label=\"import { SCREEN_WIDTH } from &#039;..\/utils\/Constants&#039;;\n\nconst TouchControlSystem = (entities, { touches }) =&gt; {\n  touches.filter(t =&gt; t.type === &quot;press&quot;).forEach(t =&gt; {\n    const { pageX } = t.event;\n    const center = SCREEN_WIDTH \/ 2;\n    const direction = pageX &lt; center ? -0.05 : 0.05;\n    entities.car.velocity.x = direction;\n  });\n\n  return entities;\n};\n\nexport default TouchControlSystem;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<p>By understanding the functionality and purpose of each of these files, you can gain insights into how the car riding app works and explore modifications or enhancements to tailor the game to your preferences.\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Creating a car riding app in React Native is a great way to learn game development on mobile platforms. By leveraging React Native&#8217;s capabilities and the <code>react-native-game-engine<\/code>, you can create engaging games with efficient performance. Remember to continually test on both iOS and Android platforms to ensure compatibility and optimize the user experience.\n\n\n\n<p>For those interested in exploring the complete code and trying out the app, visit the GitHub repository at <code><a href=\"https:\/\/github.com\/mesepith\/CarSimulator\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/mesepith\/CarSimulator<\/a><\/code>. This example serves as a foundation, encouraging further exploration and customization to create more complex and engaging games.\n","protected":false},"excerpt":{"rendered":"<p>Creating a car riding game in React Native can be an exciting project, blending the realms of app development and game design. In this article, [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[58,54,56],"class_list":["post-350","post","type-post","status-publish","format-standard","hentry","category-react-native-app","tag-android-ios-app","tag-react-native","tag-react-native-game-engine"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":8,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions"}],"predecessor-version":[{"id":360,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions\/360"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}