Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) - Programming (2)

Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) - Programming (2) - Nairaland

Nairaland Forum › Science/Technology › Programming › Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) (23718 Views)

1 2 3 4 5 6 7 8 9 10 ... 16 Reply (Go Down)

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Emmaomotob(m): 2:56am On Dec 16, 2025

Who is going to do that for such minuscule amount of money?

2 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by africoders18: 3:01am On Dec 16, 2025

This is a good one

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by africoders18: 3:02am On Dec 16, 2025

Emmaomotob:
Who is going to do that for such minuscule amount of money?

Haba! No talk like that, this is a good boost for this section.

6 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Raypawer(m): 3:07am On Dec 16, 2025

Dropping repo at daybreak

Cheers 🥂

2 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by gloryman91(m): 3:10am On Dec 16, 2025

Whao how do I win this prize 🏆??.

Let me start something now on my phone.

1 Like

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by showtechedge(m): 3:39am On Dec 16, 2025*

Hello Everyone and Respect to the Organizer,

Here is my final submission for the 3D Ludo Challenge.

This project was built as a robust Single Page Application (SPA) using Vanilla JavaScript and Three.js. My focus was on creating a stable, "Golden Master" build that performs flawlessly across both desktop and mobile devices without relying on heavy frameworks.

🔗 Repository: https://github.com/showtechedge/3d-ludo-challenge.git

🎮 Live Demo: https://showtechedge.github.io/3d-ludo-challenge/

🛠 Key Engineering Features:

🤖 Single Player AI (CPU): Unlike standard digital boards, this is a full video game. You can play Solo vs 3 CPUs, or Team Mode (2 Humans vs 2 CPUs). The AI handles rolling, decision making, and piece movement automatically.

🎮Ludo games can take 40 minutes. I prioritized a Save System so you never lose your progress, even on mobile.

📱 Mobile-First "Smart Tap" System: I implemented a custom raycasting algorithm with a proximity threshold. This ensures a smooth experience on touchscreens (solving the "fat finger" issue) while maintaining precise clicks on desktop.

💾 Intelligent State Management: The game features a persistent Auto-Save system using LocalStorage. You can close the browser and resume exactly where you left off, or create named Save Slots.

🎨 Studio Quality Visuals: Features custom lighting, procedural textures (generated via Canvas API to keep file size low), and a polished UI with a Start Screen and Victory Celebration.

🇳🇬 Naija Ruleset: Fully implements the "Killing," "Double Six," and "Home Stretch" rules we are used to.

🙏 Appreciation: A big thank you to @Seun and the organizers for putting this challenge together. It was a rigorous test of logic and 3D rendering optimization. To the other participants, well done on your builds—it is great to see the level of talent in our developer community.

Open to feedback and code reviews!

7 Likes 5 Shares

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by InvertedHammer: 3:43am On Dec 16, 2025

Seun:
Hello,

In the interest of shining a spotlight on the coding talents on Nairaland, we are conducting a series of challenges.

The first one is a 3D Ludo Game challenge. This requires you to use AI to help you create an enjoyable Ludo game in a single html file using three.js via CDN to display the game in 3D. The Ludo rules are up to you to decide but must be made clear to the users.

Steps:
Develop the game as specified (single html file) using git for source control.
Push the source code to a private github repo before the deadline.
After the deadline, make the github repo public and post it on this thread for assessment.
If you touch or make any change to the repo after the deadline, you'll be disqualified.

Tips:
Use a powerful AI Like Gemini 3 Pro (free on Android Studio) for planning.
You will be graded based on everything that makes your game superior to other entries.
Such as the features (very important), code quality, UI, and the sweetness of the game.

The prize for the best entry is N250,000. The runner-up gets: N125,000.
The deadline is 10:00am Nigerian time on Thursday, the 18th of December, 2025.

Good luck!
Seun (Founder, Nairaland)

/
So who has the proprietary and legal rights to the game? Nairaland or the developer?

/

4 Likes 1 Share

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by lonelydora: 3:52am On Dec 16, 2025

Any challenge that involves big yansh and breast, call me.

For now, na siddon look I dey.

1 Like

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by lonelydora: 3:57am On Dec 16, 2025

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<title>3D Ludo Arena</title>
<style>
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background:#111; }
#ui {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 14px;
border-radius: 10px;
width: 240px;
}
button {
width: 100%;
padding: 10px;
margin-top: 8px;
cursor: pointer;
border-radius: 6px;
border: none;
font-weight: bold;
}
#rules {
position:absolute;
bottom:10px;
left:10px;
width:240px;
background:rgba(0,0,0,0.75);
color:#ddd;
padding:10px;
border-radius:10px;
font-size:12px;
}
</style>
</head>
<body><div id="ui">
<h3>🎲 3D Ludo Arena</h3>
<p id="turn">Turn: Red (Human)</p>
<p id="dice">Dice: -</p>
<button onclick="rollDice()">Roll Dice</button>
</div><div id="rules">
<b>Rules</b><br>
• Roll 6 to leave base<br>
• Capture sends opponent home<br>
• Rolling 6 gives extra turn<br>
• First player to complete path wins
</div><script src="https://cdn.jsdelivr.net/npm/three@0.158/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.158/examples/js/controls/OrbitControls.js"></script><script>
/******************** SCENE ************************/
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 30);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const light = new THREE.DirectionalLight(0xffffff, 0. cool

;
light.position.set(20,30,10);
scene.add(light);

/******************** BOARD ************************/
const board = new THREE.Mesh(
new THREE.BoxGeometry(24, 1, 24),
new THREE.MeshStandardMaterial({color:0xf2f2f2})
);
scene.add(board);

/******************** PATH ************************/
const path = [];
const pathGeo = new THREE.SphereGeometry(0.45, 16, 16);

for(let i=0;i<24;i++){
const m = new THREE.Mesh(pathGeo, new THREE.MeshStandardMaterial({color:0x777777}));
m.position.set(-10 + i, 1, -10);
scene.add(m);
path.push(m.position.clone());
}

/******************** PLAYERS ************************/
const players = [
{name:'Red', color:0xff3333, isAI:false, pos:-1, token:null},
{name:'Blue', color:0x3366ff, isAI:true, pos:-1, token:null},
{name:'Green', color:0x33ff66, isAI:true, pos:-1, token:null},
{name:'Yellow', color:0xffcc33, isAI:true, pos:-1, token:null}
];

players.forEach((p,i)=>{
const t = new THREE.Mesh(
new THREE.CylinderGeometry(0.7,0.7,1,32),
new THREE.MeshStandardMaterial({color:p.color})
);
t.position.set(-10 + i*4, 1, 10);
scene.add(t);
p.token = t;
});

/******************** GAME LOGIC ************************/
let currentPlayer = 0;
let diceValue = 0;
let busy = false;

function

Seun, see it here! Gimme my 250k biko. I no fit shout.

3 Likes 1 Share

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by geezville86: 4:02am On Dec 16, 2025

Seun - Is this linked in any way to Bosun Tijani’s 3MTT program?

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by FutureSenator: 4:28am On Dec 16, 2025

Seun:
Hello,

In the interest of shining a spotlight on the coding talents on Nairaland, we are conducting a series of challenges.

The first one is a 3D Ludo Game challenge. This requires you to use AI to help you create an enjoyable Ludo game in a single html file using three.js via CDN to display the game in 3D. The Ludo rules are up to you to decide but must be made clear to the users.

Steps:
Develop the game as specified (single html file) using git for source control.
Push the source code to a private github repo before the deadline.
After the deadline, make the github repo public and post it on this thread for assessment.
If you touch or make any change to the repo after the deadline, you'll be disqualified.

Tips:
Use a powerful AI Like Gemini 3 Pro (free on Android Studio) for planning.
You will be graded based on everything that makes your game superior to other entries.
Such as the features (very important), code quality, UI, and the sweetness of the game.

The prize for the best entry is N250,000. The runner-up gets: N125,000.
The deadline is 10:00am Nigerian time on Thursday, the 18th of December, 2025.

Good luck!
Seun (Founder, Nairaland)

Game on.

I will update with a link once done.

https://placeholder

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by ANTONINEUTRON(m): 4:44am On Dec 16, 2025

Hi Seun

Is it possible to DM you?

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by AngelicBeing: 4:50am On Dec 16, 2025

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by AngelicBeing: 4:52am On Dec 16, 2025

lonelydora:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<title>3D Ludo Arena</title>
<style>
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background:#111; }
#ui {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 14px;
border-radius: 10px;
width: 240px;
}
button {
width: 100%;
padding: 10px;
margin-top: 8px;
cursor: pointer;
border-radius: 6px;
border: none;
font-weight: bold;
}
#rules {
position:absolute;
bottom:10px;
left:10px;
width:240px;
background:rgba(0,0,0,0.75);
color:#ddd;
padding:10px;
border-radius:10px;
font-size:12px;
}
</style>
</head>
<body><div id="ui">
<h3>🎲 3D Ludo Arena</h3>
<p id="turn">Turn: Red (Human)</p>
<p id="dice">Dice: -</p>
<button onclick="rollDice()">Roll Dice</button>
</div><div id="rules">
<b>Rules</b><br>
• Roll 6 to leave base<br>
• Capture sends opponent home<br>
• Rolling 6 gives extra turn<br>
• First player to complete path wins
</div><script src="https://cdn.jsdelivr.net/npm/three@0.158/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.158/examples/js/controls/OrbitControls.js"></script><script>
/******************** SCENE ************************/
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 30);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const light = new THREE.DirectionalLight(0xffffff, 0.;
light.position.set(20,30,10);
scene.add(light);

/******************** BOARD ************************/
const board = new THREE.Mesh(
new THREE.BoxGeometry(24, 1, 24),
new THREE.MeshStandardMaterial({color:0xf2f2f2})
);
scene.add(board);

/******************** PATH ************************/
const path = [];
const pathGeo = new THREE.SphereGeometry(0.45, 16, 16);

for(let i=0;i<24;i++){
const m = new THREE.Mesh(pathGeo, new THREE.MeshStandardMaterial({color:0x777777}));
m.position.set(-10 + i, 1, -10);
scene.add(m);
path.push(m.position.clone());
}

/******************** PLAYERS ************************/
const players = [
{name:'Red', color:0xff3333, isAI:false, pos:-1, token:null},
{name:'Blue', color:0x3366ff, isAI:true, pos:-1, token:null},
{name:'Green', color:0x33ff66, isAI:true, pos:-1, token:null},
{name:'Yellow', color:0xffcc33, isAI:true, pos:-1, token:null}
];

players.forEach((p,i)=>{
const t = new THREE.Mesh(
new THREE.CylinderGeometry(0.7,0.7,1,32),
new THREE.MeshStandardMaterial({color:p.color})
);
t.position.set(-10 + i*4, 1, 10);
scene.add(t);
p.token = t;
});

/******************** GAME LOGIC ************************/
let currentPlayer = 0;
let diceValue = 0;
let busy = false;

function

Seun, see it here! Gimme my 250k biko. I no fit shout.

I have upgraded this your own and I will use it to collect the money, hahaha 😂

4 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Deasegun19(m): 5:01am On Dec 16, 2025*

Working on this.

I hope I win

https://github.com/DIA16/NL-Ludo-Challenge

Live now @seun @Seun

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Stephen0mozzy: 5:07am On Dec 16, 2025

Hello Seun - why a single HTML file?
Can we have separate js/css files - it'll be an eye sore to have everything in one file na - abi una no wan read the code - even with vibe engineering, judging criteria suppose include great project structure na.

Men for like create utility functions and the likes to make the main file clean.

Explain better abeg - make men try chop this nairaland cake

2 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by coolcharm(m): 5:12am On Dec 16, 2025

This is truly commendable

5 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by lonelydora: 5:12am On Dec 16, 2025

AngelicBeing:
I have upgraded this your own and I will use it to collect the money, hahaha 😂

Buy me beer when you win

4 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Babangidapikin: 5:31am On Dec 16, 2025

lovely challenge

2 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Seun(mod): 5:34am On Dec 16, 2025

geezville86:
Seun - Is this linked in any way to Bosun Tijani’s 3MTT program?

No, but it's inspired by HNGi which is very similar to 3MTT.

Raypawer:
Dropping repo at daybreak
Cheers 🥂

I love your enthusiasm but you must not drop the repo here until the deadline expires. You develop and push to your private github repo before the deadline, then you make it public and share after the deadline, so that other contestants won't steal your code.

10 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by ekehopp2: 5:36am On Dec 16, 2025

Great initiative. Looking forward to more of this. cool

2 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by lovelybobo: 5:40am On Dec 16, 2025

I love this. Good luck to everyone

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Conestone(m): 5:57am On Dec 16, 2025

lonelydora:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<title>3D Ludo Arena</title>
<style>
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background:#111; }
#ui {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 14px;
border-radius: 10px;
width: 240px;
}
button {
width: 100%;
padding: 10px;
margin-top: 8px;
cursor: pointer;
border-radius: 6px;
border: none;
font-weight: bold;
}
#rules {
position:absolute;
bottom:10px;
left:10px;
width:240px;
background:rgba(0,0,0,0.75);
color:#ddd;
padding:10px;
border-radius:10px;
font-size:12px;
}
</style>
</head>
<body><div id="ui">
<h3>🎲 3D Ludo Arena</h3>
<p id="turn">Turn: Red (Human)</p>
<p id="dice">Dice: -</p>
<button onclick="rollDice()">Roll Dice</button>
</div><div id="rules">
<b>Rules</b><br>
• Roll 6 to leave base<br>
• Capture sends opponent home<br>
• Rolling 6 gives extra turn<br>
• First player to complete path wins
</div><script src="https://cdn.jsdelivr.net/npm/three@0.158/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.158/examples/js/controls/OrbitControls.js"></script><script>
/******************** SCENE ************************/
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 30);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const light = new THREE.DirectionalLight(0xffffff, 0.;
light.position.set(20,30,10);
scene.add(light);

/******************** BOARD ************************/
const board = new THREE.Mesh(
new THREE.BoxGeometry(24, 1, 24),
new THREE.MeshStandardMaterial({color:0xf2f2f2})
);
scene.add(board);

/******************** PATH ************************/
const path = [];
const pathGeo = new THREE.SphereGeometry(0.45, 16, 16);

for(let i=0;i<24;i++){
const m = new THREE.Mesh(pathGeo, new THREE.MeshStandardMaterial({color:0x777777}));
m.position.set(-10 + i, 1, -10);
scene.add(m);
path.push(m.position.clone());
}

/******************** PLAYERS ************************/
const players = [
{name:'Red', color:0xff3333, isAI:false, pos:-1, token:null},
{name:'Blue', color:0x3366ff, isAI:true, pos:-1, token:null},
{name:'Green', color:0x33ff66, isAI:true, pos:-1, token:null},
{name:'Yellow', color:0xffcc33, isAI:true, pos:-1, token:null}
];

players.forEach((p,i)=>{
const t = new THREE.Mesh(
new THREE.CylinderGeometry(0.7,0.7,1,32),
new THREE.MeshStandardMaterial({color:p.color})
);
t.position.set(-10 + i*4, 1, 10);
scene.add(t);
p.token = t;
});

/******************** GAME LOGIC ************************/
let currentPlayer = 0;
let diceValue = 0;
let busy = false;

function

Seun, see it here! Gimme my 250k biko. I no fit shout.

How is Mr Seun supposed to play the game like this, or did he told you he is looking for codes to read?

3 Likes

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by Sonnobax15(m): 6:02am On Dec 16, 2025

Seun, monetize Nairaland and stop all these nonsense angry

Not everybody knows a thing about tech and coding undecided

1 Like

Re: Nairaland Full-stack Vibe Engineering Challenge #1 (Ludo Game) by ANTONINEUTRON(m): 6:08am On Dec 16, 2025*

Seun:
Hello,

In the interest of shining a spotlight on the coding talents on Nairaland, we are conducting a series of challenges.

The first one is a 3D Ludo Game challenge. This requires you to use AI to help you create an enjoyable Ludo game in a single html file using three.js via CDN to display the game in 3D. The Ludo rules are up to you to decide but must be made clear to the users.

Steps:
Develop the game as specified (single html file) using git for source control.
Push the source code to a private github repo before the deadline.
After the deadline, make the github repo public and post it on this thread for assessment.
If you touch or make any change to the repo after the deadline, you'll be disqualified.

Tips:
Use a powerful AI Like Gemini 3 Pro (free on Android Studio) for planning.
You will be graded based on everything that makes your game superior to other entries.
Such as the features (very important), code quality, UI, and the sweetness of the game.

The prize for the best entry is N250,000. The runner-up gets: N125,000.
The deadline is 10:00am Nigerian time on Thursday, the 18th of December, 2025.

Good luck!
Seun (Founder, Nairaland)