The Lewpen Dodge game is a classic. The point of the game is to see how a player handles stress and navigates a tricky landscape of obstacles while staying focused on goal.
Since Lewpen pulled the game off their site, I decided to re-write it in React Native for mobile playing purpose. This game can be compiled for both Android and iOS natively. Fork away. :)
Objective: The main objective of Dodge is to score as many points as possible by making your blue circle collide with the blue box.
Movement: You can move the blue circle by dragging it across the screen with your finger. The circle will follow the movement of your finger.
Scoring: Each time the blue circle collides with the blue box, you earn 10 points. When this happens, the blue box will randomly reposition itself somewhere else on the screen.
Avoid the Red Balls: While you are chasing the blue box, you need to avoid colliding with the red balls. These balls bounce around the screen and if they collide with the blue circle, you will lose 5 points.
Increasing Difficulty: Every time the blue circle collides with the blue box, a new red ball is added to the screen, increasing the difficulty of the game. This continues until there are a maximum of 10 red balls on the screen.
Haptic Feedback: When the blue circle collides with a red ball, your phone will vibrate briefly and the screen will flash red for a moment to signify the collision and point loss.
Continuous Play: The game continues indefinitely, or until you decide to stop playing. The goal is to score as high as possible without losing too many points to red ball collisions.
lewpen-fixed.mp4
Download the APK here.
Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.
First, you will need to build the project:
# using npm
yarn install
Then you can run the app
# Using Yarn
yarn android
# Using Yarn
yarn ios
If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
Now that you have successfully run the app, let's modify it.
-
Open
App.tsx
in your text editor of choice and edit some lines. -
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!
For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!