From the course: React Native Essential Training

The game component with a random target - React Native Tutorial

From the course: React Native Essential Training

Start my 1-month free trial

The game component with a random target

“

- [Instructor] Let's start on the game logic. First of all, it might be a good idea to have a game component and make the app component, render that game component and put all the logic related to a single game inside the game component. This way we can have the app component reset the game component at any point by just remounting another game component. Which will be handy when we need to replay the game. So I'm going to copy the content of this file, this will be our game component and in the app component, I'll just render this game component. I don't need any children here so I'm going to make it self-closing and we'll import game from the same level here, game digests. It's been a longer need the view or actually the style sheet. I don't need anything from react native. So, this is just rendering the game component. Again, we'll come back to this app component when we need to and you'll see why this decision is a good one to start with every time you have a case like this. Also, in here, we can have some default. Any properties that we want to pass to the game component can be controlled from within the app component itself. So far if we don't know these properties, we'll come back here once we do. Alright, let's create the game component, Game.JS, this is the exact app component that we started with, but we'll name it game. And what I want to do first in this game component is to specify the target summits of. The initial number that we want to challenge the players to find a sum for. So let's create a text component in here and inside the text component, I'll just have a placeholder of 42. We need to import text from react native, let's test. So you'll see the 42 appearing here in the corner. Let's actually give it some styles. We'll do style equal styles.target. This is a word target dev. I am not a CSS expert, but I'll do some minimal styling in this app just to get things to look decent for now. I'll fast forward to the styles that I came up with here and explain them real quick. I've given the container a padding top of 30, so that we keep out of the way of the phone controls here. I gave the target a bigger font and a different background color, and a little bit of horizontal margin using this margin horizontal property, which is an example of a layout property that is introduced just in react native and it's equivalent to setting both margin left and margin right. So you notice how I get the styling out of the way before I actually start thinking about the logic of this target value. Which is by the way, right now. So instead of 42, we need a dynamic value that is generated for every game. So when I initialize a game, I need a private property for this game with a randomly selected target. So when I need something private to the game instance itself, that's the sign that it should go on the instance of the property directly. For example, we'll call it target, so this.target. First I don't have a target, so let's go ahead and just generate the random target. So target equal, we'll do math.random and this gives me from zero to 0.999, so let's do a target between 10 and say 50. You don't want to target under 10 because that would be easy to solve. So we'll do 10 plus 40 times math.random and we'll floor this so that we don't have any fractions. And this should actually work. Let's test it. 46 32, 25, excellent. In the next this movie, we'll generate the random numbers that will potentially sum to this target.

Contents