8 min reading · Practice at your pace
Build and Test a Browser Game with AI
Build a small browser game with AI, play through its rules and change one part without losing the rest. Follow Cedar Star Trail from its original three-star goal to a two-star revision.
A browser game, then one useful rule change
Cedar Star Trail is a self-contained HTML game made in Gab Work. Move around a 3 × 3 grid, collect stars and avoid the center hazard. The original wins at three stars; the revision wins at any two. Compare their rules and repeatable play routes below.
Original rules and checked revision
| Item | Details |
|---|---|
| Start and boundaries | Start at (1,1), score 0. North or West at that corner leaves the player in place. |
| Collect once | East, East reaches (3,1), score 1. West, East revisits it without another point. |
| Original win | East, East, South, South, West, West collects all three stars and wins. |
| Loss and frozen state | East, South enters the center hazard. Further movement stays frozen until Restart. |
| Revision | The revised goal is any two existing stars. East, East, South, South now wins at (3,3), with the third star still on the board. |
1. Define one complete game loop
Name the controls, starting state, goal, failure condition and restart. Deterministic rules make it easier to reproduce a problem. Start with one small complete game before adding artwork, levels or network features.
Text
Create Cedar Star Trail, a tiny turn-based browser game. Deliver one self-contained HTML artifact named cedar-star-trail-original.html with embedded CSS/JavaScript, no network calls, external assets, packages, logins or publishing. Use a 3 by 3 grid, coordinates (column,row) from 1 to 3. Start the player at (1,1). Stars are at (3,1), (3,3), (1,3); hazard is (2,2). Arrow-key controls and four labeled North/East/South/West buttons move one cell per turn; hitting a boundary stays put. Collect a star once when entering its cell. Entering the hazard loses; collecting all three stars wins; both terminal states freeze movement until Restart. Display position, score, objective, win/lose state, and a working Restart button. Keep all gameplay state understandable through text and accessible labels, not canvas alone. Use simple midnight blue and gold colors, but focus on working behavior rather than design. Include a concise How to play. Test movement/boundaries, collection without double-counting, losing, winning, frozen terminal movement and restart using deterministic steps; report actual tests run separately from proposed manual checks. Do not claim a browser or manual play test unless performed. Do not use connected accounts or publish anything.2. Open the game and play a complete round
Open the delivered HTML file and choose Preview. Click inside it for keyboard focus, then follow the routes below. Leave Select or Highlight mode before testing movement. Check the score, win/loss message and Restart control.
3. Change one rule and preserve the rest
The actual follow-up asks for a separate HTML file and a two-star objective. It also requires the objective text, status and win message to agree. Controls, positions, hazard, one-time scoring, boundaries and restart should remain.
Text
Create a separate cedar-star-trail-revised.html from the original. Change only the objective to win after collecting any two of the three existing stars, and update every objective/status/win/instruction string to agree with that two-star goal. Preserve the 3 by 3 grid, start (1,1), all three star positions, center hazard, direction controls/keyboard, one-time collection, boundary blocking, terminal freeze, visual styling and restart. Keep the original HTML file unchanged. Rerun deterministic checks of the changed two-star win plus preserved loss, keyboard, boundaries and restart; report actual tests and limitations honestly. No publishing, network calls or connected accounts.4. Replay changed and preserved behavior
In the original, two stars leave the game running. In the revision, two stars win and freeze movement. Repeat the hazard and restart checks in both. Read the relevant source diff and check nearby instructions for obsolete three-star wording.
Read the original HTML
Exact delivered source, displayed inline as text. No public sample download or published game is required.
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cedar Star Trail</title>
<style>
:root{color-scheme:dark;--night:#101b38;--panel:#182749;--line:#35476d;--gold:#f4c95d;--cream:#fff5d7;--muted:#b9c5dc;--red:#ff8b78;--green:#a9e6bf}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#24365d 0%,var(--night) 65%);color:var(--cream);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;display:grid;place-items:center;padding:20px}.game{width:min(100%,850px);border:1px solid #53658a;border-radius:18px;background:linear-gradient(145deg,#19294b,#121f3d 74%);box-shadow:0 24px 70px #060d20aa;padding:clamp(18px,4vw,34px)}header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);font-weight:800;margin:0 0 3px}h1{font-size:clamp(1.5rem,4vw,2.35rem);line-height:1.1;margin:0;color:#fff4cf}header p:last-child{margin:7px 0 0;color:var(--muted);font-size:.92rem}.badge{border:1px solid #657497;color:var(--gold);border-radius:999px;padding:5px 11px;font-size:.76rem;font-weight:700;white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(230px,1fr) minmax(210px,.7fr);gap:clamp(20px,5vw,42px);align-items:center;padding-top:24px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:390px;width:100%;margin:auto;aspect-ratio:1}.cell{border:1px solid #54688f;border-radius:13px;background:linear-gradient(145deg,#263a62,#1d3054);display:grid;place-items:center;position:relative;min-width:0;transition:background .16s,border-color .16s,transform .16s}.cell .coord{position:absolute;left:9px;top:6px;color:#b9c5dc99;font:600 .68rem ui-monospace,monospace}.cell .glyph{font-size:clamp(1.55rem,7vw,2.8rem);line-height:1;filter:drop-shadow(0 2px 5px #0006)}.cell.start{border-color:#7086ae}.cell.hazard{background:linear-gradient(145deg,#422f51,#312847);border-color:#8a6281}.cell.player{outline:3px solid var(--gold);outline-offset:-4px;background:linear-gradient(145deg,#43527a,#2a3d69)}.cell.collected{opacity:.56}.side{display:grid;gap:16px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px 14px;background:#101b34;border:1px solid #334668;border-radius:12px}.stat small{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.stat strong{font-size:1.08rem;color:var(--gold)}.status{margin:0;padding:12px 14px;border-radius:11px;background:#24375b;border-left:3px solid var(--gold);min-height:50px}.status.win{border-color:var(--green);color:var(--green)}.status.lose{border-color:var(--red);color:#ffd3cb}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:250px;margin:0 auto}.controls button,.restart{font:700 .95rem system-ui;color:var(--cream);background:#293c63;border:1px solid #60749b;border-radius:10px;min-height:44px;cursor:pointer;transition:background .15s,transform .12s}.controls button:hover,.restart:hover{background:#3a507b}.controls button:active,.restart:active{transform:translateY(1px)}.controls button:focus-visible,.restart:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.controls .north{grid-column:2}.controls .west{grid-column:1;grid-row:2}.controls .south{grid-column:2;grid-row:2}.controls .east{grid-column:3;grid-row:2}.restart{background:transparent;border-color:var(--gold);color:var(--gold);width:100%}.how{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}.how strong{color:var(--cream)}.how p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:620px){body{padding:10px;place-items:start center}.game{padding:17px;border-radius:14px}header{align-items:center}.layout{grid-template-columns:1fr;gap:18px;padding-top:18px}.board{max-width:min(100%,340px);gap:7px}.cell{border-radius:10px}.side{gap:12px}.controls{max-width:260px}.stat{padding:9px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
</style>
</head>
<body>
<main class="game" aria-labelledby="title">
<header><div><p class="eyebrow">A little trail, a little strategy</p><h1 id="title">Cedar Star Trail</h1><p>Find all three stars. The center is best left untouched.</p></div><span class="badge">3 × 3 · TURN-BASED</span></header>
<div class="layout">
<section aria-label="Trail board"><div id="board" class="board" role="grid" aria-label="Trail map, columns and rows 1 through 3"></div><p class="sr-only" id="boardText"></p></section>
<section class="side" aria-label="Game status and controls">
<div class="stats"><div class="stat"><small>Position (column,row)</small><strong id="position">(1,1)</strong></div><div class="stat"><small>Stars</small><strong id="score">0 / 3</strong></div></div>
<p id="status" class="status" role="status" aria-live="polite">Your trail begins at (1,1). Collect the three stars and avoid the hazard.</p>
<div class="controls" aria-label="Move one cell"><button class="north" data-move="north" aria-label="Move North">↑ North</button><button class="west" data-move="west" aria-label="Move West">← West</button><button class="south" data-move="south" aria-label="Move South">↓ South</button><button class="east" data-move="east" aria-label="Move East">East →</button></div>
<button id="restart" class="restart">Restart trail</button>
<div class="how"><p><strong>How to play:</strong> Use the arrow keys or the labeled direction buttons to move one square per turn. Stars are at (3,1), (3,3), and (1,3); avoid the hazard at (2,2). Edges hold you in place. Collect every star to win.</p></div>
</section></div></main>
<script>
(()=>{'use strict';
const stars=[ '3,1','3,3','1,3' ], hazard='2,2';
let x=1,y=1,found=new Set(),ended=false;
const board=document.getElementById('board'),pos=document.getElementById('position'),score=document.getElementById('score'),status=document.getElementById('status'),boardText=document.getElementById('boardText');
function render(){board.replaceChildren();for(let row=1;row<=3;row++)for(let col=1;col<=3;col++){const key=`${col},${row}`,cell=document.createElement('div');cell.className='cell';cell.setAttribute('role','gridcell');let symbol='';let label=`(${col},${row})`;if(stars.includes(key)){if(found.has(key)){cell.classList.add('collected');symbol='✦';label+=' — star collected';}else{symbol='★';label+=' — star';}}if(key===hazard){cell.classList.add('hazard');symbol='✹';label+=' — hazard';}if(key==='1,1')cell.classList.add('start');if(col===x&&row===y){cell.classList.add('player');symbol='●';label+=' — player';}cell.setAttribute('aria-label',label);cell.innerHTML=`<span class="coord" aria-hidden="true">${col},${row}</span><span class="glyph" aria-hidden="true">${symbol}</span>`;board.append(cell)}pos.textContent=`(${x},${y})`;score.textContent=`${found.size} / 3`;boardText.textContent=`Player at (${x},${y}); ${found.size} of 3 stars collected. Hazard at (2,2).`}
function move(dir){if(ended)return;const oldX=x,oldY=y;if(dir==='north')y=Math.max(1,y-1);if(dir==='south')y=Math.min(3,y+1);if(dir==='west')x=Math.max(1,x-1);if(dir==='east')x=Math.min(3,x+1);const key=`${x},${y}`;let message=(x===oldX&&y===oldY)?`Boundary reached. You remain at (${x},${y}).`:`Moved to (${x},${y}).`;if(key===hazard){ended=true;status.textContent='Trail ended — you entered the hazard at (2,2). Restart to try again.';status.className='status lose';}else if(stars.includes(key)&&!found.has(key)){found.add(key);message+=` Star collected! ${found.size} of 3.`;if(found.size===3){ended=true;status.textContent='You found every star — the trail is complete! You win.';status.className='status win';}else{status.textContent=message;status.className='status';}}else{status.textContent=message;status.className='status';}render()}
function reset(){x=1;y=1;found=new Set();ended=false;status.textContent='Your trail begins at (1,1). Collect the three stars and avoid the hazard.';status.className='status';render()}
document.querySelectorAll('[data-move]').forEach(b=>b.addEventListener('click',()=>move(b.dataset.move)));document.getElementById('restart').addEventListener('click',reset);document.addEventListener('keydown',e=>{const keys={ArrowUp:'north',ArrowRight:'east',ArrowDown:'south',ArrowLeft:'west'};const dir=keys[e.key];if(dir){e.preventDefault();move(dir)}});render();
})();
</script>
</body></html>Read the revised HTML
Exact delivered revision, separate from the unchanged original.
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cedar Star Trail</title>
<style>
:root{color-scheme:dark;--night:#101b38;--panel:#182749;--line:#35476d;--gold:#f4c95d;--cream:#fff5d7;--muted:#b9c5dc;--red:#ff8b78;--green:#a9e6bf}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#24365d 0%,var(--night) 65%);color:var(--cream);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;display:grid;place-items:center;padding:20px}.game{width:min(100%,850px);border:1px solid #53658a;border-radius:18px;background:linear-gradient(145deg,#19294b,#121f3d 74%);box-shadow:0 24px 70px #060d20aa;padding:clamp(18px,4vw,34px)}header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);font-weight:800;margin:0 0 3px}h1{font-size:clamp(1.5rem,4vw,2.35rem);line-height:1.1;margin:0;color:#fff4cf}header p:last-child{margin:7px 0 0;color:var(--muted);font-size:.92rem}.badge{border:1px solid #657497;color:var(--gold);border-radius:999px;padding:5px 11px;font-size:.76rem;font-weight:700;white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(230px,1fr) minmax(210px,.7fr);gap:clamp(20px,5vw,42px);align-items:center;padding-top:24px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:390px;width:100%;margin:auto;aspect-ratio:1}.cell{border:1px solid #54688f;border-radius:13px;background:linear-gradient(145deg,#263a62,#1d3054);display:grid;place-items:center;position:relative;min-width:0;transition:background .16s,border-color .16s,transform .16s}.cell .coord{position:absolute;left:9px;top:6px;color:#b9c5dc99;font:600 .68rem ui-monospace,monospace}.cell .glyph{font-size:clamp(1.55rem,7vw,2.8rem);line-height:1;filter:drop-shadow(0 2px 5px #0006)}.cell.start{border-color:#7086ae}.cell.hazard{background:linear-gradient(145deg,#422f51,#312847);border-color:#8a6281}.cell.player{outline:3px solid var(--gold);outline-offset:-4px;background:linear-gradient(145deg,#43527a,#2a3d69)}.cell.collected{opacity:.56}.side{display:grid;gap:16px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px 14px;background:#101b34;border:1px solid #334668;border-radius:12px}.stat small{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.stat strong{font-size:1.08rem;color:var(--gold)}.status{margin:0;padding:12px 14px;border-radius:11px;background:#24375b;border-left:3px solid var(--gold);min-height:50px}.status.win{border-color:var(--green);color:var(--green)}.status.lose{border-color:var(--red);color:#ffd3cb}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:250px;margin:0 auto}.controls button,.restart{font:700 .95rem system-ui;color:var(--cream);background:#293c63;border:1px solid #60749b;border-radius:10px;min-height:44px;cursor:pointer;transition:background .15s,transform .12s}.controls button:hover,.restart:hover{background:#3a507b}.controls button:active,.restart:active{transform:translateY(1px)}.controls button:focus-visible,.restart:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.controls .north{grid-column:2}.controls .west{grid-column:1;grid-row:2}.controls .south{grid-column:2;grid-row:2}.controls .east{grid-column:3;grid-row:2}.restart{background:transparent;border-color:var(--gold);color:var(--gold);width:100%}.how{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}.how strong{color:var(--cream)}.how p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:620px){body{padding:10px;place-items:start center}.game{padding:17px;border-radius:14px}header{align-items:center}.layout{grid-template-columns:1fr;gap:18px;padding-top:18px}.board{max-width:min(100%,340px);gap:7px}.cell{border-radius:10px}.side{gap:12px}.controls{max-width:260px}.stat{padding:9px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
</style>
</head>
<body>
<main class="game" aria-labelledby="title">
<header><div><p class="eyebrow">A little trail, a little strategy</p><h1 id="title">Cedar Star Trail</h1><p>Collect any two of the three stars. The center is best left untouched.</p></div><span class="badge">3 × 3 · TURN-BASED</span></header>
<div class="layout">
<section aria-label="Trail board"><div id="board" class="board" role="grid" aria-label="Trail map, columns and rows 1 through 3"></div><p class="sr-only" id="boardText"></p></section>
<section class="side" aria-label="Game status and controls">
<div class="stats"><div class="stat"><small>Position (column,row)</small><strong id="position">(1,1)</strong></div><div class="stat"><small>Stars collected · goal 2</small><strong id="score">0 / 2</strong></div></div>
<p id="status" class="status" role="status" aria-live="polite">Your trail begins at (1,1). Collect any two stars and avoid the hazard.</p>
<div class="controls" aria-label="Move one cell"><button class="north" data-move="north" aria-label="Move North">↑ North</button><button class="west" data-move="west" aria-label="Move West">← West</button><button class="south" data-move="south" aria-label="Move South">↓ South</button><button class="east" data-move="east" aria-label="Move East">East →</button></div>
<button id="restart" class="restart">Restart trail</button>
<div class="how"><p><strong>How to play:</strong> Use the arrow keys or the labeled direction buttons to move one square per turn. Stars are at (3,1), (3,3), and (1,3); avoid the hazard at (2,2). Edges hold you in place. Collect any two stars to win.</p></div>
</section></div></main>
<script>
(()=>{'use strict';
const stars=[ '3,1','3,3','1,3' ], hazard='2,2';
let x=1,y=1,found=new Set(),ended=false;
const board=document.getElementById('board'),pos=document.getElementById('position'),score=document.getElementById('score'),status=document.getElementById('status'),boardText=document.getElementById('boardText');
function render(){board.replaceChildren();for(let row=1;row<=3;row++)for(let col=1;col<=3;col++){const key=`${col},${row}`,cell=document.createElement('div');cell.className='cell';cell.setAttribute('role','gridcell');let symbol='';let label=`(${col},${row})`;if(stars.includes(key)){if(found.has(key)){cell.classList.add('collected');symbol='✦';label+=' — star collected';}else{symbol='★';label+=' — star';}}if(key===hazard){cell.classList.add('hazard');symbol='✹';label+=' — hazard';}if(key==='1,1')cell.classList.add('start');if(col===x&&row===y){cell.classList.add('player');symbol='●';label+=' — player';}cell.setAttribute('aria-label',label);cell.innerHTML=`<span class="coord" aria-hidden="true">${col},${row}</span><span class="glyph" aria-hidden="true">${symbol}</span>`;board.append(cell)}pos.textContent=`(${x},${y})`;score.textContent=`${found.size} / 2`;boardText.textContent=`Player at (${x},${y}); ${found.size} of 2 stars needed collected. Three stars are available. Hazard at (2,2).`}
function move(dir){if(ended)return;const oldX=x,oldY=y;if(dir==='north')y=Math.max(1,y-1);if(dir==='south')y=Math.min(3,y+1);if(dir==='west')x=Math.max(1,x-1);if(dir==='east')x=Math.min(3,x+1);const key=`${x},${y}`;let message=(x===oldX&&y===oldY)?`Boundary reached. You remain at (${x},${y}).`:`Moved to (${x},${y}).`;if(key===hazard){ended=true;status.textContent='Trail ended — you entered the hazard at (2,2). Restart to try again.';status.className='status lose';}else if(stars.includes(key)&&!found.has(key)){found.add(key);message+=` Star collected! ${found.size} of 2 needed.`;if(found.size===2){ended=true;status.textContent='You collected two stars — the trail is complete! You win.';status.className='status win';}else{status.textContent=message;status.className='status';}}else{status.textContent=message;status.className='status';}render()}
function reset(){x=1;y=1;found=new Set();ended=false;status.textContent='Your trail begins at (1,1). Collect any two stars and avoid the hazard.';status.className='status';render()}
document.querySelectorAll('[data-move]').forEach(b=>b.addEventListener('click',()=>move(b.dataset.move)));document.getElementById('restart').addEventListener('click',reset);document.addEventListener('keydown',e=>{const keys={ArrowUp:'north',ArrowRight:'east',ArrowDown:'south',ArrowLeft:'west'};const dir=keys[e.key];if(dir){e.preventDefault();move(dir)}});render();
})();
</script>
</body></html>Point to a problem with reproduction steps
Use Select or Highlight in the HTML preview where available, then Ask for changes. Review a prepared request before sending. A canvas may appear as one element; describe the actual controls, route, observed state and expected behavior. Keep Play mode active when testing controls.
If the preview or controls fail
Check that the intended version loaded and the preview has focus. Leave Select/Highlight mode before playing. Try Restart preview for a blank frame, then report the actual error and reproduction steps in the same task. Ask for a correction to the failing game rather than treating the failure as a completed result.
Access and usage
Work requires Plus and uses applicable model and tool credits. The Work reference explains request usage, active sessions and new-task limits.
Browser-game questions
Use a complete loop and repeatable checks.
Can I make a game without writing the code myself?
You can ask Work for a small browser game in plain language, then inspect and play the delivered result. Cedar Star Trail is an actual example; it does not establish that any game idea or platform will work.
How do I test an AI-generated game?
Check movement, boundaries, scoring, win/loss, frozen terminal input and restart with repeatable steps. Recheck both the changed rule and preserved behavior after a revision.
Does opening the game preview publish it?
No. Public-site publication is a separate action. Wait for a confirmed live result before sharing a public link.
Guides and resources
Find more detail and choose your next step.
Your turn
Build a game with rules you can test.
Use the complete game brief below. Play the original through a win, a loss and a restart, then request the two-star revision and repeat the same checks.
Write a draft and review the checklist.
Your draft saves in this browser. You can leave and come back.
Take your brief into Work
Copy the brief, open Gab AI and choose Work. Paste the request and send it yourself, then inspect the delivered result.
Open Gab AI for WorkMake one focused revision
After reviewing the first result, send this follow-up in the same conversation. Keep both versions available for comparison.
Text
Create a separate cedar-star-trail-revised.html from the original. Change only the objective to win after collecting any two of the three existing stars, and update every objective/status/win/instruction string to agree with that two-star goal. Preserve the 3 by 3 grid, start (1,1), all three star positions, center hazard, direction controls/keyboard, one-time collection, boundary blocking, terminal freeze, visual styling and restart. Keep the original HTML file unchanged. Rerun deterministic checks of the changed two-star win plus preserved loss, keyboard, boundaries and restart; report actual tests and limitations honestly. No publishing, network calls or connected accounts.Use the checklist to review the change and the details that should stay.