Game Play

Build a Whodunit game and learn how to develop a full-stack game app using Webflow and BuildShip. Create the gameplay API using OpenAI for narrative and Replicate for image generation.

Report this template

Select the reason for reporting

Describe the issue in detail

Share template

Link to template

https://templates.buildship.com/template/T3cNQvNV7vMg/

By BuildShip

Select an example

Inputs

theme

game of thrones

This is a static example using sample inputs. Remix the template to run it with your own values.

Output

Read me

🕵️ Who's the Murderer Game

Kick start the game and get all the game assets

Overview

This project consists of two components:

Creating the gameplay API that generates the assets
Game UI front-end that can be generated and deployed on V0 by Vercel, or other platforms of your choice.

Prerequisites

You need accounts and API keys on the following platforms

Replicate - For image generation
OpenAI - For story text generation

✍️ How to Use

Creating the API backend

Step 1: Connect the API keys in the keys section of the nodes for Replicate, ElevenLabs, OpenAI - you need to do it only once. If you already have connected these you can proceed to the step 2

Step 2: Test the workflow by clicking the test panel and ensure it works end to end with a sample input like "Harry Potter"

Step 3: Go to connector tab and click connect API

Step 4: Click ship to start using the backend APi

Creating the front end for the game

Step 1: Copy the code snippet from the Usage tab of the API connector and Copy the sample out that you have from the Test panel. Keep these two handy as these are what your UI needs

Step 2: Head to https://v0.dev/ and prompt as follows


Create a game UI for a guessing game "Who's the Murderer". Have a way for the user to select the winner and tell if they are correct or wrong. Allow only 1 chance. If wrong tell who is the correct murderer and why. Allow only 1 chance.

Here is the API to call: <paste the code snippet you copied from the API connector tab>

Here is the sample response: <paste the JSON you copied form the test panel>

Step 3: Only the UI is generated, test it our, suggest edits if needed and enjoy!!

Step 4: Deploy to vercel and share to friends