Cocktail Beach Documentation by slotgen

Cocktail Beach

Created: 05/08/2026
By: Slotgen
Email: contact@slotgen.com

Thank you for purchasing my code. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. About the Game
  2. Feature List
  3. Package Contents
  4. Technical Requirements
  5. Project Structure
  6. Event Sheets & Game Logic
  7. Modifying Game Variables
  8. Node.js Backend Setup
  9. Backend API Reference
  10. Connecting the Game to the Backend
  11. Change Graphics
  12. Upload to Your Website
  13. Construct File (.c3p)
  14. Export as APK / Other Platforms
  15. Embed HTML5 Game WordPress Plugin
  16. Troubleshooting
  17. Extended License

A) About the Game - top

Cocktail Beach is an HTML5 slot machine game built with Construct 3, shipped together with an optional Node.js + MongoDB backend for server-side game logic. It is a 5-reel, 3-row video slot with 20 fixed paylines, a scatter-triggered free spins feature, cascading (drop) symbols, and Big Win / Mega Win / Super Mega Win celebration sequences.

Out of the box the game runs 100% in the browser (all logic client-side) — just upload the HTML5 export and play. For operators who want server-authoritative gameplay, the included backend moves spin outcomes, balances, RTP control and history onto your own server with persistent MongoDB storage.

B) Feature List - top

Game (frontend):

Node.js backend (optional, included):

C) Package Contents - top

D) Technical Requirements - top

To play / host the game (HTML5 export, standalone):

To run the Node.js backend (optional):

To edit the game (.c3p source):

E) Project Structure - top

Construct 3 project (.c3p):

ItemDescription
Layouts → mainThe game screen. Contains the reel grid, buttons (spin, turbo, auto spin, bet +/−), paytable, history panel, free-spin choice screen and menu.
Layouts → obsAn off-screen “object bank” layout that holds object instances so they can be created at runtime.
Event sheets → Main / BigWin / HistoryAll game logic — see section F.
Object typesAll sprites, texts and UI objects, organised in folders (BigWin, History). Families are used for symbols, buttons and big-win effects.
Sounds / Music / FontsAll audio as .webm (opus) and the Carre-JWja.ttf display font.

HTML5 export (inside HTML file/Cocktail Beach.zip):

File / folderDescription
index.html, data.json, style.cssEntry point, exported project data and page styling.
scripts/Engine and loader scripts generated by the Construct 3 exporter (c3runtime.js, main.js, workers, support checks).
sw.js, offline.json, appmanifest.jsonService worker, offline cache list and web app manifest (PWA/offline support).
images/, media/, fonts/, icons/Sprite sheets, audio/music, font and app icons.

Node.js backend (inside CocktailBeach_Backend.zip):

File / folderDescription
server.jsExpress server entry point.
services/slotEngine.jsThe slot engine: reels, paylines, payouts, cascade multipliers (x1–x40) and free-spin packages.
services/gameService.jsBusiness logic: sessions, balances, transactions, free-spin state.
routes/gameRoutes.jsREST API endpoints — see section I.
models/Mongoose models: User, GameSession, GameConfig.
config/database.jsMongoDB connection.
public/scripts/gameAPI.js, c3-gameapi-helper.jsClient-side helpers for calling the API from Construct 3.
public/test-api.html, debug-viewer.htmlAPI test page and spin-log debug viewer.
CONSTRUCT3_INTEGRATION.md, GAMEAPI_INTEGRATION_GUIDE.mdStep-by-step integration guides.
.env.example, package.jsonEnvironment template and dependencies.

A note on the exported scripts: the files in the HTML export’s scripts/ folder plus sw.js are machine-generated by Construct 3’s official exporter and are not hand-written code. The original, readable source of the game is the included Cocktail Beach.c3p project (visual event sheets), and the backend ships as plain, readable Node.js source files.

F) Event Sheets & Game Logic - top

All game logic is implemented visually in three event sheets, organised into named groups:

Main (core gameplay):

BigWin: win/bet ratio check against PerBW/PerMG/PerSMG thresholds, then the celebration sequence (darkened background, coin shower, animated counters, timed tier transitions).

History: records every spin (time, transaction id, bet, win, profit) into arrays, renders the paged history list and the per-spin detail view.

There is also a small amount of JavaScript inside events (exported as scripts/project/javaScriptInEvents.js), used for helper calculations; it is readable in the export and editable inside the event sheets.

G) Modifying Game Variables - top

Open the .c3p in Construct 3, open the Main event sheet, and edit the global variables at the top of the sheet (right-click a variable → Edit). The most useful ones:

VariableDefaultWhat it does
balance1000Player’s starting credit (standalone mode; in backend mode the server owns the balance).
BaseBet20Base bet amount. Total bet = BaseBet × BetLevel.
BetLevel1Starting bet level (changed in-game with the +/− buttons).
PayoutA … PayoutHe.g. 3|10|50Payout table per symbol, formatted 3-of-a-kind|4-of-a-kind|5-of-a-kind. A is the lowest symbol, H the highest (e.g. PayoutH = 50|250|2500). The in-game paytable updates automatically.
lines20 patternsThe paylines. Each payline is 5 grid positions (1–15, reading the 5×3 grid) separated by commas; paylines are separated by |.
ReelSpeed1500How fast symbols fall (pixels/second). Higher = faster spins.
Turbo / DropMulti1 / 1Turbo speed multiplier and starting cascade multiplier.
distanceV / distanceH140Symbol spacing — only change if you resize the symbol art.
xTop, yTop, yBot77 / 420 / 980Reel grid geometry (left edge, top row Y, bottom row Y).

In the BigWin event sheet: PerBW (20), PerMG (35), PerSMG (50) are the win÷bet thresholds for Big / Mega / Super Mega Win, and timechange (8,5,6) controls the timing of the tier transitions.

When running with the backend, the equivalent settings (paytables, RTP, bet limits, free-spin packages) live in the GameConfig MongoDB collection and .env — see the backend’s README.md.

H) Node.js Backend Setup - top

The backend is optional — the game plays fully client-side without it. Set it up when you want server-authoritative spins, real balances and persistent history.

Step 1 — Install prerequisites. Install Node.js 18+ and either local MongoDB Community Server or create a free MongoDB Atlas cluster.

Step 2 — Unzip and install dependencies.

unzip CocktailBeach_Backend.zip -d cocktailbeach-backend
cd cocktailbeach-backend
npm install

Step 3 — Configure environment. Copy .env.example to .env and edit:

MONGODB_URI=mongodb://localhost:27017/cocktailbeach
PORT=3000
NODE_ENV=development
INITIAL_BALANCE=10000
MIN_BET=1
MAX_BET=1000

Step 4 — Start the server.

npm start        # production
npm run dev      # development (auto-restart with nodemon)

The API is now available at http://localhost:3000. Open public/test-api.html to try every endpoint from the browser, and public/debug-viewer.html to inspect logged spins (enable with DEBUG_SPINS=true in .env).

I) Backend API Reference - top

MethodEndpointDescription
POST/api/game/initCreate/load a user session and return starting balance and config.
POST/api/game/spinExecute a spin server-side; returns the symbol grid, wins and new balance.
POST/api/game/spin-cascadeResolve the next cascade/drop step with its multiplier.
GET/api/game/balance/:userIdCurrent balance for a user.
GET/api/game/configActive game configuration (symbols, paylines, RTP, bet limits).
GET/api/game/free-spin-packagesList the free-spin packages (20 spins × up to x5, 10 × up to x20, 5 × up to x40).
POST/api/game/select-packageChoose a free-spin package when scatters hit.
GET/api/game/free-spin-session/:userIdState of the current free-spin session.
POST/api/game/end-free-spin-sessionClose the free-spin session and credit winnings.
GET/api/game/history/:userIdPaged spin/transaction history.
GET/api/game/stats/:userIdAggregate statistics for a user.
GET/api/game/debug/*Debug endpoints: latest spin log, log by transaction id, log list.

Exact request/response payloads with examples are documented in GAMEAPI_INTEGRATION_GUIDE.md inside the backend zip.

J) Connecting the Game to the Backend - top

The shipped Cocktail Beach.c3p runs standalone (client-side logic). To drive it from the backend:

  1. Add the helper scripts public/scripts/gameAPI.js and c3-gameapi-helper.js from the backend zip to your Construct 3 project (Project → Scripts).
  2. Point the API base URL in gameAPI.js at your server (e.g. https://yourdomain.com:3000).
  3. Replace the client-side outcome generation in the Spin Mechanics group with calls to /api/game/spin and /api/game/spin-cascade, and read balances from the server instead of the balance variable.
  4. Follow CONSTRUCT3_INTEGRATION.md in the backend zip — it walks through this step by step with event-sheet examples and covers session init, spins, cascades, free-spin packages and history.

Remember to enable CORS for your game’s domain (the backend ships with the cors middleware enabled) and to serve both game and API over HTTPS in production.

K) Change Graphics - top

First, you open the .c3p file and determine the object to change the graphics.

Then follow the instructions below:


Select the image to replace stored in your folder.

Tip: keep replacement images close to the original dimensions (symbols are spaced 140px apart on a 720×1280 layout). If you change symbol sizes, adjust distanceV, distanceH, xTop, yTop and yBot in section G.

L) Upload to Your Website - top

You need hosting to upload it and share the link with your friend to play.

Some free hosting:

You can unzip HTML file/Cocktail Beach.zip and upload its contents directly to your website. I would suggest using FileZilla for that. Login to your FTP account of your domain, create a new folder for the game and move all exported files onto the server in FileZilla.

Step 1: (Only if re-exporting yourself) From the Construct 3 window, click on the "Menu" button then select "Export" or press F6. Then select "Web".

Step 2: After the file has been downloaded, extract it.

Step 3: Open the FileZilla window and log in. You need to have the following information: Host, Username, Password; in the Port section type 21. Then right click and select Create Directory.

Finally, you proceed to import the previously extracted files. Then go to your server link and add the path "/game-name" after it.

Note: static hosting is enough for the standalone game. The Node.js backend needs a host that can run Node processes (VPS, Render, Railway, etc.) — see section H.

M) Construct File (.c3p) - top

The Construct 3 file (.c3p) contains all sources and game mechanics and is included in this package for all buyers. Open it in the editor at https://editor.construct.net/ (install the free “Better Outline” addon first — see Technical Requirements).
In order to export your game, you are required to get a Construct 3 license. You can get the license here: https://www.construct.net/en/make-games/buy-construct

N) Export as APK / Other Platforms - top

Step 1.

Open the .c3p in the editor.

Step 2.

Go to Menu -> Project -> Export

Step 3.

Choose Android (Cordova), iOS (Cordova) or Web (HTML5) according to which platform you want to export to.

O) Embed HTML5 Game WordPress Plugin - top

Using the Embed HTML5 Game plugin, you can easily embed your HTML5 game into your WordPress post, page, or widget. Embed HTML5 Game can make your HTML5 game fit on any screen size.

Shortcode output is based on iframe, so your embedded content will be supported on any modern browser.

Installation:

Screenshots:

P) Troubleshooting - top

1. Black screen / nothing loads when I double-click index.html.
Construct 3 games cannot run from the file:// protocol — browsers block the game’s data requests for security reasons. Always run the game from a web server. For quick local testing use one of these in the game folder:

# Python
python -m http.server 8000
# then open http://localhost:8000

# Node
npx http-server -p 8000

or use XAMPP/WAMP, or the “Live Server” extension in VS Code.

2. CORS errors in the browser console (“blocked by CORS policy”).
This happens when the game files are loaded from a different origin (domain/port) than the page, or from file://. Fixes: serve all game files from the same domain as the page; if the game calls the backend on another domain/port, keep the backend’s cors middleware enabled and set the allowed origin to your game’s domain; when embedding with an iframe, point the iframe directly at the game’s own index.html URL.

3. Audio or fonts don’t load (404 or MIME-type errors).
Some servers don’t know the correct MIME types. For Apache, add this to your .htaccess:

AddType video/webm .webm
AddType application/json .json
AddType font/ttf .ttf

For Nginx, add the equivalent entries to your mime.types. For IIS, add the MIME mappings in the site settings.

4. No sound until I tap/click.
This is normal: browsers block autoplaying audio. Sound starts after the first user interaction — a browser policy, not a bug.

5. I replaced files on my server but the old version still shows.
The service worker (sw.js) caches the game for offline play. Do a hard refresh (Ctrl+F5) or clear site data (DevTools → Application → Clear storage).

6. Offline / “install app” features don’t work.
Service workers require HTTPS (or localhost).

7. Construct 3 says an addon is missing when opening the .c3p.
Install the free Better Outline addon by skymen (see Technical Requirements) and use Construct 3 r466 or newer.

8. Backend won’t start / “MongooseServerSelectionError”.
MongoDB isn’t running or MONGODB_URI in .env is wrong. Start your local MongoDB service, or check your Atlas connection string and IP allow-list. Also make sure you ran npm install and are on Node.js 18+.

9. The game plays but ignores the backend.
The shipped game is standalone by design — backend integration is a manual step. Follow section J and CONSTRUCT3_INTEGRATION.md.

Q) Extended License - top

If you bought the Extended License I will reskin the game (use your graphics, create a new logo) for free.

Once again, thank you so much for purchasing this code. As I said at the beginning, I'd be glad to help you if you have any questions relating to this code. If you have a more general question relating to the code on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Slotgen

Go To Table of Contents