Mẫu Trò chơi
Roofrail Endless Runner Game App
An Expo / React Native endless runner: swipe across three lanes of a rail yard at dusk, jump barriers, slide under signals, collect coins for outfits, finish missions and climb a weekly board. Plays on sample data out of the box.
- 10 màn hình
- iOS & Android
- Dữ liệu mẫu
- Cập nhật 29 thg 10, 2026
- Bản phát hành đã kiểm tra
Sao chép miễn phí · Toàn bộ mã nguồn · Không cần thẻ
Màn hình
6 màn hình từ ứng dụng thực tế.
Có gì bên trong
- Playable in the first second: the game is the home screen, and the first swipe starts the run
- A pure, tested engine: a seeded track with a free lane in every row, jumps, slides, side bumps, a 3-minute speed ramp
- The yard at dusk, freight cars, signals and eight runners, all drawn in code with react-native-svg
- Game feel: hit-stop, screen shake, a crash flash, particles, score pops and haptics, all calm under reduce motion
- Missions counted from real runs, a 7-day daily reward, and an outfit shop paid in coins
- A weekly board of rivals drawn in their outfits, and the phone's 10 longest runs; on Supabase the server times each run
Giới thiệu mẫu
Overview
Roofrail is an endless runner built on Expo SDK 57 and React Native with the FluxNative kernel. The first screen is the game: a rail yard at dusk seen from behind the runner, three tracks running to the horizon, and the first swipe starts the run. Swipe left or right to change lane, up to jump a barrier, down to slide under a signal gantry; freight cars take a lane change. The yard speeds up from 9 to 18 m/s over three minutes.
With .env blank the game runs in sample mode: a sample player with a best of 1,842 m, 3,120 coins, two outfits, ten recent runs, missions half done and day 3 of the daily reward waiting. Everything the player does is kept on the device. Setting the Supabase values turns on the weekly board; setting the RevenueCat keys sells Plus.
Key features
The game: ready, running, paused and over on one full-bleed screen, with the distance, coins and best in the HUD and a medal for each distance band at the end
Rules in a pure engine (engine.ts), unit-tested: every row of obstacles leaves a passable lane, the first hazard is more than 1.5 s away, walls of three only after 400 m
Shop: eight outfits, each with its own headwear (a cap, a beanie, headphones, the hood up, a bucket hat, a headlamp, a visor, goggles), some with a backpack, a scarf or a light trail, bought with coins; the runner shown big on the yard
Missions: three at a time from real runs (jump 12 barriers in one run, collect 300 coins, run 500 m without jumping…), each a step harder the next time
Daily reward: a 7-day ladder claimed once per device date; a skipped day waits instead of starting over
Leaderboard: this week's board, rivals drawn as runners in their outfits and your place among them (a sample crew until Supabase is connected), and the phone's ten longest runs
How to play: the three swipes drawn with the game's own sprites
Settings: sound effects, vibration, reduce motion, Plus, How to play, About, Terms, Privacy and Delete my data
Screens
10 screens: the game (ready, running, paused, over), Shop, Missions, Leaderboard, How to play, Roofrail Plus, Settings, About, Terms of Use and Privacy Policy. One stack with no tab bar; the pushed screens follow the iOS 26 look in light and dark, the game keeps its dusk palette in both.
Game and backend
One requestAnimationFrame loop while running, a pure step(run, dt) with dt clamped to 0.05 s, seeded randomness, swipes through PanResponder (touch, mouse and the preview's taps)
The game folder reads app data through one hook (useGameProgress), so it lifts into another app
Weekly board on Supabase: each player reads only their own rows, one anonymous sign-in per device, names made of the game's words (no free text to moderate)
The server times every run: start_run records the start, and submit_score takes each run once and refuses a distance its time cannot reach
The board's distance rule is the game's own speed curve, held to the engine by tests; nine sample runners fill the first week
Delete my data clears the device and removes the player's anonymous sign-in, name and runs from the board
Monetisation
Roofrail Plus is one non-consumable in-app purchase sold through the App Store and Google Play with RevenueCat (react-native-purchases): every outfit, including one only Plus has, and double coins on every run. Access comes from the plus entitlement only, with Restore purchase on the Plus screen. Without RevenueCat keys the Plus screen shows the intended price marked as a sample, says purchases open in the App Store version, and never grants access. No ads, no loot boxes, nothing that pays out.
Setup
Connect Supabase, apply the three migrations and allow anonymous sign-ins for the weekly board
Connect RevenueCat with a roofrail_plus product and a plus entitlement to sell Plus
Reskin the yard, the runner and the outfits in palette.ts, outfits.ts and art.tsx
Replace the sample Terms of Use and Privacy Policy with your own
Bạn nhận được
- Toàn bộ mã nguồn — Expo và React Native bằng TypeScript, là một ứng dụng trong không gian làm việc của bạn.
- Xem trước trực tiếp — thử mọi thay đổi ngay trên trình duyệt hoặc điện thoại.
- Bản phát hành đã kiểm tra — biên dịch được và mọi màn hình mở không lỗi.
- Trợ lý AI — đổi mọi thứ bằng chat; mỗi thay đổi dùng credit.
- Bản dựng và tải lên cửa hàng — bản dựng iOS và Android, gửi lên App Store và Google Play từ Xuất bản.
- Sao chép không tốn credit — bản thân việc sao chép không mất credit nào.
Được làm bằng phiên bản FluxNative cũ hơn. Bản sao vẫn chạy bình thường; hãy nhờ agent cập nhật cho ngôn ngữ, tiền tệ và liên kết Giới thiệu của ứng dụng.
Bạn cần
- Tài khoản FluxNative — gói Free chứa tối đa 2 ứng dụng.
- Không cần backend để bắt đầu — chạy bằng dữ liệu mẫu cho đến khi bạn kết nối backend của mình.
- Gói Creator trở lên — để dựng bản native và tải lên cửa hàng.
- Tài khoản cửa hàng — Apple Developer Program (99 USD/năm) và Google Play (25 USD một lần), để xuất bản.
Mã nguồn có gì
- màn hình
- 10
- file trong bản sao
- 339
- dòng code viết riêng cho ứng dụng
- 8.012
- component giao diện có sẵn
- 139
Ngôn ngữ trong ứng dụng: Tiếng Anh và Tiếng Việt
Công nghệ
- Expo SDK
- 57.0.22
- React Native
- 0.86.3
- React
- 19.2.8
- TypeScript
- 6.0.3
- Expo Router
- 57.0.21
- Supabase JS
- 2.112.3
- RevenueCat
- 10.9.1
Từ package.json của bản phát hành này.
Hệ thống thiết kế
- Tiêu đề
- Phông hệ thống
- Nội dung
- Phông hệ thống
- Chỉ chế độ tối
- Liquid Glass
- Nút bo tròn
- Thẻ nổi
Thiết lập sau khi sao chép
Bản sao của bạn mở cùng trợ lý AI đã xây nó. Làm các bước theo thứ tự: kết nối những gì từng bước yêu cầu trong Máy chủ, rồi gửi từng câu lệnh.
Connect Supabase for the weekly board
Server › Backend › Supabase. Apply the three migrations in supabase/migrations in name order, allow anonymous sign-ins in the Supabase dashboard, and write the project URL and anon key to .env.
Câu lệnh cho AIConnect this game to my Supabase project from Server › Backend › Supabase. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Apply the three migrations in supabase/migrations in name order: 20261027090000_weekly_board.sql, 20261027090100_weekly_board_crew.sql, then 20261027120000_weekly_board_server_timed.sql. Remind me to turn on Authentication › Sign In / Providers › Allow anonymous sign-ins in the Supabase dashboard, because each device signs in anonymously the first time it starts a run. Then check that the Leaderboard opens on This week with the nine sample runners, and that a finished run appears there under the device's board name.
Sell Roofrail Plus
Server › Monetization: a non-consumable roofrail_plus in App Store Connect and Google Play, the RevenueCat entitlement plus and the offering default with a Lifetime package, then the public SDK keys in .env.
Câu lệnh cho AISet up Roofrail Plus through RevenueCat from Server › Monetization. Create a non-consumable in-app purchase with the product ID roofrail_plus in App Store Connect and a one-time product roofrail_plus in Google Play, an entitlement named plus that holds them, and the current offering default with a Lifetime package of it. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env, and set PLAN_PREVIEW in src/services/iap/index.ts to the price I choose. Tell me how to test a sandbox purchase and Restore purchase on a device build.
Reskin the yard and the runner
The world's colours are in src/features/game/palette.ts, the outfits and their coin prices in outfits.ts, every drawing in art.tsx and runner.tsx, the logotype in assets/logo.svg. Keep outfit ids stable once players own them.
Câu lệnh cho AIReskin Roofrail for my game. Change the world's colours in src/features/game/palette.ts to my palette, rename and recolour the eight outfits in src/features/game/outfits.ts (keep their ids), and redraw the logotype in assets/logo.svg with my game's name, then render assets/logo.png from it at 1080 px wide (src/features/game/Logo.tsx shows it). Keep the lime coin colour for coins only. Show me the ready screen and the shop after the change.
Use your own Terms and Privacy Policy
Set EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_PRIVACY_POLICY_URL in .env, or replace the sample text of the in-app pages in src/features/legal/copy.ts with your studio's own.
Câu lệnh cho AIReplace Roofrail's sample legal text. Ask me for my studio's name and contact email, then rewrite src/features/legal/copy.ts (Terms of Use and Privacy Policy) for my studio, keeping what the game really does: progress on the device, the weekly board's anonymous sign-in and run data when Supabase is connected, Plus through the App Store and Google Play, and Delete my data. If I already host the pages, write their addresses to EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_PRIVACY_POLICY_URL in .env instead.
Cách dùng mẫu này
- Dùng mẫu để có một bản sao chỉnh sửa được, kèm mã nguồn, trong không gian làm việc của bạn (Mẫu).
- Nhờ trợ lý AI thay đổi những gì bạn muốn, bằng lời thường (Làm việc với trợ lý).
- Xem thử từng thay đổi trong bản xem trước trực tiếp, hoặc trên điện thoại (Xem trước).
- Từ gói Creator trở lên, build cho iOS và Android rồi gửi lên các cửa hàng (Tổng quan phát hành).
Giấy phép và hỗ trợ
Giấy phép
Ứng dụng được tạo cho bạn là của bạn; mã của mẫu vẫn thuộc InspireUI và được cấp phép để dùng trong các ứng dụng của bạn (Điều khoản › Sở hữu trí tuệ của chúng tôi).
Trợ giúp
- Hướng dẫn về template, trợ lý và xuất bản.
- Liên hệ hỗ trợ từ Trợ giúp; thường phản hồi trong 1–2 ngày làm việc.
- Trong bản sao của bạn, hỏi trợ lý AI về bất kỳ màn hình hay tệp nào.
Do FluxNative tạo
Chính sách hỗ trợCâu hỏi
Có miễn phí không?
Sao chép template miễn phí không mất gì, kể cả credit; template Premium mua một lần cho mỗi website. Đổi bằng chat và bản dựng dùng credit.
Tôi sở hữu gì?
Bạn sở hữu ứng dụng được tạo cho bạn. Mã của template vẫn thuộc InspireUI và được cấp phép dùng trong ứng dụng của bạn (Điều khoản › Quyền sở hữu trí tuệ của chúng tôi).
Tôi có cần biết code không?
Không. Nhờ trợ lý đổi bằng lời thường; có toàn bộ mã nguồn khi bạn cần.
Có kèm backend không?
Không. Ứng dụng đầy đủ nêu backend cần dùng và bạn kết nối backend của mình trong Máy chủ; bản thiết kế chạy bằng dữ liệu mẫu.
Tôi đổi được thiết kế không?
Được. Tab Thiết kế đặt màu thương hiệu, màu sắc, phông chữ và bo góc mà không tốn credit; trợ lý đổi phần còn lại.
Cần gói nào để xuất bản?
Gói Creator trở lên dựng và tải lên cửa hàng, bằng tài khoản Apple và Google của bạn. Ứng dụng từ template Premium dựng được ở mọi gói khi đã kết nối website.
Tôi tải được mã nguồn không?
Được, bằng Tải mã nguồn hoặc Đẩy lên GitHub, khi không gian làm việc của bạn đã mua gói, credit hoặc template trả phí. Ứng dụng từ template Premium cũng cần kết nối website.
Nếu nó được tạo bằng FluxNative cũ hơn thì sao?
Bản sao của bạn vẫn chạy bình thường. Nhờ trợ lý cập nhật để có tính năng mới như ngôn ngữ và tiền tệ của ứng dụng; đó là bước thiết lập cuối.
Sẵn sàng biến mẫu này thành ứng dụng của bạn?
Bắt đầu từ Roofrail Endless Runner Game App và thay đổi mọi thứ qua chat. Bản sao của bạn có đầy đủ mã nguồn.
Sao chép miễn phí. Không cần thẻ tín dụng.